DataTable Filter Menu

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 { useDataTable } from "../core/data-table-context"
16import { TableFilterMenu } from "../filters/table-filter-menu"
17import { FILTER_VARIANTS } from "../lib/constants"
18import type { Option } from "../types"
19 
20type BaseTableFilterMenuProps<TData> = Omit<
21  React.ComponentProps<typeof TableFilterMenu<TData>>,
22  "table"
23>
24 
25interface AutoOptionProps {
26  /**
27   * Automatically generate select/multiSelect options for columns lacking static options
28   * @default true
29   */
30  autoOptions?: boolean
31  /** Show counts beside each option (computed from rows) */
32  showCounts?: boolean
33  /** Recompute counts based on currently filtered rows */
34  dynamicCounts?: boolean
35  /**
36   * If true, only generate options from filtered rows. If false, generate from all rows.
37   * This controls which rows are used to generate the option list itself.
38   * Note: This is separate from dynamicCounts which controls count calculation.
39   * @default true
40   */
41  limitToFilteredRows?: boolean
42  /** Only generate options for these column ids */
43  includeColumns?: string[]
44  /** Exclude these column ids from generation */
45  excludeColumns?: string[]
46  /** Limit number of generated options per column */
47  limitPerColumn?: number
48  /**
49   * Merge strategy when static options already exist:
50   * - "preserve" keeps user options untouched (default)
51   * - "augment" adds counts to matching values
52   * - "replace" overrides with generated options
53   */
54  mergeStrategy?: "preserve" | "augment" | "replace"
55}
56 
57type DataTableFilterMenuProps<TData> = BaseTableFilterMenuProps<TData> &
58  AutoOptionProps
59 
60/**
61 * A filter menu component that automatically connects to the DataTable context.
62 * Filters are managed directly by the table state - no internal state needed.
63 *
64 * @example - Basic usage
65 * <DataTableFilterMenu />
66 *
67 * @example - Custom alignment and positioning
68 * <DataTableFilterMenu align="end" side="bottom" />
69 *
70 * @example - Custom styling
71 * <DataTableFilterMenu className="w-[400px]" />
72 */
73// … truncated