InitialState.filters example needed please

[gplatt]

I'd like to pass an initial value into GlobalFilter and allow the user to be able to modify the value..

Right now I can pass an initial filter value (initialSearch) into Table and the filtering works perfectly. But the the filter value is not displayed in the global filter input field so the value can't be modified.

= useTable(
        {
          initialState: { 
            pageSize: defaultPageSize, 
            sortBy: defaultSorted,
            filters: initialSearch ? [{id:'name',value:initialSearch}] : []
          },

I can see that I am actually filtering on the column "name", but how do I set a generic filter?

Any help appreciated.

[gplatt]

I have it working but seems a bit ugly to me.

I removed the InitialState.filters option and passed an initialValue to the GlobalFilter. Small bug is that if the global filter input is cleared then the initial value is used. Will fix that though.

// Define a default UI for filtering
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
initialSearch
})
{
const count = preGlobalFilteredRows.length
const [value, setValue] = React.useState(globalFilter)
const onChange = useAsyncDebounce(value => {
setGlobalFilter(value || undefined)
}, 200)
if (!value && initialSearch) {
setValue(initialSearch)
onChange(initialSearch)
}
return (
<Input
value={value || initialSearch}
onChange={e => {
setValue(e.target.value);
onChange(e.target.value);
}}
placeholder={Search ${count} records...}
style={{
width: '100%'
}}
/>
)
}