Data Table

1"use client";
2 
3import "./data-table.css";
4import React, { useMemo, useState } from "react";
5import { cn } from "tailwind-variants";
6 
7import { Checkbox } from "../checkbox";
8import { TableBody, TableCell, TableHead, TableHeader, TableRoot, TableRow } from "../table";
9import { DataTableContext, useDataTableContext } from "./data-table.context";
10import { dataTableVariants, type DataTableVariants } from "./data-table.variants";
11 
12export type ColumnDef<T> = {
13  id: string;
14  header: React.ReactNode | ((props: { column: ColumnDef<T> }) => React.ReactNode);
15  cell: (props: { row: T; index: number }) => React.ReactNode;
16  sortable?: boolean;
17  accessorKey?: keyof T;
18};
19 
20export type DataTableRootProps = DataTableVariants & React.HTMLAttributes<HTMLDivElement>;
21 
22export const DataTableRoot = ({ children, className, size, ...props }: DataTableRootProps) => {
23  const slots = dataTableVariants({ size });
24 
25  return (
26    <DataTableContext.Provider value={{ slots }}>
27      <div className={cn(slots.root(), className)} {...props}>
28        {children}
29      </div>
30    </DataTableContext.Provider>
31  );
32};
33 
34export type DataTableToolbarProps = React.HTMLAttributes<HTMLDivElement>;
35 
36export const DataTableToolbar = ({ className, ...props }: DataTableToolbarProps) => {
37  const { slots } = useDataTableContext();
38  return <div className={cn(slots.toolbar(), className)} {...props} />;
39};
40 
41export type DataTableSearchProps = React.InputHTMLAttributes<HTMLInputElement> & {
42  onSearchChange?: (query: string) => void;
43};
44 
45export const DataTableSearch = ({
46  className,
47  placeholder = "Filter...",
48  onSearchChange,
49  onChange,
50  ...props
51}: DataTableSearchProps) => {
52  const { slots } = useDataTableContext();
53 
54  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
55    onChange?.(e);
56    onSearchChange?.(e.target.value);
57  };
58 
59  return (
60    <div className={cn(slots.search(), className)}>
61      <svg
62        className="text-muted-foreground h-4 w-4 shrink-0"
63        fill="none"
64        stroke="currentColor"
65        strokeWidth="2"
66        viewBox="0 0 24 24"
67      >
68        <circle cx="11" cy="11" r="8" />
69        <path d="m21 21-4.35-4.35" />
70      </svg>
71      <input placeholder={placeholder} onChange={handleChange} {...props} />
72    </div>
73  );
74};
75 
76export type DataTableColumnHeaderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
77  sortDirection?: "asc" | "desc" | null;
78  onToggleSort?: () => void;
79};
80 
81export const DataTableColumnHeader = ({
82  children,
83  className,
84// … truncated