Column Filtering: when column is an array?
Example Data:
I have successfully done column filtering for regular strings:
I don't know how to handle
Example of ColumnDef for status:
This is my
Markup: This is Svelte, but the logic basic and applies for all frameworks/lib.
export const data: TeamMember[] = [
{
id: "1",
src: "/user.jpg",
alt: "User",
name: "user",
description: "@user",
status: "active",
role: "Product Designer",
email: "user@example.com",
teams: ["Design", "Product", "Marketing", "Engineering"],
},
]; export const data: TeamMember[] = [
{
id: "1",
src: "/user.jpg",
alt: "User",
name: "user",
description: "@user",
status: "active",
role: "Product Designer",
email: "user@example.com",
teams: ["Design", "Product", "Marketing", "Engineering"],
},
];I have successfully done column filtering for regular strings:
statusstatus. I have a Popover with checkbox that you can show or hide columns with that value.I don't know how to handle
teamsteams which is an arrya and get all UniqueValues.Example of ColumnDef for status:
{
accessorKey: "status",
header: "Status",
cell: ({ row }) => renderSnippet(statusCell, { row }),
filterFn: "enum",
meta: {
filterType: "enum",
},
}, {
accessorKey: "status",
header: "Status",
cell: ({ row }) => renderSnippet(statusCell, { row }),
filterFn: "enum",
meta: {
filterType: "enum",
},
},This is my
enumFilterFnenumFilterFn, it does not work for arrays.export const enumFilterFn = (row, columnId, filterValues: string[] | undefined) => {
if (!filterValues?.length) return true;
const cellValue = row.getValue(columnId);
if (Array.isArray(cellValue)) {
return cellValue.some((v) => filterValues.includes(v));
}
return filterValues.includes(cellValue);
};export const enumFilterFn = (row, columnId, filterValues: string[] | undefined) => {
if (!filterValues?.length) return true;
const cellValue = row.getValue(columnId);
if (Array.isArray(cellValue)) {
return cellValue.some((v) => filterValues.includes(v));
}
return filterValues.includes(cellValue);
};Markup: This is Svelte, but the logic basic and applies for all frameworks/lib.
{#each Array.from(column
.getFacetedUniqueValues()
.keys()) as uniqueValue}
<Checkbox
label={uniqueValue}
name={uniqueValue}
for={uniqueValue}
labelProps={{ class: "capitalize" }}
checked={(column.getFilterValue() ?? []).includes(
uniqueValue,
)}
onCheckedChange={(v) => {
const current: string[] = column.getFilterValue() ?? [];
const next = v
? [...current, uniqueValue] // add value if checked
: current.filter((val) => val !== uniqueValue); // remove if unchecked
column.setFilterValue(next.length ? next : undefined);
}}
/>
{/each} {#each Array.from(column
.getFacetedUniqueValues()
.keys()) as uniqueValue}
<Checkbox
label={uniqueValue}
name={uniqueValue}
for={uniqueValue}
labelProps={{ class: "capitalize" }}
checked={(column.getFilterValue() ?? []).includes(
uniqueValue,
)}
onCheckedChange={(v) => {
const current: string[] = column.getFilterValue() ?? [];
const next = v
? [...current, uniqueValue] // add value if checked
: current.filter((val) => val !== uniqueValue); // remove if unchecked
column.setFilterValue(next.length ? next : undefined);
}}
/>
{/each}
