defaultFilterValue isnt updated when attached to a redux state

[tamir-jether]

I have a simple scenario, loading some data into a redux state, and presenting that data in a react data grid.

My filter values depend on the data i load, so each time i load the data, i have a simple function that reads the first row of the data, and creates a filter dictionary.

which means my filter is defined in the following way:

defaultFilterValue={create_filters_from_data()}

Where in "create_filters_from_data" in just read the data from the redux global state, and create a simple filter dictionary.

My issue is that whenever im changing the data, the filter values are not being updated. "create_filters_from_data" function is being called, but the defaultFilterValue is never being updated with the new values matching the new data.

[yurigenin]

default prefix means it is an uncontrolled property. Use filterValue instead (and don’t forget to handle change notification). Time to review React docs on controlled vs uncontrolled components?

[tamir-jether]

first of, thanks for the help :)

second, using filterValue - doesnt it mean i will need to filter the datasource myself?

is it impossible to change the filters i use dynamically, without implementing the actual filtering myself? currently, i change the columns values dynamically, i just wanted to do exactly the same, but with the filters

[yurigenin]

That's right, the docs say that using a controlled filterValue shifts the burden of filtering on the application. I never understood this particular requirement, to tell you the truth. I think it only makes sense when the remote pagination is used. I will let Inovua folks answer this.

But there is a documented way to do what you want to do. See the example code for this topic:

https://reactdatagrid.io/docs/api-reference#props-filterValue

Basically, you can use a filter function used by the datagrid:

import filter from '@inovua/reactdatagrid-community/filter'

.....

const onFilterValueChange = useCallback((filterValue) => {
    const data = filter(people, filterValue)

    setFilterValue(filterValue);
    setDataSource(data);
  }, [])

[dsong127]

@tamir-jether were you able to make this work? I followed the example but the table won't update to the correct filter values. Wondering if I'm missing something.