How to get ReactJS Material-table search results count

Question

I am using Material-table (https://material-table.com/#/) for my project. I've been trying to figure out if there is a way to retrieve the search-result count when either filter or search actions are used. I've looked through all the examples and properties but dont see any way to retrieve this information.

For example, if I have a total of 100 rows of data, and filter on "stackOverflow"...if the result list returns 50 rows of data that are now rendered, how do I get the "50" ?

How do I access the filtered-table content from outside of the <MaterialTable> component ? — jlrivera81
i'm using a functional component so there is no "this" available. The material table data is populated with <MaterialTable data={tabData} /> where tabData represents a state variable. This variable does not get updated on a filter/search. Where are you getting dataSource.filteredData.length from ? — jlrivera81

Idan Idan · Accepted Answer · 2020-02-01T06:57:22

You can use the tableRef and onSearchChanged prop

This seems to work for well:

const tableRef = React.useRef();
...
<MaterialTable
      tableRef={tableRef}
      onSearchChange={() => {
        console.log(tableRef.current.DataManager.filteredData.length);
      }}.....

You can also find the filtered data in the few other paths:

tableRef.current.DataManager.data
tableRef.current.state.data

How to get ReactJS Material-table search results count

1 Answers