DataTable Column 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 React from "react"
15import type { Column } from "@tanstack/react-table"
16 
17import {
18  TableColumnSliderFilterOptions,
19  TableColumnSliderFilterMenu,
20} from "../filters/table-column-slider-filter"
21import { useColumnHeaderContext } from "./data-table-column-header"
22 
23/**
24 * Slider filter options for composing inside DataTableColumnActions using context.
25 */
26export function DataTableColumnSliderFilterOptions<TData, TValue>(
27  props: Omit<
28    React.ComponentProps<typeof TableColumnSliderFilterOptions>,
29    "column"
30  > & {
31    column?: Column<TData, TValue>
32  },
33) {
34  const context = useColumnHeaderContext<TData, TValue>(false)
35  const column = props.column || context?.column
36 
37  if (!column) {
38    console.warn(
39      "DataTableColumnSliderFilterOptions must be used within DataTableColumnHeaderRoot or provided with a column prop",
40    )
41    return null
42  }
43 
44  return <TableColumnSliderFilterOptions column={column} {...props} />
45}
46 
47DataTableColumnSliderFilterOptions.displayName =
48  "DataTableColumnSliderFilterOptions"
49 
50/**
51 * Standalone slider filter menu for column header using context.
52 */
53export function DataTableColumnSliderFilterMenu<TData, TValue>(
54  props: Omit<
55    React.ComponentProps<typeof TableColumnSliderFilterMenu>,
56    "column"
57  > & {
58    column?: Column<TData, TValue>
59  },
60) {
61  const context = useColumnHeaderContext<TData, TValue>(false)
62  const column = props.column || context?.column
63 
64  if (!column) {
65    console.warn(
66      "DataTableColumnSliderFilterMenu must be used within DataTableColumnHeaderRoot or provided with a column prop",
67    )
68    return null
69  }
70 
71  return <TableColumnSliderFilterMenu column={column} {...props} />
72}
73 
74DataTableColumnSliderFilterMenu.displayName = "DataTableColumnSliderFilterMenu"