Material-table: Search doesnt include columns with custom `render`

[DmitryNefedov]

Describe the bug
Using column with custom render function exclude it from search.

To Reproduce
Steps to reproduce the behavior:

1. Use columns with render for id
2. Search by partial id

Expected behavior
Search results show columns with matching id

Actual behaviour
Search cant use columns with render

Additional context
E.g. columns

  const columns = [
    {title: 'Some Id', render: renderSomeId, field: 'some_id'},
...
];

...

const renderSomeId = (row) => {
    <Link to={someUrl + row.some_id}>
          {row.some_id}
        </Link>

}

As a result, we have links with id text shown. If we have ids like abc123, abc234, test000 we would expect that search for abc would show first 2 rows; however, "no results" shown.

[mbrn]

Hi @DmitryNefedov,

I will do this feature asap

[mbrn]

@DmitryNefedov ,

I change search to run on field value of every column. Not on render result. Because render result is a React.Element and it is not searchable. if you want to make a column that has custom render method searchable, you should specify the field for it

[mbrn]

If you have any trouble or requirement please feel comfort to ask me?

[sarates]

@mbrn how I can make custom rendered field searchable?

[mbrn]

@sarates ,

Add customFilterAndSearch field to your column definition.

customFilterAndSearch: (value, rowData) => {
   return true; // customize here according your search algorithm.
}

[sarates]

@mbrn thanks a lot!

[Prasad-YS]

@mbrn Can you please insert some example code of customFilterAndSearch, I'm not understanding how to use this function

[mbrn]

Hi @Prasad-YS ,

I think that would be enough for you

<MaterialTable
  columns={[
    {
      title: 'Name',
      render: rowData => rowData.name + ' ' + rowData.surname,
      customFilterAndSearch: (term, rowData) => (rowData.name + ' ' + rowData.surname).indexOf(term) != -1
    },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    }
  ]}
  data={[
    {
      name: 'Mehmet',
      surname: 'Baran',
      birthYear: 1987,
      birthCity: 63
    },
    {
      name: 'Zerya Betül',
      surname: 'Baran',
      birthYear: 2017,
      birthCity: 34
    },
  ]}
  title="Custom Render"
/>

[Prasad-YS]

Hi @Prasad-YS ,

I think that would be enough for you

<MaterialTable
  columns={[
    {
      title: 'Name',
      render: rowData => rowData.name + ' ' + rowData.surname,
      customFilterAndSearch: (term, rowData) => (rowData.name + ' ' + rowData.surname).indexOf(term) != -1
    },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    }
  ]}
  data={[
    {
      name: 'Mehmet',
      surname: 'Baran',
      birthYear: 1987,
      birthCity: 63
    },
    {
      name: 'Zerya Betül',
      surname: 'Baran',
      birthYear: 2017,
      birthCity: 34
    },
  ]}
  title="Custom Render"
/>

Thanks a lot

[orestes22]

I know it is close this, but I need Help
the filter box dont appear for me if I dont write field:
so I dont understand how you can made a filter with this customFilterAndSearch if the box dont appear

Best Regards

[mbrn]

You are right @orestes22

It is a bug. I fixed it. I will publish it asap.

[orestes22]

Still not working. If you dont have Field with something between "" , it isnt works.

Also I would like add in the Filter a Selection of checkbox with the option that appear in the colums. Can I implement that in the customFilterAndSearch ?

Best Regards

[mbrn]

you should have field or customFilterAndSearch in column definition. Can you check it again please?

[orestes22]

In your example works , but in my code doesnt, Im not sure why, because I check your code and you only have and "if" for show or not show that. but this is a minor things.

What comment do you have for this:
I would like add in the Filter a Selection of checkbox. Can I implement that in the customFilterAndSearch ?

[orestes22]

I would like that people choose the word and after that I will filter using that

[mbrn]

You can do this by customFilterAndSearch .