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>
    );
  }

运行上面的示例时，在尝试访问传入的页脚对象上名为“filter”的属性时会出错。这发生在TableFooter.js中的this line上：

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

我认为上面引用的过滤器函数应该选择传入的一个页脚数据对象，但我不确定如何定义它。

你应该如何在表格中添加页脚？

Answer 1

我没有得到任何这样的错误。请检查DEMO，看看我是否按预期进行。

WORKING DEMO

如何使用react-bootstrap-table添加表格页脚？

1 个答案: