I have been trying to have my Tanstack table to filter across some columns but it is always filtering across all columns. I tried many different methods for disabling the columns.
Below are the columns data used and the construction of the react table.
const columns: any = useMemo<ColumnDef<ImageDashType, any>[]>(
() => [
{
accessorKey: "materialId",
header: () => <span>Material</span>,
footer: (props) => props.column.id,
filterFn: "fuzzy",
sortingFn: fuzzySort,
disableFilters: false,
disableSortBy: false,
disableGlobalFilter: false,
},
{
accessorKey: "MATERIAL_DESC",
header: () => <span>Material desc</span>,
footer: (props) => props.column.id,
disableFilters: true,
disableSortBy: true,
disableGlobalFilter: true,
filterable: false, //This makes the column not filterable
},
{
accessorKey: "BRAND_DESC",
header: () => <span>Brand desc</span>,
footer: (props) => props.column.id,
disableFilters: true,
disableSortBy: true,
disableGlobalFilter: true,
filterable: false, //This makes the column not filterable
}]
const table = useReactTable({
data,
columns,
filterFns: {
fuzzy: fuzzyFilter,
},
state: {
columnFilters,
globalFilter,
},
onColumnFiltersChange: setColumnFilters,
onGlobalFilterChange: setGlobalFilter,
globalFilterFn: fuzzyFilter,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
getFacetedMinMaxValues: getFacetedMinMaxValues(),
debugTable: true,
debugHeaders: true,
debugColumns: false,
})