DataTable Search 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 { useDataTable } from "../core/data-table-context"
15import {
16  TableSearchFilter,
17  type TableSearchFilterProps,
18} from "../filters/table-search-filter"
19 
20type DataTableSearchFilterProps<TData> = Omit<
21  TableSearchFilterProps<TData>,
22  "table"
23>
24 
25/**
26 * A search filter component for DataTable.
27 * Can be used in controlled or uncontrolled mode.
28 *
29 * @example
30 * // Uncontrolled (manages its own state)
31 * <DataTableSearchFilter placeholder="Search products..." />
32 *
33 * @example
34 * // Controlled (you manage the state)
35 * const [search, setSearch] = useState("")
36 * <DataTableSearchFilter
37 *   value={search}
38 *   onChange={setSearch}
39 *   placeholder="Search..."
40 * />
41 *
42 * @example
43 * // With nuqs for URL state
44 * const [search, setSearch] = useQueryState('search')
45 * <DataTableSearchFilter
46 *   value={search ?? ""}
47 *   onChange={setSearch}
48 * />
49 */
50export function DataTableSearchFilter<TData>(
51  props: DataTableSearchFilterProps<TData>,
52) {
53  const { table } = useDataTable<TData>()
54  return <TableSearchFilter table={table} {...props} />
55}
56 
57/**
58 * @required displayName is required for auto feature detection
59 * @see "feature-detection.ts"
60 */
61DataTableSearchFilter.displayName = "DataTableSearchFilter"