动态更新 react-table 中可用记录数的计数

Question

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

如何显示 table 中可用的记录总数并在筛选时更新计数？

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

       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

这是我今天刚找到的一个例子，希望这对你也有帮助：

Code Example

react-table forum

Answer 2

一个更简单的方法是从 useTable 中解构行并使用 rows.length 得到总数。

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

动态更新 react-table 中可用记录数的计数

Dynamically update the count for number of records available in react-table

pagination

reactjs

react-redux

react-table