DataTable Faceted Filter

1"use client"
2 
3/**
4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
5 *
6 * Before reporting anything: please check the changelog first.
7 *  - In-repo: ./CHANGELOG.md
8 *  - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14import * as React from "react"
15import type { Table } from "@tanstack/react-table"
16import {
17  TableFacetedFilter,
18  TableFacetedFilterContent,
19  useTableFacetedFilter,
20  type TableFacetedFilterProps,
21} from "../filters/table-faceted-filter"
22import { useDataTable } from "../core/data-table-context"
23import type { Option } from "../types"
24import { useDerivedColumnTitle } from "../hooks/use-derived-column-title"
25import { useGeneratedOptionsForColumn } from "../hooks/use-generated-options"
26import { buildFacetedOptions } from "../lib/build-faceted-options"
27 
28type DataTableFacetedFilterProps<TData, TValue> = Omit<
29  TableFacetedFilterProps<TData, TValue>,
30  "column" | "options"
31> & {
32  /**
33   * The accessor key of the column to filter (matches column definition)
34   */
35  accessorKey: keyof TData & string
36  /**
37   * Optional title override (if not provided, will use column.meta.label)
38   */
39  title?: string
40  /**
41   * Static options (if provided, will be used instead of dynamic generation)
42   */
43  options?: Option[]
44  /**
45   * Whether to show counts for each option
46   * @default true
47   */
48  showCounts?: boolean
49  /**
50   * Whether to update counts based on other active filters
51   * @default true
52   */
53  dynamicCounts?: boolean
54  /**
55   * If true, only show options that exist in the currently filtered table rows.
56   * If false, show all options from the entire dataset (useful for multi-select filters
57   * where you want to see all possible options even if they're not in the current filtered results).
58   * @default !multiple (true for single-select, false for multi-select)
59   */
60  limitToFilteredRows?: boolean
61}
62 
63/**
64 * A faceted filter component that automatically connects to the DataTable context
65 * and dynamically generates options with counts based on the filtered data.
66 *
67 * @example - Auto-detect options from data with dynamic counts
68 * const columns: DataTableColumnDef[] = [{ accessorKey: "category", ..., meta: { label: "Category" } }, ...]
69 * <DataTableFacetedFilter accessorKey="category" />
70 *
71 * @example - With static options
72// … truncated