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

Posted 2023-03-10

【中文标题】动态更新 react-table 中可用记录数的计数

【英文标题】：Dynamically update the count for number of records available in react-table

【发布时间】：2019-09-09 06:27:15

【问题描述】：

我是 React JS 的初学者。我正在使用反应表

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

我尝试添加数组长度——总记录：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
               />
             );
             
             

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

【参考方案1】：

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

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

【参考方案2】：

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

Code Example

react-table forum