// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Table View 02 * @description An advanced data table with search, filters, and export functionality. * Features status badges, priority indicators, and toolbar actions. * * @slots table-view, table-view-container, table-view-card, table-view-toolbar, * table-view-search, table-view-actions, table-view-table, table-view-thead, * table-view-tbody, table-view-row, table-view-cell * @variant advanced * * @registryDependencies button card input badge * @dependencies lucide-react */ import * as React from "react" import { Search, Filter, Download, Plus, MoreHorizontal } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Card, CardContent } from "@/registry/ui/card" import { Input } from "@/registry/ui/input" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ProjectRow { id: string name: string status: "Active" | "In Review" | "Completed" priority: "High" | "Medium" | "Low" assignee: string dueDate: string } interface TableView02Props { /** Table data rows */ data?: ProjectRow[] /** Callback when search query changes */ onSearch?: (query: string) => void /** Callback when filter is clicked */ onFilter?: () => void /** Callback when export is clicked */ onExport?: () => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultData: ProjectRow[] = [ { id: "1", name: "Project Alpha", status: "Active", priority: "High", assignee: "John D.", dueDate: "2024-02-15" }, { id: "2", name: "Project Beta", status: "In Review", priority: "Medium", assignee: "Jane S.", dueDate: "2024-02-20" }, { id: "3", name: "Project Gamma", status: "Completed", priority: "Low", assignee: "Bob W.", dueDate: "2024-02-10" }, { id: "4", name: "Project Delta", status: "Active", priority: "High", assignee: "Alice B.", dueDate: "2024-02-25" }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const statusVariant = { Active: "default", "In Review": "secondary", Completed: "outline", } as const const priorityVariant = { High: "destructive", Medium: "secondary", Low: "outline", } as const // ============================================================================ // COMPONENT // ============================================================================ function TableView02({ data = defaultData, onSearch, onFilter, onExport, className, }: TableView02Props) { const [search, setSearch] = React.useState("") return (

Projects Table

{/* Toolbar */}

{/* Table */}

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

Project	Status	Priority	Assignee	Due Date	Actions
{row.name}	{row.status}	{row.priority}	{row.assignee}	{row.dueDate}

) } export default TableView02 export { TableView02, type TableView02Props, type ProjectRow }