Material-table: Search bar callback?

[m5tt]

We are handling our data fetching manually and passing it to MaterialTable without a promise.

We need to set a custom callback for onSearchChange in the search bar to update our params.

The prop - onSearchChange exists in the table ref, if you console.log it. However apparently it is not exposed and we are not allowed to set it.

What we need to do is just something like:

const handleSearchChange = (search) => {
  fetchData(search);
}

<MaterialTable
  ...
  title='Members'
  data={props.members}
  onSearchChange={handleSearchChange}
/>

This would fit naturally right in with onChangePage, onChangeRowsPerPage, onOrderChange and so forth.

Is there anyway to hook into the search bar? It seems according to the docs, you cannot even override the search bar component, which would be another option, albeit a overly complicated one for such a simple feature.

[emrekara37]

Hi @m5tt ,
Please use version 1.49.0
example:

 <MaterialTable
     ...
     onSearchChange={(e) => console.log("search changed: " + e)}
     ...
  />

[jramalho]

I didn't find success using the onSearchChange function too. Using 1.49.0 version

[m5tt]

Same. Iv upgraded to 1.49.0, copied this exactly & nothing happens.

[m5tt]

It appears there is a bug where the onSearch callback conflicts with the data prop when its set with a Promise. Removing the data prop allows the onSearch to function.

[emrekara37]

Hi all,
i will take care of this issue
Thanks

[davidpshea]

I also would able to access the search box to provide a search history in some way when using external data

[adsee42]

@m5tt @emrekara37
Hi, any progress on this?
onSearchChange do not work, and I want the search to start only when user stops typing.

[ImOnMars]

Yes, this is still not fixed @emrekara37

[Justin2997]

@emrekara37 If you have noting start I am open to do the fix, i have the time. Also, is there a way to modify https://material-table.com/#/docs/features/search on github ? That will be good to add a exemple for a remote Data there.

For reference is how my search work for new (every letter in search call remote data for now 👎 )

      data={query =>
          new Promise((resolve, reject) => { 
            setSearch(query.search); 
            setPageNumber(query.page + 1);
            setIpp(query.pageSize);
            refetchParticipantsList(); // I am using GraphQL so I just need to refresh the hook
            resolve({
              data: participantsList,
              page: data.participantsList.page - 1,
              totalCount: data.participantsList.totalCount
            })
          })
        }
        options={{
          exportButton: true,
          pageSize: ipp,
          pageSizeOptions: [10, 25, 50],
          searchText: search, // To add the seach text not reset every time
        }}

[azakharo]

onSearchChange callback is not called because of the following:

So, onSearchChange callback doesn't work for case of remote data.