@prairielearn/ui 1.3.0 → 1.5.0

package/dist/components/useAutoSizeColumns.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "@prairielearn/preact-cjs/jsx-runtime";
+import { render } from 'preact/compat';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';
+function HiddenMeasurementHeader({ table, columnsToMeasure, filters = {}, }) {
+    const headerGroups = table.getHeaderGroups();
+    const leafHeaderGroup = headerGroups[headerGroups.length - 1];
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            top: '-9999px',
+        }, children: _jsx("table", { class: "table table-hover mb-0", style: { display: 'grid', tableLayout: 'fixed' }, children: _jsx("thead", { style: { display: 'grid' }, children: _jsx("tr", { style: { display: 'flex' }, children: columnsToMeasure.map((col) => {
+                        const header = leafHeaderGroup.headers.find((h) => h.column.id === col.id);
+                        if (!header)
+                            return null;
+                        return (_jsx(TanstackTableHeaderCell, { header: header, filters: filters, table: table, isPinned: false, measurementMode: true }, header.id));
+                    }) }) }) }) }));
+}
+/**
+ * Custom hook that automatically measures and sets column widths based on header content.
+ * Only measures columns that have `meta: { autoSize: true }` and don't have explicit sizes set.
+ * User resizes are preserved.
+ *
+ * @param table - The TanStack Table instance
+ * @param tableRef - Ref to the table container element
+ * @param filters - Optional filters map for rendering filter components in measurement
+ * @returns A boolean indicating whether the initial measurement has completed
+ */
+export function useAutoSizeColumns(table, tableRef, filters) {
+    const [hasMeasured, setHasMeasured] = useState(false);
+    const measurementContainerRef = useRef(null);
+    // Perform measurement
+    useEffect(() => {
+        if (hasMeasured || !tableRef.current) {
+            return;
+        }
+        const allColumns = table.getAllLeafColumns();
+        const columnsToMeasure = allColumns.filter((col) => col.columnDef.meta?.autoSize);
+        if (columnsToMeasure.length === 0) {
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            setHasMeasured(true);
+            return;
+        }
+        // Wait for next frame to ensure DOM is ready
+        const rafId = requestAnimationFrame(() => {
+            if (!tableRef.current) {
+                return;
+            }
+            // Create or reuse measurement container
+            let container = measurementContainerRef.current;
+            if (!container) {
+                container = document.createElement('div');
+                document.body.append(container);
+                measurementContainerRef.current = container;
+            }
+            // Render headers into hidden container
+            render(_jsx(HiddenMeasurementHeader, { table: table, columnsToMeasure: columnsToMeasure, filters: filters ?? {} }), container);
+            // Force layout calculation
+            void container.offsetWidth;
+            // Measure each header and build sizing state
+            const newSizing = {};
+            for (const col of columnsToMeasure) {
+                const headerElement = container.querySelector(`th[data-column-id="${col.id}"]`);
+                if (headerElement) {
+                    const measuredWidth = headerElement.scrollWidth;
+                    const resizeHandlePadding = col.getCanResize() ? 4 : 0;
+                    const minSize = col.columnDef.minSize ?? 0;
+                    const maxSize = col.columnDef.maxSize ?? Infinity;
+                    const finalWidth = Math.max(minSize, Math.min(maxSize, measuredWidth + resizeHandlePadding));
+                    newSizing[col.id] = finalWidth;
+                }
+            }
+            // Clear container content by unmounting Preact components
+            render(null, container);
+            // Apply measurements
+            if (Object.keys(newSizing).length > 0) {
+                table.setColumnSizing((prev) => ({ ...prev, ...newSizing }));
+            }
+            setHasMeasured(true);
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+        };
+    }, [table, tableRef, filters, hasMeasured]);
+    // Clean up measurement container on unmount
+    useEffect(() => {
+        return () => {
+            const container = measurementContainerRef.current;
+            if (container) {
+                render(null, container);
+                container.remove();
+                measurementContainerRef.current = null;
+            }
+        };
+    }, []);
+    return hasMeasured;
+}
+//# sourceMappingURL=useAutoSizeColumns.js.map

package/dist/components/useAutoSizeColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoSizeColumns.js","sourceRoot":"","sources":["../../src/components/useAutoSizeColumns.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnSizingState, Header, Table } from '@tanstack/react-table';\nimport type { RefObject } from 'preact';\nimport { render } from 'preact/compat';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport type { JSX } from 'preact/jsx-runtime';\n\nimport { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';\n\nfunction HiddenMeasurementHeader<TData>({\n  table,\n  columnsToMeasure,\n  filters = {},\n}: {\n  table: Table<TData>;\n  columnsToMeasure: { id: string }[];\n  filters?: Record<string, (props: { header: Header<TData, unknown> }) => JSX.Element>;\n}) {\n  const headerGroups = table.getHeaderGroups();\n  const leafHeaderGroup = headerGroups[headerGroups.length - 1];\n\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        visibility: 'hidden',\n        pointerEvents: 'none',\n        top: '-9999px',\n      }}\n    >\n      <table class=\"table table-hover mb-0\" style={{ display: 'grid', tableLayout: 'fixed' }}>\n        <thead style={{ display: 'grid' }}>\n          <tr style={{ display: 'flex' }}>\n            {columnsToMeasure.map((col) => {\n              const header = leafHeaderGroup.headers.find((h) => h.column.id === col.id);\n              if (!header) return null;\n\n              return (\n                <TanstackTableHeaderCell\n                  key={header.id}\n                  header={header}\n                  filters={filters}\n                  table={table}\n                  isPinned={false}\n                  measurementMode={true}\n                />\n              );\n            })}\n          </tr>\n        </thead>\n      </table>\n    </div>\n  );\n}\n\n/**\n * Custom hook that automatically measures and sets column widths based on header content.\n * Only measures columns that have `meta: { autoSize: true }` and don't have explicit sizes set.\n * User resizes are preserved.\n *\n * @param table - The TanStack Table instance\n * @param tableRef - Ref to the table container element\n * @param filters - Optional filters map for rendering filter components in measurement\n * @returns A boolean indicating whether the initial measurement has completed\n */\nexport function useAutoSizeColumns<TData>(\n  table: Table<TData>,\n  tableRef: RefObject<HTMLDivElement>,\n  filters?: Record<string, (props: { header: Header<TData, unknown> }) => JSX.Element>,\n): boolean {\n  const [hasMeasured, setHasMeasured] = useState(false);\n  const measurementContainerRef = useRef<HTMLDivElement | null>(null);\n\n  // Perform measurement\n  useEffect(() => {\n    if (hasMeasured || !tableRef.current) {\n      return;\n    }\n\n    const allColumns = table.getAllLeafColumns();\n\n    const columnsToMeasure = allColumns.filter((col) => col.columnDef.meta?.autoSize);\n\n    if (columnsToMeasure.length === 0) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setHasMeasured(true);\n      return;\n    }\n\n    // Wait for next frame to ensure DOM is ready\n    const rafId = requestAnimationFrame(() => {\n      if (!tableRef.current) {\n        return;\n      }\n\n      // Create or reuse measurement container\n      let container = measurementContainerRef.current;\n      if (!container) {\n        container = document.createElement('div');\n        document.body.append(container);\n        measurementContainerRef.current = container;\n      }\n\n      // Render headers into hidden container\n      render(\n        <HiddenMeasurementHeader\n          table={table}\n          columnsToMeasure={columnsToMeasure}\n          filters={filters ?? {}}\n        />,\n        container,\n      );\n\n      // Force layout calculation\n      void container.offsetWidth;\n\n      // Measure each header and build sizing state\n      const newSizing: ColumnSizingState = {};\n\n      for (const col of columnsToMeasure) {\n        const headerElement = container.querySelector(\n          `th[data-column-id=\"${col.id}\"]`,\n        ) as HTMLElement;\n\n        if (headerElement) {\n          const measuredWidth = headerElement.scrollWidth;\n          const resizeHandlePadding = col.getCanResize() ? 4 : 0;\n          const minSize = col.columnDef.minSize ?? 0;\n          const maxSize = col.columnDef.maxSize ?? Infinity;\n\n          const finalWidth = Math.max(\n            minSize,\n            Math.min(maxSize, measuredWidth + resizeHandlePadding),\n          );\n\n          newSizing[col.id] = finalWidth;\n        }\n      }\n\n      // Clear container content by unmounting Preact components\n      render(null, container);\n\n      // Apply measurements\n      if (Object.keys(newSizing).length > 0) {\n        table.setColumnSizing((prev) => ({ ...prev, ...newSizing }));\n      }\n\n      setHasMeasured(true);\n    });\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [table, tableRef, filters, hasMeasured]);\n\n  // Clean up measurement container on unmount\n  useEffect(() => {\n    return () => {\n      const container = measurementContainerRef.current;\n      if (container) {\n        render(null, container);\n        container.remove();\n        measurementContainerRef.current = null;\n      }\n    };\n  }, []);\n\n  return hasMeasured;\n}\n"]}

package/dist/index.d.ts

@@ -1,8 +1,12 @@
+import './react-table.js';
 export { TanstackTable, TanstackTableCard, TanstackTableEmptyState, } from './components/TanstackTable.js';
 export { ColumnManager } from './components/ColumnManager.js';
 export { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';
 export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';
 export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
-export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, } from './components/NumericInputColumnFilter.js';
+export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, type NumericColumnFilterValue, } from './components/NumericInputColumnFilter.js';
 export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
+export { useAutoSizeColumns } from './components/useAutoSizeColumns.js';
+export { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';
+export { PresetFilterDropdown } from './components/PresetFilterDropdown.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,EACrB,KAAK,wBAAwB,GAC9B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/index.js

@@ -1,3 +1,5 @@
+// Augment @tanstack/react-table types
+import './react-table.js';
 export { TanstackTable, TanstackTableCard, TanstackTableEmptyState, } from './components/TanstackTable.js';
 export { ColumnManager } from './components/ColumnManager.js';
 export { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';
@@ -5,4 +7,7 @@ export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js
 export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
 export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, } from './components/NumericInputColumnFilter.js';
 export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
+export { useAutoSizeColumns } from './components/useAutoSizeColumns.js';
+export { OverlayTrigger } from './components/OverlayTrigger.js';
+export { PresetFilterDropdown } from './components/PresetFilterDropdown.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC","sourcesContent":["export {\n  TanstackTable,\n  TanstackTableCard,\n  TanstackTableEmptyState,\n} from './components/TanstackTable.js';\nexport { ColumnManager } from './components/ColumnManager.js';\nexport { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';\nexport { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';\nexport { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';\nexport {\n  NumericInputColumnFilter,\n  parseNumericFilter,\n  numericColumnFilterFn,\n} from './components/NumericInputColumnFilter.js';\nexport { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GAEtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAA4B,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["// Augment @tanstack/react-table types\nimport './react-table.js';\n\nexport {\n  TanstackTable,\n  TanstackTableCard,\n  TanstackTableEmptyState,\n} from './components/TanstackTable.js';\nexport { ColumnManager } from './components/ColumnManager.js';\nexport { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';\nexport { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';\nexport { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';\nexport {\n  NumericInputColumnFilter,\n  parseNumericFilter,\n  numericColumnFilterFn,\n  type NumericColumnFilterValue,\n} from './components/NumericInputColumnFilter.js';\nexport { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';\nexport { useAutoSizeColumns } from './components/useAutoSizeColumns.js';\nexport { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';\nexport { PresetFilterDropdown } from './components/PresetFilterDropdown.js';\n"]}

package/dist/react-table.d.ts

@@ -0,0 +1,13 @@
+import type { RowData } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** If true, the column will wrap text instead of being truncated. */
+        wrapText?: boolean;
+        /** If set, this will be used as the label for the column in the column manager. */
+        label?: string;
+        /** If true, the column will be automatically sized based on the header content. */
+        autoSize?: boolean;
+    }
+}
+export {};
+//# sourceMappingURL=react-table.d.ts.map

package/dist/react-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-table.d.ts","sourceRoot":"","sources":["../src/react-table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,qEAAqE;QACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,mFAAmF;QACnF,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,mFAAmF;QACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;CACF;AAGD,OAAO,EAAE,CAAC"}

package/dist/react-table.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line unicorn/require-module-specifiers
+export {};
+//# sourceMappingURL=react-table.js.map

package/dist/react-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-table.js","sourceRoot":"","sources":["../src/react-table.ts"],"names":[],"mappings":"AAeA,6DAA6D;AAC7D,OAAO,EAAE,CAAC","sourcesContent":["import type { RowData } from '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  // https://tanstack.com/table/latest/docs/api/core/column-def#meta\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** If true, the column will wrap text instead of being truncated. */\n    wrapText?: boolean;\n    /** If set, this will be used as the label for the column in the column manager. */\n    label?: string;\n    /** If true, the column will be automatically sized based on the header content. */\n    autoSize?: boolean;\n  }\n}\n\n// eslint-disable-next-line unicorn/require-module-specifiers\nexport {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     "test": "vitest run --coverage"
   },
   "dependencies": {
-    "@prairielearn/browser-utils": "^2.5.1",
+    "@prairielearn/browser-utils": "^2.6.0",
     "@prairielearn/preact-cjs": "^1.1.6",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",

package/src/components/CategoricalColumnFilter.tsx

@@ -1,3 +1,4 @@
+import type { Column } from '@tanstack/react-table';
 import clsx from 'clsx';
 import { type JSX, useMemo, useState } from 'preact/compat';
 import Dropdown from 'react-bootstrap/Dropdown';
@@ -14,49 +15,48 @@ function computeSelected<T extends readonly any[]>(
 }
 
 function defaultRenderValueLabel<T>({ value }: { value: T }) {
-  return <span>{String(value)}</span>;
+  return <span class="text-nowrap">{String(value)}</span>;
 }
 /**
- * A component that allows the user to filter a categorical column. State is managed by the parent component.
+ * A component that allows the user to filter a categorical column.
  * The filter mode always defaults to "include".
  *
  * @param params
- * @param params.columnId - The ID of the column
- * @param params.columnLabel - The label of the column, e.g. "Status"
+ * @param params.column - The TanStack Table column object
  * @param params.allColumnValues - The values to filter by
  * @param params.renderValueLabel - A function that renders the label for a value
- * @param params.columnValuesFilter - The current state of the column filter
- * @param params.setColumnValuesFilter - A function that sets the state of the column filter
  */
-export function CategoricalColumnFilter<T extends readonly any[]>({
-  columnId,
-  columnLabel,
+export function CategoricalColumnFilter<TData, TValue>({
+  column,
   allColumnValues,
   renderValueLabel = defaultRenderValueLabel,
-  columnValuesFilter,
-  setColumnValuesFilter,
 }: {
-  columnId: string;
-  columnLabel: string;
-  allColumnValues: T;
-  renderValueLabel?: (props: { value: T[number]; isSelected: boolean }) => JSX.Element;
-  columnValuesFilter: T[number][];
-  setColumnValuesFilter: (value: T[number][]) => void;
+  column: Column<TData, TValue>;
+  allColumnValues: TValue[] | readonly TValue[];
+  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
 }) {
   const [mode, setMode] = useState<'include' | 'exclude'>('include');
 
-  const selected = useMemo(
-    () => computeSelected(allColumnValues, mode, new Set(columnValuesFilter)),
-    [mode, columnValuesFilter, allColumnValues],
-  );
+  const columnId = column.id;
+
+  const label =
+    column.columnDef.meta?.label ??
+    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
+
+  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;
+
+  const selected = useMemo(() => {
+    return computeSelected(allColumnValues, mode, new Set(columnValuesFilter));
+  }, [mode, allColumnValues, columnValuesFilter]);
 
-  const apply = (newMode: 'include' | 'exclude', newSelected: Set<T[number]>) => {
+  const apply = (newMode: 'include' | 'exclude', newSelected: Set<TValue>) => {
     const selected = computeSelected(allColumnValues, newMode, newSelected);
     setMode(newMode);
-    setColumnValuesFilter(Array.from(selected));
+    const newValue = Array.from(selected);
+    column.setFilterValue(newValue);
   };
 
-  const toggleSelected = (value: T[number]) => {
+  const toggleSelected = (value: TValue) => {
     const set = new Set(selected);
     if (set.has(value)) {
       set.delete(value);
@@ -72,8 +72,8 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
         variant="link"
         class="text-muted p-0"
         id={`filter-${columnId}`}
-        aria-label={`Filter ${columnLabel.toLowerCase()}`}
-        title={`Filter ${columnLabel.toLowerCase()}`}
+        aria-label={`Filter ${label.toLowerCase()}`}
+        title={`Filter ${label.toLowerCase()}`}
       >
         <i
           class={clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
@@ -83,7 +83,7 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
       <Dropdown.Menu class="p-0">
         <div class="p-3 pb-0">
           <div class="d-flex align-items-center justify-content-between mb-2">
-            <div class="fw-semibold">{columnLabel}</div>
+            <div class="fw-semibold text-nowrap">{label}</div>
             <button
               type="button"
               class={clsx('btn btn-link btn-sm text-decoration-none', {
@@ -152,7 +152,7 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
                     id={`${columnId}-${value}`}
                     onChange={() => toggleSelected(value)}
                   />
-                  <label class="form-check-label" for={`${columnId}-${value}`}>
+                  <label class="form-check-label fw-normal" for={`${columnId}-${value}`}>
                     {renderValueLabel({
                       value,
                       isSelected,