Tanstack globalFilter can't be disabled for columns

97 views Asked by At

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,
  })

 
0

There are 0 answers