How to filter current data without making remote call? - Material Table(mbrn/material-table)

Question

I am using mbrn/material-table with filtering on a column and remote data feature. When I filter by a term, the table makes an API call to the server with filter criteria in query object. My expectation here is that on typing filter term I want the table to search in the current dataset on the current page. I do not want the table to make an extra call for filtering. It should show only rows that match the term.

Any suggestions on how can I achieve this?

Check the link https://stackblitz.com/edit/aftkrc Open editor console to see API is being called on every filter text.

Answer 1

In your code every time the page resizes it will call for the API. So you are not keeping the data in your state, So when search is on it will again call for the API to fetch the data. So what you can do is when the page is started call for the data (Use React.useEffect) and save it in the state and use the state as the data, then you can search the item you want without a request call.

Answer 2

The problem is that you had a function fetching data each time you type. The solution is calling data first and save the list result to the state. And in the render, you just bind your data. Try this example, I think it's what you want. Or you can find this from the material-table document