3

在最新版本的 react-bootstrap-table (4.1.5) 中，有一个名为TableFooter的 React 组件，我认为它允许您在表格底部添加页脚。

源代码中列出了如何使用它的示例（尽管不在官方站点文档中），但是它似乎不起作用。它的假定用法如下所示：

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中的这一行：

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

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

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

4

0 回答 0