Material-table: Update search text dynamically

[atfornes]

We would like to be able to update the search text from an external action.

Concretely, our table shows a list of results, each of them has a list of "tags", and we want to allow users to click tags to filter the results. Thus, we want to add the tags to the search field and update the search results.

How should we approach this issue in material-table?

Thanks a lot

[aleksandar78]

We have a similar problem as @atfornes. We need to set, from context, the value in the search field when the router returns from a details page to master.
Users are constrained to insert search keyword each time they access the page, which is very frustrating for them.
Any suggestion is welcome

[ElenaPT]

We have been working on a similar problem, and we have found a workaround to solve it.

We have our table, and outside of it there is a component with a text field. We wanted the text in that text field to be searched in the table (this is, the table's search text to be updated from that external component).

We have managed to do this by taking the value from the external text field and assigning it to the field searchText within the options property.

<MaterialTable
          columns={[
                    ...
          ]} 
          options={{
                    searchText: this.props.value
          }}
/>

Where value is passed as a prop from the parent component.

It can be seen in context in this commit in our project.

I hope this helps

[atfornes]

Thanks a lot @ElenaPT !!!

[aleksandar78]

Nice workaround @ElenaPT. This solves our problem. Thanks