DataTable Column 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 React from "react"
15import type { Column } from "@tanstack/react-table"
16 
17import {
18  TableColumnFacetedFilterOptions,
19  TableColumnFacetedFilterMenu,
20} from "../filters/table-column-faceted-filter"
21import { useDataTable } from "../core/data-table-context"
22import { useColumnHeaderContext } from "./data-table-column-header"
23 
24/**
25 * Faceted filter options for composing inside DataTableColumnActions using context.
26 */
27export function DataTableColumnFacetedFilterOptions<TData, TValue>(
28  props: Omit<
29    React.ComponentProps<typeof TableColumnFacetedFilterOptions>,
30    "column"
31  > & {
32    column?: Column<TData, TValue>
33  },
34) {
35  const context = useColumnHeaderContext<TData, TValue>(false)
36  const column = props.column || context?.column
37 
38  if (!column) {
39    console.warn(
40      "DataTableColumnFacetedFilterOptions must be used within DataTableColumnHeaderRoot or provided with a column prop",
41    )
42    return null
43  }
44 
45  return <TableColumnFacetedFilterOptions column={column} {...props} />
46}
47 
48DataTableColumnFacetedFilterOptions.displayName =
49  "DataTableColumnFacetedFilterOptions"
50 
51/**
52 * Standalone faceted filter menu for column header using context.
53 */
54export function DataTableColumnFacetedFilterMenu<TData, TValue>(
55  props: Omit<
56    React.ComponentProps<typeof TableColumnFacetedFilterMenu>,
57    "column" | "table"
58  > & {
59    column?: Column<TData, TValue>
60  },
61) {
62  const context = useColumnHeaderContext<TData, TValue>(false)
63  const column = props.column || context?.column
64  const { table, generatedOptionsMap } = useDataTable<TData>()
65 
66  if (!column) {
67    console.warn(
68      "DataTableColumnFacetedFilterMenu must be used within DataTableColumnHeaderRoot or provided with a column prop",
69    )
70    return null
71  }
72 
73  return (
74    <TableColumnFacetedFilterMenu
75      column={column}
76      table={table}
77      precomputedOptions={
78        // Skip batch cache when caller supplies custom per-column config
79        // (dynamicCounts / limitToFilteredRows) so those props are honoured.
80// … truncated