React Material Table - data is not filtered correctly

Question

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?

Answer 1

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