Data Table

1"use client"
2 
3import * as React from "react"
4import { motion, AnimatePresence } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7// ── Types ──────────────────────────────────────────────────────────────────────
8 
9export interface DataTableColumn<T> {
10  key: keyof T & string
11  label: string
12  sortable?: boolean
13  resizable?: boolean
14  editable?: boolean
15  width?: number
16  render?: (value: T[keyof T], row: T) => React.ReactNode
17}
18 
19export interface DataTableProps<T extends { id: string | number }> {
20  data: T[]
21  columns: DataTableColumn<T>[]
22  searchable?: boolean
23  searchKeys?: (keyof T)[]
24  selectable?: boolean
25  onSelectionChange?: (rows: T[]) => void
26  paginated?: boolean
27  pageSize?: number
28  className?: string
29}
30 
31type SortDir = "asc" | "desc" | null
32 
33// ── Helpers ────────────────────────────────────────────────────────────────────
34 
35function useDebounce<T>(value: T, delay: number): T {
36  const [debounced, setDebounced] = React.useState(value)
37  React.useEffect(() => {
38    const t = setTimeout(() => setDebounced(value), delay)
39    return () => clearTimeout(t)
40  }, [value, delay])
41  return debounced
42}
43 
44// ── Sub-components ─────────────────────────────────────────────────────────────
45 
46function DataTableToolbar({
47  searchValue,
48  onSearchChange,
49  totalRows,
50  filteredRows,
51}: {
52  searchValue: string
53  onSearchChange: (v: string) => void
54  totalRows: number
55  filteredRows: number
56}) {
57  return (
58    <div className="flex items-center justify-between gap-4 pb-4">
59      <div className="relative">
60        <svg
61          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
62          width="16"
63          height="16"
64          viewBox="0 0 24 24"
65          fill="none"
66          stroke="currentColor"
67          strokeWidth="2"
68          strokeLinecap="round"
69          strokeLinejoin="round"
70        >
71          <circle cx="11" cy="11" r="8" />
72          <path d="m21 21-4.3-4.3" />
73        </svg>
74        <input
75          type="text"
76          placeholder="Search..."
77          value={searchValue}
78// … truncated