Material-table: Search data in table on press enter

[iqasim-com]

Hi, how can i overwrite the search functionality in table instead of sending an API call on key press i want to send an API call on press Enter.
How can i do this ?

I am using debounceInterval: 2000 but this is not enough can i overwrite this function to call on enter key ?

[twhetzel]

Also looking to start search on Enter keypress and looking for some examples on how to access the search field to do this.

[twhetzel]

I was not able to figure out to use the default search input field to initiate search on Enter so I added a separate TextField and used the option toolbar: false, to hide the toolbar (search input, title, etc.). I used tableRef following this post[1] to query the data with the text in the TextField.

[1] https://github.com/mbrn/material-table/issues/383

[iqasim-com]

I was not able to figure out to use the default search input field to initiate search on Enter so I added a separate TextField and used the option toolbar: false, to hide the toolbar (search input, title, etc.). I used tableRef following this post[1] to query the data with the text in the TextField.

[1] #383

Thanks @twhetzel can you please share the code here.

[jayarjo]

@mbrn another candidate for overriding - Search component.

[iqasim-com]

Found the solution and i think it's a best solution and this is exactly what i want . 👍 .
I have just overwrite the component and add input field in Material table header like below and it's work like a charm.

Just used display none css property to hide default search field. Hacky way but works.

Just change the functionality of search field and pass query.search through another function on press Enter after type no need to use **debounceInterval**

Custom search field with remote data......

[vireshshah]

@iqasim-com Can you please share sample code? Thank you!

[dr-martin]

Found the solution and i think it's a best solution and this is exactly what i want . 👍 .
I have just overwrite the component and add input field in Material table header like below and it's work like a charm.

Just used display none css property to hide default search field. Hacky way but works.

Just change the functionality of search field and pass query.search through another function on press Enter after type no need to use **debounceInterval**

Custom search field with remote data......

Works for me!, Thanks @iqasim-com!!

[MohammedSaberMohammed]

@dr-martin @iqasim-com could u please share ur code ?

[maliganesh2011]

@dr-martin @iqasim-com can you please share your code