majer565
majer565

Reputation: 3

Can't update columnFilters with new columnFilter with the same id but "empty" value using Tanstack Table

I have a problem with implementing manual column filters with react tanstack table. When clicking button to remove filter I call removeSelectedFilter, where I update ColumnFiltersState (I'll leave the selectedFilters state here, because it has 0 impact on that issue). Firstly I filter previous ColumnFiltersState to get rid of object with id: filter.id and then I set the state to ...prev + new object with the same id: filter.id but value: []. Unfortunately state is not set to [...prev, {id: filter.id, value: []}] but []. I can see that in useColumnFilter custom hook in filters log and I have no idea why it's the case...

Simple example: I start with ColumnFiltersState as [{id: "status", value: ["pending"]}], and click button to fire removeSelectedFilter. The filtersToSet will be an empty array so the return value should be [{id: "status", value: []}] but in console.log I see filters:: []. If instead of returning {id: filter.id, value: []} I put different id e.g. {id: "Status", value: []} I will see in console.log filters:: [{id: "Status", value: []}]. Does Tanstack automatically remove this state if it sees new empty value for the same id?

function DataTableFilters<TData>({ table, columnFilters }: DataTableFiltersProps<TData>) {
  const [selectedFilters, setSelectedFilters] = useState<ColumnFiltersState>(table.getState().columnFilters);
  
  const removeSelectedFilter = (filter: ColumnFilter) => {
    table.setColumnFilters((prev) => {
      const filtersToSet = prev.filter((f) => f.id !== filter.id);
      return [...filtersToSet, { id: filter.id, value: [] }];
    });
    setSelectedFilters((prev) => prev.filter((f) => f.id !== filter.id));
  };
export const useColumnFilter = (state: ColumnFiltersState) => {
  const [filters, setFilters] = useState<ColumnFiltersState>(state);
  const { updateSearchParams } = useSearchParamsUpdate();

  console.log("filters:: ", filters) //Example log
  
  useEffect(() => {
    const filtersQuery = filterToQuery(filters);
    updateSearchParams(filtersQuery);
  }, [filters]);

  return {
    filters,
    setFilters,
  };
};

I want to make it that way because in that case I will remove filter from URL if value of any filters is empty array. Thanks for your help

Upvotes: 0

Views: 92

Answers (0)

Related Questions