// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Table View 01 * @description A basic data table with sorting, row selection, and pagination. * Ideal for displaying user lists, records, or any tabular data. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-title, table-view-table, table-view-thead, table-view-tbody, * table-view-row, table-view-cell, table-view-pagination * @variant basic * * @registryDependencies button card checkbox * @dependencies lucide-react */ import * as React from "react" import { ArrowUpDown, MoreHorizontal, ChevronLeft, ChevronRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" import { Checkbox } from "@/registry/ui/checkbox" // ============================================================================ // TYPES // ============================================================================ interface Column { /** Column key matching data property */ key: string /** Column header label */ label: string /** Whether column is sortable */ sortable?: boolean } interface TableView01Props { /** Table title */ title?: string /** Column definitions */ columns?: Column[] /** Table data rows */ data?: Record[] /** Callback when rows are selected */ onRowSelect?: (ids: string[]) => void /** Callback when column is sorted */ onSort?: (key: string, direction: "asc" | "desc") => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultColumns: Column[] = [ { key: "name", label: "Name", sortable: true }, { key: "email", label: "Email", sortable: true }, { key: "role", label: "Role", sortable: true }, { key: "status", label: "Status" }, ] const defaultData = [ { id: "1", name: "John Doe", email: "john@example.com", role: "Admin", status: "Active" }, { id: "2", name: "Jane Smith", email: "jane@example.com", role: "User", status: "Active" }, { id: "3", name: "Bob Wilson", email: "bob@example.com", role: "User", status: "Inactive" }, { id: "4", name: "Alice Brown", email: "alice@example.com", role: "Editor", status: "Active" }, ] // ============================================================================ // COMPONENT // ============================================================================ function TableView01({ title = "Users", columns = defaultColumns, data = defaultData, onRowSelect, onSort, className, }: TableView01Props) { const [selected, setSelected] = React.useState([]) const [sortKey, setSortKey] = React.useState("") const [sortDir, setSortDir] = React.useState<"asc" | "desc">("asc") const handleSelectAll = (checked: boolean) => { const newSelected = checked ? data.map((row) => row.id) : [] setSelected(newSelected) onRowSelect?.(newSelected) } const handleSelectRow = (id: string, checked: boolean) => { const newSelected = checked ? [...selected, id] : selected.filter((s) => s !== id) setSelected(newSelected) onRowSelect?.(newSelected) } const handleSort = (key: string) => { const newDir = sortKey === key && sortDir === "asc" ? "desc" : "asc" setSortKey(key) setSortDir(newDir) onSort?.(key, newDir) } return (

{title}

{columns.map((col) => ( ))} {data.map((row) => ( {columns.map((col) => ( ))} ))}

	{col.sortable ? ( ) : ( col.label )}	Actions
handleSelectRow(row.id, !!checked)} aria-label={`Select ${row.name}`} />	{row[col.key]}

Showing 1-{data.length} of {data.length}

) } export default TableView01 export { TableView01, type TableView01Props, type Column }