How can I filter by comma separated values?
Hi team. I need to be able to search for
Any help is appreciated. Thanks!
item 1, item 2, item 3 instead of just item 1. I created a new filter for this but it's not working.
Here's what I have tried so far:
declare module '@tanstack/table-core' {
interface FilterFns {
fuzzy: FilterFn<unknown>;
csv: FilterFn<unknown>
}
interface FilterMeta {
itemRank: RankingInfo;
}
}
export const csvFilter: FilterFn<any> = (row, columnId, filterValue) => {
const filters = filterValue.split(',').map(value => value.trim().toLowerCase());
return filters.includes(String(row.getValue(columnId)).toLowerCase());
};
const table = useReactTable({
data,
columns,
filterFns: {
fuzzy: fuzzyFilter,
csv: csvFilter,
},
state: {
columnFilters,
pagination,
rowSelection,
},
onColumnFiltersChange: setColumnFilters,
globalFilterFn: csvFilter,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: showPagination ? getPaginationRowModel() : null,
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
getFacetedMinMaxValues: getFacetedMinMaxValues(),
enableRowSelection: enableRowSelection,
onPaginationChange: setPagination,
onRowSelectionChange: setRowSelection,
});
declare module '@tanstack/table-core' {
interface FilterFns {
fuzzy: FilterFn<unknown>;
csv: FilterFn<unknown>
}
interface FilterMeta {
itemRank: RankingInfo;
}
}
export const csvFilter: FilterFn<any> = (row, columnId, filterValue) => {
const filters = filterValue.split(',').map(value => value.trim().toLowerCase());
return filters.includes(String(row.getValue(columnId)).toLowerCase());
};
const table = useReactTable({
data,
columns,
filterFns: {
fuzzy: fuzzyFilter,
csv: csvFilter,
},
state: {
columnFilters,
pagination,
rowSelection,
},
onColumnFiltersChange: setColumnFilters,
globalFilterFn: csvFilter,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: showPagination ? getPaginationRowModel() : null,
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
getFacetedMinMaxValues: getFacetedMinMaxValues(),
enableRowSelection: enableRowSelection,
onPaginationChange: setPagination,
onRowSelectionChange: setRowSelection,
});
1 Reply
optimistic-gold•2y ago
Yo, did you ever figure this one out? I'm looking to do similar now.
Update: Figured it out.
export const csvFilter: FilterFn<any> = (row, columnId, filterValue) => {
const columnValue = String(row.getValue(columnId)).toLowerCase();
const filters = filterValue
.split(",")
.map((value: string) => value.trim().toLowerCase());
return filters.every((filter: string) => columnValue.includes(filter));
};
export const csvFilter: FilterFn<any> = (row, columnId, filterValue) => {
const columnValue = String(row.getValue(columnId)).toLowerCase();
const filters = filterValue
.split(",")
.map((value: string) => value.trim().toLowerCase());
return filters.every((filter: string) => columnValue.includes(filter));
};