react-bootstrap-tableでテーブルフッターを追加するにはどうすればよいですか？

Question

最新のreact-bootstrap-table（4.1.5）のリリースでは、TableFooterというReactコンポーネントがあります。これは、フッターをテーブルの最下部に追加できることを前提としています。

source（ただし、official site documentationには記載されていません）に記載されている使用方法の例がありますが、動作しないようです。上記の例を実行するときに渡されたフッターのオブジェクトの「フィルタ」と呼ばれるプロパティにアクセスしようとすると、それエラー

render() { 
    const footerData = [ 
     [ 
     { 
      label: 'Total', 
      columnIndex: 0 
     }, 
     { 
      label: 'Total value', 
      columnIndex: 2, 
      align: 'right', 
      formatter: (tableData) => { 
      let label = 0; 
      for (let i = 0, tableDataLen = tableData.length; i < tableDataLen; i++) { 
       label += tableData[i].price; 
      } 
      return (
       <strong>{ label }</strong> 
      ); 
      } 
     } 
     ] 
    ]; 

    return (
     <div> 
     <BootstrapTable 
      data={ products } 
      footerData={ footerData } 
      footer 
      pagination 
      search> 
      <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn> 
      <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn> 
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn> 
     </BootstrapTable> 
     </div> 
    ); 
    } 

これはTableFooter.jsにthis lineに発生します：そのはず使用が以下に再現される。

const footerObj = footerItem.filter((item) => { 
    return item.columnIndex === colIndex; 
}); 

上記のフィルタ関数は、渡されたフッターデータオブジェクトの1つを選択すると思われますが、それを定義する方法がわかりません。

フッターをテーブルに追加するにはどうすればよいですか？

Answer 1

このようなエラーは発生しませんでした。私が期待どおりに行っているかどうかを確認するために、デモを確認してください。

WORKING DEMO