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

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

To Reproduce Steps to reproduce the behavior:

Use columns with render for id
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.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (12 by maintainers)

Commits related to this issue

This closes #67, customFilterAndSearch problem resolved — committed to mbrn/material-table by mbrn 5 years ago

Most upvoted comments

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"
/>

+17

mbrn on Feb 22, 2019

@sarates ,

Add customFilterAndSearch field to your column definition.

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

+11

mbrn on Jan 23, 2019

@mbrn thanks a lot!

sarates on Jan 23, 2019