animated-table

1import {
2  Check,
3  ChevronDown,
4  ChevronLeft,
5  ChevronRight,
6  ChevronsLeft,
7  ChevronsRight,
8  ChevronsUpDown,
9  ChevronUp,
10  Columns3,
11  Search,
12  X,
13} from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import * as React from "react";
16import { cn } from "@/lib/utils";
17 
18// Types
19export type SortDirection = "asc" | "desc" | null;
20 
21export interface ColumnDef<T> {
22  id: string;
23  header: React.ReactNode;
24  accessorKey?: keyof T;
25  cell?: (row: T, index: number) => React.ReactNode;
26  sortable?: boolean;
27  filterable?: boolean;
28  align?: "left" | "center" | "right";
29  width?: string;
30  hideable?: boolean;
31}
32 
33export interface PaginationConfig {
34  page: number;
35  pageSize: number;
36  totalItems: number;
37  pageSizeOptions?: number[];
38  onPageChange: (page: number) => void;
39  onPageSizeChange?: (pageSize: number) => void;
40}
41 
42export interface AnimatedTableProps<T extends { id: string | number }> {
43  data: T[];
44  columns: ColumnDef<T>[];
45  selectable?: boolean;
46  selectedIds?: (string | number)[];
47  onSelectionChange?: (ids: (string | number)[]) => void;
48  onRowClick?: (row: T) => void;
49  sortColumn?: string;
50  sortDirection?: SortDirection;
51  onSort?: (columnId: string, direction: SortDirection) => void;
52  striped?: boolean;
53  stickyHeader?: boolean;
54  className?: string;
55  emptyMessage?: React.ReactNode;
56  loading?: boolean;
57  loadingRows?: number;
58  // New features
59  searchable?: boolean;
60  searchValue?: string;
61  onSearchChange?: (value: string) => void;
62  searchPlaceholder?: string;
63  pagination?: PaginationConfig;
64  expandable?: boolean;
65  renderExpandedRow?: (row: T) => React.ReactNode;
66  columnVisibility?: boolean;
67  visibleColumns?: string[];
68  onVisibleColumnsChange?: (columns: string[]) => void;
69}
70 
71// Search Input Component
72const TableSearch = ({
73  value,
74  onChange,
75  placeholder = "Search...",
76}: {
77  value: string;
78  onChange: (value: string) => void;
79  placeholder?: string;
80}) => (
81  <div className="relative">
82    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
83    <input
84      type="text"
85      value={value}
86      onChange={(e) => onChange(e.target.value)}
87      placeholder={placeholder}
88      className="h-9 w-full rounded-md border border-table-border bg-background pr-8 pl-9 text-foreground text-sm placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
89    />
90    <AnimatePresence>
91      {value && (
92        <motion.button
93// … truncated