Reputation: 3
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