Question

我是React JS的初学者。我正在使用React-tables

如何获取表中可用记录的总数并在过滤时更新计数？

我尝试添加数组长度-总记录：{this.props.data.length}。但是，我每次过滤表数据时都不会重新渲染数组长度。即使我进行过滤，它也保持不变。

       const paginationOptions = {
           showPagination: false,
             };

           const filterOptions = {
           filterable: true,
        defaultFilterMethod: (filter, row, column) => {
           const id = filter.pivotId || filter.id;
           return row[id] !== undefined
  ? String(row[id])
      .toLowerCase()
      .includes(filter.value.toLowerCase())
  : true;
         },
           };

      type DefaultReactTableProps = {
       data: Array<{}>,
          history?: {}, // required to make a row or cell linkable 
               by pushing to history onClick
            };

       class DefaultReactTable extends React.Component {
             props: DefaultReactTableProps;
               render() {
              console.log('Render',this.props);
                const noFilter = this.props.noFilter ? null : 
               filterOptions;
             return (
             <ReactTable
             {...paginationOptions}
              {...noFilter}
              defaultPageSize={this.props.data.length}
            minRows={0}
            {...this.props}
               />
             );
             }
             }

我需要在过滤后立即更新记录总数。我该怎么办？

Answer 1

更简单的方法是从 useTable 解构行并使用 rows.length 来获得总数。

const { rows } = useTable({ columns, data })
console.log(rows.length)

Answer 2

这是我今天发现自己的一个示例，希望这对您也有帮助：

Code Example

react-table forum

动态更新react-table

2 个答案: