I want to implement search functionality outside the table

[rmshmaudlin]

I implemented this way. But it takes 4 to 5 seconds for the table to update when I type in the textfield.
Am I missing something or What i'm doing is wrong?

const [globalFilter, setGlobalFilter] = useState('');
<TextField value={globalFilter} onChange={handleSearch} />
const handleChange = event => {
    setGlobalFilter(event.target.value);
  };
<MaterialReactTable
  columns={columns}
  data={data}
  state={{globalFilter}}
/>

Any help appreciated

[tttp]

without more information on your table, it's a bit hard to help (eg. not sure if the delay is something between you type on the input and the filtering is happening, or filtering itself, or display refresh after filtering or a mix of the 3)

how fast is the filtering if you use the "normal" global filter?

uneducated guesses and suggestions:

1. check the documentation on how filter works, you might want to exclude some columns from the global search (this is heavily dependent on what your table contains)

https://tanstack.com/table/v8/docs/api/features/filters

2. you should debounce your handleChange function so the filtering isn't triggered at every key but once the user stops typing (in my experience, 200ms to 500 ms is a good compromise, depending how fast your average user types)

for instance use lodash if you want to use an external library

https://lodash.com/docs/4.17.15#debounce