Filter State Shape

1.One normalized filter shape drives everything

ActiveFilter is a small discriminated union — dateRange or multiSelect, each tagged with the columnId it targets. It's the single source of truth for the toolbar controls, the chips row, and the table's columnFilters, so none of those three can drift out of sync with each other.

export type DateRangeFilter = {
  type: "dateRange";
  columnId: string;
  from?: Date;
  to?: Date;
};

export type MultiSelectFilter = {
  type: "multiSelect";
  columnId: string;
  values: string[];
};

export type ActiveFilter = DateRangeFilter | MultiSelectFilter;

2.columnFilters is derived, not owned by the table

The table never manages its own columnFilters state. It's computed from `filters` on every render, so TanStack Table just reads whatever the ActiveFilter[] array currently says — there's nowhere else column filter state could live.

const columnFilters = useMemo<ColumnFiltersState>(
  () =>
    filters.map((f) =>
      f.type === 'multiSelect'
        ? { id: f.columnId, value: f.values }
        : { id: f.columnId, value: { from: f.from, to: f.to } },
    ),
  [filters],
)

3.Chips read the same array they remove from

ActiveFilterChips takes the exact ActiveFilter[] array and renders one chip per entry, formatting a dateRange differently from a multiSelect. Removing a chip just filters that columnId out of `filters` — the derived columnFilters and the toolbar controls update for free.

function formatFilterLabel(f: ActiveFilter) {
  if (f.type === "dateRange") {
    return `${f.columnId}: ${f.from ? format(f.from, "MMM d") : "?"} - ${f.to ? format(f.to, "MMM d") : "?"}`;
  }
  return `${f.columnId}: ${f.values.join(", ")}`;
}