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?

Pear

Answer 1

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

Code Example

react-table forum

Alum

Answer 2

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)

Formic

Answer 3

In my version "@tanstack/react-table": "8.9.1" for a table where I already got every result and not doing a manual pagination, I'm creating the table like this:

const table = useReactTable({
    data: myData,
    columns: columns, // Previously created with createColumnHelper
    state: {
      sorting,
      columnFilters,
    },

    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

And to know the total number of filtered rows, I'm using table.getFilteredRowModel().rows

Here's my complete usage to display for example 1-10 of 25 results:

  const pageIndex = table.getState().pagination.pageIndex;
  const totalRows = table.getFilteredRowModel().rows.length
  const rowsPerPage = table.getState().pagination.pageSize;

  // Calculate the range of displayed results
  const firstResult = pageIndex * rowsPerPage + 1;
  const lastResult = Math.min(pageIndex * rowsPerPage + rowsPerPage, totalRows);

  // Create the pagination summary string
  const paginationSummary =
    totalRows === 0
      ? 'No results'
      : `${firstResult}-${lastResult} of ${totalRows} results`;

Adult