DataTable Slider 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 { useDataTable } from "../core/data-table-context"
16import {
17  TableSliderFilter,
18  type TableSliderFilterProps,
19} from "../filters/table-slider-filter"
20import { useDerivedColumnTitle } from "../hooks/use-derived-column-title"
21import { FILTER_VARIANTS } from "../lib/constants"
22 
23type DataTableSliderFilterProps<TData> = Omit<
24  TableSliderFilterProps<TData>,
25  "column" | "title"
26> & {
27  /**
28   * The accessor key of the column to filter (matches column definition)
29   */
30  accessorKey: keyof TData & string
31  /**
32   * Optional title override (if not provided, will use column.meta.label)
33   */
34  title?: string
35}
36 
37/**
38 * A slider filter component that automatically connects to the DataTable context
39 * and derives the title from column metadata.
40 *
41 * @example -  Auto-detect everything from column metadata and data
42 * const columns: DataTableColumnDef[] = [{ accessorKey: "price",..., meta: { label: "Price", unit: "$", range: [0, 1000] } },...]
43 * <DataTableSliderFilter accessorKey="price" />
44 *
45 * @example - Custom range shorthand with unit
46 * <DataTableSliderFilter
47 *   accessorKey="price"
48 *   range={[0, 1000]}
49 *   unit="$"
50 * />
51 *
52 * @example - Individual min/max control
53 * <DataTableSliderFilter
54 *   accessorKey="rating"
55 *   min={1}
56 *   max={5}
57 *   step={0.5}
58 * />
59 *
60 * @example - Full manual control with custom title
61 * <DataTableSliderFilter
62 *   accessorKey="distance"
63 *   title="Distance Range"
64 *   range={[0, 100]}
65 *   step={5}
66 *   unit="km"
67 * />
68 */
69 
70export function DataTableSliderFilter<TData>({
71  accessorKey,
72  title,
73  ...props
74}: DataTableSliderFilterProps<TData>) {
75  const { table } = useDataTable<TData>()
76  const column = table.getColumn(accessorKey as string)
77 
78  const derivedTitle = useDerivedColumnTitle(column, String(accessorKey), title)
79 
80  // Auto-set variant in column meta if not already set
81  // This allows the auto-filterFn to be applied based on variant
82  React.useMemo(() => {
83    if (!column) return
84    const meta = (column.columnDef.meta ||= {})
85// … truncated