How can apply React Table initialState.filters

user_3719146 0
Viewed 1849

I am trying to filter react table based on the default value which is passed into useTable . So, I have passed an array of json contained id and value into useTable, but it wasn't applied in the table. In fact, InitialState.filters just work for the first time, but after changing filterData, it isn't applied

    const {
    .....
    preGlobalFilteredRows,
    setGlobalFilter,
    setAllFilters,
    state: { pageIndex, pageSize, globalFilter },
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      ...
      autoResetSelectedRows: !skipReset,
      disableMultiSort: true,
      **initialState: {
        pageSize: 10,
        filters: filterData,
      },**
    },
    useFilters,
    useGroupBy,
    useGlobalFilter,
    useSortBy,
    ....,
     
  );

filterData = [{id: "empId", value: "332697"}] But It doesn't apply in the table after rendering. Does it need other changes to apply default filtering?

react-table reactjs filter
1 Answers

I could figure out how could filter the table after changing the filterData. Firstly, noticed that initialState.filters just work while rendering the table for the first time. Secondly, I had to use setAllFilter to apply my custom filter

     useEffect(() => {
    if (filterData?.length > 0) {
      setAllFilters(filterData);
    }
  }, [filterData, setAllFilters]);
user_37191460
Related