Material-table: Search Hook

[lnorton89]

I'm attempting to have buttons insert text into the search field for quick 'tag' searching. Is there a hook I can use to programatically trigger the search and update the fields text?

Thank you.

[lnorton89]

If anyone else comes across this this is how I solved this:

  const eventFilter = filter => () => {
    tableRef.current.onSearchChange(filter);
  }

 <MaterialTable
        tableRef={tableRef}
        style={styles.table}
        columns={columns}
        data={data}
        options={tableOptions}
        icons={tableIcons}
        onChangePage={handleScroll}
        onChangeRowsPerPage={handleScroll}
        title="Events"
      />;

[thedmeyer]

Doesn't work anymore in 1.60.0.
@mbrn How do we do this now?

[thedmeyer]

Solution:

const eventFilter = filter => () => {
    tableRef.current.dataManager.changeSearchText(filter);
    tableRef.current.setState({ searchText: filter }, tableRef.current.onSearchChangeDebounce());
}

 <MaterialTable
        tableRef={tableRef}
        style={styles.table}
        columns={columns}
        data={data}
        options={tableOptions}
        icons={tableIcons}
        onChangePage={handleScroll}
        onChangeRowsPerPage={handleScroll}
        title="Events"
      />;

EDIT:

This is a better way to handle the state update:

tableRef.current.setState({
      ...tableRef.current.dataManager.getRenderState(),
      searchText: searchTextInput,
});

[nico75005]

@thedmeyer thanks for that. Both solutions actually work locally, but as soon as I deploy the app, they don't work anymore. The first one simply don't work, the second one, yours, filter the results but the search bar is empty.

Did it ever happen to you? Any idea how to fix it?

[thedmeyer]

@nico75005 For my implementation, I am using a custom external component that acts as a search bar. The built-in toolbar in material table did not fit my use case.

[ali-hasani]

@nico75005 For my implementation, I am using a custom external component that acts as a search bar. The built-in toolbar in material table did not fit my use case.

Hi @nico75005
I want to do this way too.
But I don't know how to implement it in react 16.13.1 and material-table 1.65.0
For example how to define tabelRef (what type and ..)
Thanks to help ..

[thedmeyer]

@ali-hasani @nico75005 Appending my previous comment with an update that might help.

const eventFilter = filter => () => {
    tableRef.current.dataManager.changeSearchText(filter);
    tableRef.current.setState({
      ...tableRef.current.dataManager.getRenderState(),
      searchText: filter,
    });
}

 <MaterialTable
        tableRef={tableRef}
        style={styles.table}
        columns={columns}
        data={data}
        options={tableOptions}
        icons={tableIcons}
        onChangePage={handleScroll}
        onChangeRowsPerPage={handleScroll}
        title="Events"
      />;

[nico75005]

@thedmeyer Thanks but unfortunately it is still the same issue.

[Monfernape]

Yes, it doesn't work that way. I resets the searchbar but when query is sent to server, it takes the previous search term with it.

[PierreMage]

An example keeping MTableToolbar.

const eventFilter = filter => () => {
    toolbarRef.current.onSearchChange(filter);
}

<MaterialTable
    components={{
        Toolbar: props => <MTableToolbar {...props} ref={toolbarRef}/>
    }}
    ...
/>;