[v8]: How to reset the column filter to its initial state upon deselection?

[devevignesh]

The columnFilters does not return to its initial state when selecting and deselecting options in the TableFacetedFilter. Instead, it returns [ { id: "source", value: [], } ], which is preventing the table data from populating. I attempted to reset the column filter to its initial state using resetcolumnfilters, but it did not work.

table.js

const [columnFilters, setColumnFilters] = useState([]);

const table = useReactTable({
  columns,
  data,
  state: {
    globalFilter,
    columnFilters,
  },
  enableGlobalFilter: true,
  onGlobalFilterChange: setGlobalFilter,
  globalFilterFn: globalFilterFn,
  getFilteredRowModel: getFilteredRowModel(),
  onColumnFiltersChange: setColumnFilters,
});

// render filters
<div className="flex gap-6">
  {getHeaderGroups().map((headerGroup) =>
    headerGroup.headers.map((header) => {
      const accessorKey = header.column.columnDef.accessorKey;
      const filterComponent = header.column.getCanFilter()
        ? header.column.columnDef?.meta?.[
            `filterBy${accessorKey.charAt(0).toUpperCase()}${accessorKey.slice(
              1,
            )}Component`
          ](header.column.setFilterValue, tableInstance)
        : null;
      return filterComponent;
    }),
  )}
</div>;

column.js

const columns = () => [
  columnHelper.accessor("source", {
    header: () => <span>Source</span>,
    enableSorting: true,
    enableColumnFilter: true,
    filterFn: (rows, id, value) => {
      return value.includes(rows.getValue(id));
    },
    meta: {
      filterBySourceComponent: (setFilterValue, table) => {
        return (
          <TableFacetedFilter
            options={source}
            column={table?.getColumn("source")}
            onFilter={setFilterValue}
            placeholder="Filter by source"
          />
        );
      },
    },
  }),
];

TableFacetedFilter.js

export default function TableFacetedFilter({
  column,
  disabled,
  options,
  onFilter,
  placeholder = "",
}) {
  const selectedValues = column?.getFilterValue();
  return (
    <Listbox value={selectedValues} onChange={onFilter} multiple>
      // ...
    </Listbox>
  );
}

[huypl53]

You can invoke column.setFilterValue(undefined)