Mui-datatables: Possible to hide the search bar, yet use the search functionality?

[GaganBhat]

I currently already have a search bar at the top of my website and would like to use that search query to filter my table. The inbuilt search algorithm works fine for my use case. I am currently using this options config.

const options = {
      filterType: 'checkbox',
      searchText: this.getDefaultSearchValue(),
      searchOpen: false,
      search: false,
      responsive: 'vertical'
    }

However, while this removes the search icon, it initially still displays the inbuilt search field leaving me with two search fields.

It looks like the searchText option is forcing the search text field to be open initially by default.

Is it possible to hide this search bar and icon at all times yet still using the inbuilt search functionality that the library provides?

[patorjk]

Yes, you can solve this by setting the customSearchRender method to return null. Example:

https://codesandbox.io/s/muidatatables-custom-toolbar-w3pf4?file=/index.js

customSearchRender allows you to control the rendering of the searchText box.

[GaganBhat]

Thank you @patorjk, that works perfectly. Additionally, is it possible to pass in text real-time from my own text field (as shown above in the screenshot) to have real-time search working as the letters are typed? Modifying the searchText option does not refresh the table itself, I would have to refresh the entire page for it to reflect.

[patorjk]

It looks like searchText is one of three parameters that set initial values instead of controlling the value (the others being "page" and "searchOpen"). This is a little unintuitive and I wish I would have noticed it before the 3.0 release. I'm not sure I want to change it's behavior now, as that's how it's documented and that could break people who are using it to initialize the search text.

One idea is that I could setup searchText to also take in an object too, and if an object was passed in, it's value property would always override the table's searchText. Example:

searchText={{value: "search string"}}

That way passing a string would keep the current functionality, but there would also be a way to control the searchText itself. Another idea could be to add a searchTextControlled option that defaulted to false, if it was set to true, then whatever was passed in for searchText would override the current searchText:

searchTextControlled={true}

Thoughts?

[GaganBhat]

Sounds great! Both ideas seem intuitive and easy to use. I personally do not have a preference for either method, but I could imagine some people not realizing or complaining about the additional searchTextControlled option.

Regardless, thank you for your work on this project, it's a great resource. I'm not sure if I have the expertise to contribute towards adding the features you described above, however, I will try to work on it and submit a PR if I'm successful.

[patorjk]

So good news, I was mistaken - when I did the 3.0 update, I did make searchText controllable, I just didn't update the README for it. The example I posted previously had a bug in it (I was passing the string "business" rather than the variable "searchText" to the searchText option):

https://codesandbox.io/s/muidatatables-custom-toolbar-w3pf4?file=/index.js

I'll update the README for the next release.

[GaganBhat]

Sweet, that's perfect. Exactly what I was looking for. Thanks for following up, I'll go ahead and close this issue now.