CODEWITHSUNDEEP
javascriptreactjsmaterial-uimaterial-designmaterial-table
Borislav Stefanov
Borislav Stefanov

Reputation: 731

React Material Table - data is not filtered correctly

I am using Material Table in my React project. All is rendered just fine but filtering and searching is not OK. I have created sample code here:

https://codesandbox.io/s/confident-franklin-hkxet?file=/src/Table.jsx

Problem is that whatever I type in Search Bar or in Custom Column Filter it is giving 0 results. Even a single letter is enough to make returned results 0.

What could cause the problem? Is it from the way I render data in every column? If yes, how can I fix that?

Upvotes: 2

Views: 2914

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81370

It's because you're using nested properties in your row data, just like how you customize your displayed text in the render property, you need to override customFilterAndSearch too if you want the filter to function properly:

{
  title: "League",
  field: "League",
  render: (rowData) => rowData.league.name,
  customFilterAndSearch: (term, rowData) =>
    rowData.league.name.toLowerCase().indexOf(term.toLowerCase()) > -1
},

Reference: Custom Filtering Algorithm Example

Live Demo

Edit 67092391/react-material-table-data-is-not-filtered-correctly

Upvotes: 3

Related Questions