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

Question

I am a beginner in React JS. I am using React-tables

How do I get to display the total number of records available in the table and update the count as I filter?

I have tried to add the array length -- Total Records: {this.props.data.length}. But my array length is not being re-rendered every time I filter my table data. It remains the same even if I filter.

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

I need to get the count of the total number of records updated as soon as I filter. How can I do it?

Answer 1

A much simpler way is to destructure rows from useTable and use rows.length to get the total.

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

Answer 2

Here is an example i just found myself today, hopefully this helps you too :

Code Example

react-table forum