title: How do you add table footers with react-bootstrap-table?
body: <p>In the latest release of react-bootstrap-table (4.1.5), there is a React component called <a href="https://github.com/AllenFang/react-bootstrap-table/blob/master/src/TableFooter.js" rel="nofollow noreferrer">TableFooter</a> which I presume allows you to add a footer to the bottom of a table.</p>
  
  <p>There is an example of how to use it listed in the <a href="https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/footer/footer-table.js" rel="nofollow noreferrer">source</a> (although not in the <a href="https://allenfang.github.io/react-bootstrap-table/example.html" rel="nofollow noreferrer">official site documentation</a>), however it does not seem to work. Its supposed usage is reproduced below:</p>
  
  <pre><code>render() {
      const footerData = [
        [
          {
            label: 'Total',
            columnIndex: 0
          },
          {
            label: 'Total value',
            columnIndex: 2,
            align: 'right',
            formatter: (tableData) =&gt; {
              let label = 0;
              for (let i = 0, tableDataLen = tableData.length; i &lt; tableDataLen; i++) {
                label += tableData[i].price;
              }
              return (
                &lt;strong&gt;{ label }&lt;/strong&gt;
              );
            }
          }
        ]
      ];
  
      return (
        &lt;div&gt;
          &lt;BootstrapTable
            data={ products }
            footerData={ footerData }
            footer
            pagination
            search&gt;
            &lt;TableHeaderColumn dataField='id' isKey={ true }&gt;Product ID&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn dataField='name'&gt;Product Name&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn dataField='price'&gt;Product Price&lt;/TableHeaderColumn&gt;
          &lt;/BootstrapTable&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>When running the above example it errors when trying to access a property called "filter" on the footer object passed in. This occurs on <a href="https://github.com/AllenFang/react-bootstrap-table/blob/fed36faab76abf12c5dad5589910df7bb81dd908/src/TableFooter.js#L29" rel="nofollow noreferrer">this line</a> in TableFooter.js:</p>
  
  <pre><code>const footerObj = footerItem.filter((item) =&gt; {
      return item.columnIndex === colIndex;
  });
  </code></pre>
  
  <p>I think the filter function referenced above is supposed to select one of the footer data objects passed in, but I'm not sure how to define it.</p>
  
  <p>How are you supposed to add a footer to a table?</p>