{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"table-02","type":"registry:component","title":"Order Management Table","description":"An advanced order management table with comprehensive filtering, bulk actions, and status management capabilities. Features search functionality, status filtering, column visibility controls, row selection, bulk operations, and detailed order information with currency formatting. Includes header with action buttons, configurable pagination, and complete CRUD operations. Perfect for e-commerce admin panels, order management systems, and business dashboards requiring complex data operations with internationalization support.","dependencies":["@tanstack/react-table","lucide-react"],"registryDependencies":["badge","button","checkbox","dropdown-menu","input","select","table"],"files":[{"path":"src/registry/blocks/application/data-display/tables/table-02.tsx","content":"\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowUpDown,\n  ChevronDown,\n  Download,\n  Filter,\n  MoreHorizontal,\n  Plus,\n  ShoppingCart,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Checkbox } from \"@/registry/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport { Input } from \"@/registry/ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/ui/table\";\n\ninterface Order {\n  id: string;\n  customer: string;\n  email: string;\n  product: string;\n  amount: number;\n  status: \"pending\" | \"processing\" | \"shipped\" | \"delivered\" | \"cancelled\";\n  date: string;\n  priority: \"low\" | \"medium\" | \"high\";\n}\n\nexport interface Table02Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    description: string;\n  };\n  searchPlaceholder: string;\n  emptyMessage: string;\n  orders: Order[];\n  features: {\n    search: boolean;\n    statusFilter: boolean;\n    columnToggle: boolean;\n    rowSelection: boolean;\n    bulkActions: boolean;\n    exportButton: boolean;\n    newButton: boolean;\n    pagination: {\n      pageSize: number;\n    };\n  };\n  currency: {\n    code: string;\n    locale: string;\n  };\n  buttons: {\n    export: { text: string; icon: typeof Download };\n    newOrder: { text: string; icon: typeof Plus };\n    bulkActions: {\n      updateStatus: string;\n      export: string;\n      delete: string;\n    };\n  };\n} = {\n  header: {\n    title: \"Order Management\",\n    description:\n      \"Track and manage customer orders with advanced filtering and bulk actions\",\n  },\n  searchPlaceholder: \"Search customers...\",\n  emptyMessage: \"No orders found.\",\n  orders: [\n    {\n      id: \"ORD-001\",\n      customer: \"Alice Johnson\",\n      email: \"alice@example.com\",\n      product: \"Wireless Headphones Pro\",\n      amount: 299.99,\n      status: \"delivered\",\n      date: \"2024-01-15\",\n      priority: \"medium\",\n    },\n    {\n      id: \"ORD-002\",\n      customer: \"Bob Smith\",\n      email: \"bob@example.com\",\n      product: \"Ergonomic Laptop Stand\",\n      amount: 129.99,\n      status: \"shipped\",\n      date: \"2024-01-16\",\n      priority: \"low\",\n    },\n    {\n      id: \"ORD-003\",\n      customer: \"Carol Davis\",\n      email: \"carol@example.com\",\n      product: \"Mechanical Gaming Keyboard\",\n      amount: 189.99,\n      status: \"processing\",\n      date: \"2024-01-17\",\n      priority: \"high\",\n    },\n    {\n      id: \"ORD-004\",\n      customer: \"David Wilson\",\n      email: \"david@example.com\",\n      product: \"4K Ultra HD Monitor\",\n      amount: 449.99,\n      status: \"pending\",\n      date: \"2024-01-18\",\n      priority: \"medium\",\n    },\n    {\n      id: \"ORD-005\",\n      customer: \"Eva Brown\",\n      email: \"eva@example.com\",\n      product: \"LED Desk Lamp\",\n      amount: 79.99,\n      status: \"cancelled\",\n      date: \"2024-01-19\",\n      priority: \"low\",\n    },\n    {\n      id: \"ORD-006\",\n      customer: \"Frank Miller\",\n      email: \"frank@example.com\",\n      product: \"Bluetooth Mouse\",\n      amount: 49.99,\n      status: \"delivered\",\n      date: \"2024-01-20\",\n      priority: \"low\",\n    },\n    {\n      id: \"ORD-007\",\n      customer: \"Grace Lee\",\n      email: \"grace@example.com\",\n      product: \"Wireless Charging Pad\",\n      amount: 39.99,\n      status: \"shipped\",\n      date: \"2024-01-21\",\n      priority: \"medium\",\n    },\n    {\n      id: \"ORD-008\",\n      customer: \"Henry Taylor\",\n      email: \"henry@example.com\",\n      product: \"Webcam HD 1080p\",\n      amount: 89.99,\n      status: \"processing\",\n      date: \"2024-01-22\",\n      priority: \"high\",\n    },\n  ],\n  features: {\n    search: true,\n    statusFilter: true,\n    columnToggle: true,\n    rowSelection: true,\n    bulkActions: true,\n    exportButton: true,\n    newButton: true,\n    pagination: {\n      pageSize: 10,\n    },\n  },\n  currency: {\n    code: \"USD\",\n    locale: \"en-US\",\n  },\n  buttons: {\n    export: {\n      text: \"Export\",\n      icon: Download,\n    },\n    newOrder: {\n      text: \"New Order\",\n      icon: Plus,\n    },\n    bulkActions: {\n      updateStatus: \"Update Status\",\n      export: \"Export Selected\",\n      delete: \"Delete Selected\",\n    },\n  },\n};\n\nconst getStatusBadgeProps = (status: string) => {\n  const statusConfig = {\n    pending: {\n      color:\n        \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300\",\n      label: \"Pending\",\n    },\n    processing: {\n      color: \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300\",\n      label: \"Processing\",\n    },\n    shipped: {\n      color:\n        \"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300\",\n      label: \"Shipped\",\n    },\n    delivered: {\n      color:\n        \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300\",\n      label: \"Delivered\",\n    },\n    cancelled: {\n      color: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300\",\n      label: \"Cancelled\",\n    },\n  };\n  return (\n    statusConfig[status as keyof typeof statusConfig] || statusConfig.pending\n  );\n};\n\nconst getPriorityBadgeProps = (priority: string) => {\n  const priorityConfig = {\n    low: {\n      color: \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300\",\n      label: \"Low\",\n    },\n    medium: {\n      color:\n        \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300\",\n      label: \"Medium\",\n    },\n    high: {\n      color: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300\",\n      label: \"High\",\n    },\n  };\n  return (\n    priorityConfig[priority as keyof typeof priorityConfig] ||\n    priorityConfig.medium\n  );\n};\n\nconst formatCurrency = (amount: number, currency: string, locale: string) => {\n  return new Intl.NumberFormat(locale, {\n    style: \"currency\",\n    currency: currency,\n  }).format(amount);\n};\n\nexport function Table02({ className }: Table02Props) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    [],\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = React.useState({});\n\n  const handleCopyOrderId = React.useCallback(\n    (orderId: string) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigator.clipboard.writeText(orderId);\n      console.log(\"Order ID copied:\", orderId);\n    },\n    [],\n  );\n\n  const handleViewDetails = React.useCallback(\n    (order: Order) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"View order details:\", order);\n    },\n    [],\n  );\n\n  const handleUpdateStatus = React.useCallback(\n    (order: Order) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"Update order status:\", order);\n    },\n    [],\n  );\n\n  const handleSendNotification = React.useCallback(\n    (order: Order) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"Send notification for order:\", order);\n    },\n    [],\n  );\n\n  const handleCancelOrder = React.useCallback(\n    (order: Order) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"Cancel order:\", order);\n    },\n    [],\n  );\n\n  const handleRowClick = (order: Order) => (_e: React.MouseEvent) => {\n    console.log(\"Order row clicked:\", order);\n  };\n\n  const handleExport = () => {\n    console.log(\"Export orders\");\n  };\n\n  const handleNewOrder = () => {\n    console.log(\"Create new order\");\n  };\n\n  const handleBulkUpdateStatus = () => {\n    const selectedRows = table.getFilteredSelectedRowModel().rows;\n    const selectedOrders = selectedRows.map((row) => row.original);\n    console.log(\"Bulk update status for orders:\", selectedOrders);\n  };\n\n  const handleBulkExport = () => {\n    const selectedRows = table.getFilteredSelectedRowModel().rows;\n    const selectedOrders = selectedRows.map((row) => row.original);\n    console.log(\"Bulk export orders:\", selectedOrders);\n  };\n\n  const handleBulkDelete = () => {\n    const selectedRows = table.getFilteredSelectedRowModel().rows;\n    const selectedOrders = selectedRows.map((row) => row.original);\n    console.log(\"Bulk delete orders:\", selectedOrders);\n  };\n\n  const columns: ColumnDef<Order>[] = React.useMemo(() => {\n    const baseColumns: ColumnDef<Order>[] = [\n      {\n        accessorKey: \"id\",\n        header: ({ column }) => (\n          <Button\n            variant=\"ghost\"\n            onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n            className=\"h-auto p-0 font-medium\"\n            data-testid=\"sort-id-button\"\n          >\n            Order ID\n            <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n          </Button>\n        ),\n        cell: ({ row }) => (\n          <div\n            className=\"font-mono text-sm font-medium\"\n            data-testid=\"order-id-cell\"\n          >\n            {row.getValue(\"id\")}\n          </div>\n        ),\n      },\n      {\n        accessorKey: \"customer\",\n        header: ({ column }) => (\n          <Button\n            variant=\"ghost\"\n            onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n            className=\"h-auto p-0 font-medium\"\n            data-testid=\"sort-customer-button\"\n          >\n            Customer\n            <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n          </Button>\n        ),\n        cell: ({ row }) => (\n          <div className=\"min-w-0\" data-testid=\"customer-cell\">\n            <div className=\"font-medium truncate\">\n              {row.getValue(\"customer\")}\n            </div>\n            <div className=\"text-sm text-muted-foreground truncate\">\n              {row.original.email}\n            </div>\n          </div>\n        ),\n      },\n      {\n        accessorKey: \"product\",\n        header: \"Product\",\n        cell: ({ row }) => (\n          <div\n            className=\"max-w-[200px] truncate font-medium\"\n            data-testid=\"product-cell\"\n          >\n            {row.getValue(\"product\")}\n          </div>\n        ),\n      },\n      {\n        accessorKey: \"amount\",\n        header: ({ column }) => (\n          <Button\n            variant=\"ghost\"\n            onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n            className=\"h-auto p-0 font-medium\"\n            data-testid=\"sort-amount-button\"\n          >\n            Amount\n            <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n          </Button>\n        ),\n        cell: ({ row }) => {\n          const amount = Number.parseFloat(row.getValue(\"amount\"));\n          const formatted = formatCurrency(\n            amount,\n            content.currency.code,\n            content.currency.locale,\n          );\n          return (\n            <div className=\"font-medium\" data-testid=\"amount-cell\">\n              {formatted}\n            </div>\n          );\n        },\n      },\n      {\n        accessorKey: \"status\",\n        header: \"Status\",\n        cell: ({ row }) => {\n          const status = row.getValue(\"status\") as string;\n          const config = getStatusBadgeProps(status);\n          return (\n            <Badge\n              variant=\"secondary\"\n              className={config.color}\n              data-testid=\"status-badge\"\n            >\n              {config.label}\n            </Badge>\n          );\n        },\n      },\n      {\n        accessorKey: \"priority\",\n        header: \"Priority\",\n        cell: ({ row }) => {\n          const priority = row.getValue(\"priority\") as string;\n          const config = getPriorityBadgeProps(priority);\n          return (\n            <Badge\n              variant=\"outline\"\n              className={config.color}\n              data-testid=\"priority-badge\"\n            >\n              {config.label}\n            </Badge>\n          );\n        },\n      },\n      {\n        accessorKey: \"date\",\n        header: ({ column }) => (\n          <Button\n            variant=\"ghost\"\n            onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n            className=\"h-auto p-0 font-medium\"\n            data-testid=\"sort-date-button\"\n          >\n            Date\n            <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n          </Button>\n        ),\n        cell: ({ row }) => {\n          const date = new Date(row.getValue(\"date\"));\n          return (\n            <div className=\"text-sm\" data-testid=\"date-cell\">\n              {date.toLocaleDateString(content.currency.locale, {\n                year: \"numeric\",\n                month: \"2-digit\",\n                day: \"2-digit\",\n              })}\n            </div>\n          );\n        },\n      },\n      {\n        id: \"actions\",\n        enableHiding: false,\n        cell: ({ row }) => {\n          const order = row.original;\n\n          return (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"h-8 w-8 p-0\"\n                  data-testid=\"actions-menu-trigger\"\n                >\n                  <span className=\"sr-only\">Open menu</span>\n                  <MoreHorizontal className=\"h-4 w-4\" />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" data-testid=\"actions-menu\">\n                <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                <DropdownMenuItem\n                  onClick={handleCopyOrderId(order.id)}\n                  data-testid=\"copy-order-id-action\"\n                >\n                  Copy order ID\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem\n                  onClick={handleViewDetails(order)}\n                  data-testid=\"view-details-action\"\n                >\n                  View details\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={handleUpdateStatus(order)}\n                  data-testid=\"update-status-action\"\n                >\n                  Update status\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={handleSendNotification(order)}\n                  data-testid=\"send-notification-action\"\n                >\n                  Send notification\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem\n                  className=\"text-red-600\"\n                  onClick={handleCancelOrder(order)}\n                  data-testid=\"cancel-order-action\"\n                >\n                  Cancel order\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          );\n        },\n      },\n    ];\n\n    if (content.features.rowSelection) {\n      return [\n        {\n          id: \"select\",\n          header: ({ table }) => (\n            <Checkbox\n              checked={\n                table.getIsAllPageRowsSelected() ||\n                (table.getIsSomePageRowsSelected() && \"indeterminate\")\n              }\n              onCheckedChange={(value) =>\n                table.toggleAllPageRowsSelected(!!value)\n              }\n              aria-label=\"Select all\"\n              data-testid=\"select-all-checkbox\"\n            />\n          ),\n          cell: ({ row }) => (\n            <Checkbox\n              checked={row.getIsSelected()}\n              onCheckedChange={(value) => row.toggleSelected(!!value)}\n              aria-label=\"Select row\"\n              data-testid=\"select-row-checkbox\"\n            />\n          ),\n          enableSorting: false,\n          enableHiding: false,\n        },\n        ...baseColumns,\n      ];\n    }\n\n    return baseColumns;\n  }, [\n    handleCancelOrder,\n    handleCopyOrderId,\n    handleSendNotification,\n    handleUpdateStatus,\n    handleViewDetails,\n  ]);\n\n  const table = useReactTable({\n    data: content.orders,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    initialState: {\n      pagination: {\n        pageSize: content.features.pagination.pageSize,\n      },\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  });\n\n  const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;\n  const totalRowCount = table.getFilteredRowModel().rows.length;\n\n  return (\n    <div\n      className={cn(\"w-full space-y-6 p-6\", className)}\n      data-testid=\"orders-table-container\"\n    >\n      {/* Header with actions */}\n      <div className=\"flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0\">\n        <div>\n          <h2 className=\"text-2xl font-bold tracking-tight\">\n            {content.header.title}\n          </h2>\n          <p className=\"text-muted-foreground\">{content.header.description}</p>\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          {content.features.exportButton && (\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleExport}\n              data-testid=\"export-button\"\n            >\n              <content.buttons.export.icon className=\"mr-2 h-4 w-4\" />\n              {content.buttons.export.text}\n            </Button>\n          )}\n          {content.features.newButton && (\n            <Button\n              size=\"sm\"\n              onClick={handleNewOrder}\n              data-testid=\"new-order-button\"\n            >\n              <content.buttons.newOrder.icon className=\"mr-2 h-4 w-4\" />\n              {content.buttons.newOrder.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* Filters and search */}\n      {(content.features.search ||\n        content.features.statusFilter ||\n        content.features.columnToggle) && (\n        <div\n          className=\"flex flex-col space-y-4 sm:flex-row sm:items-center sm:space-y-0 sm:space-x-4\"\n          data-testid=\"filters-section\"\n        >\n          {content.features.search && (\n            <Input\n              placeholder={content.searchPlaceholder}\n              value={\n                (table.getColumn(\"customer\")?.getFilterValue() as string) ?? \"\"\n              }\n              onChange={(event) =>\n                table.getColumn(\"customer\")?.setFilterValue(event.target.value)\n              }\n              className=\"max-w-sm\"\n              data-testid=\"search-input\"\n            />\n          )}\n          {content.features.statusFilter && (\n            <Select\n              value={\n                (table.getColumn(\"status\")?.getFilterValue() as string) ?? \"\"\n              }\n              onValueChange={(value) =>\n                table\n                  .getColumn(\"status\")\n                  ?.setFilterValue(value === \"all\" ? \"\" : value)\n              }\n            >\n              <SelectTrigger className=\"w-[180px]\" data-testid=\"status-filter\">\n                <SelectValue placeholder=\"Filter by status\" />\n              </SelectTrigger>\n              <SelectContent data-testid=\"status-filter-menu\">\n                <SelectItem value=\"all\">All statuses</SelectItem>\n                <SelectItem value=\"pending\">Pending</SelectItem>\n                <SelectItem value=\"processing\">Processing</SelectItem>\n                <SelectItem value=\"shipped\">Shipped</SelectItem>\n                <SelectItem value=\"delivered\">Delivered</SelectItem>\n                <SelectItem value=\"cancelled\">Cancelled</SelectItem>\n              </SelectContent>\n            </Select>\n          )}\n          {content.features.columnToggle && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" data-testid=\"column-toggle\">\n                  <Filter className=\"mr-2 h-4 w-4\" />\n                  View\n                  <ChevronDown className=\"ml-2 h-4 w-4\" />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" data-testid=\"column-toggle-menu\">\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide())\n                  .map((column) => (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      data-testid={`toggle-${column.id}-column`}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      )}\n\n      {/* Bulk actions */}\n      {content.features.bulkActions && selectedRowCount > 0 && (\n        <div\n          className=\"flex items-center space-x-2 rounded-md bg-muted p-4\"\n          data-testid=\"bulk-actions\"\n        >\n          <div className=\"flex-1 text-sm text-muted-foreground\">\n            {selectedRowCount} of {totalRowCount} row(s) selected.\n          </div>\n          <div className=\"flex items-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleBulkUpdateStatus}\n              data-testid=\"bulk-update-status\"\n            >\n              {content.buttons.bulkActions.updateStatus}\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleBulkExport}\n              data-testid=\"bulk-export\"\n            >\n              {content.buttons.bulkActions.export}\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"text-red-600 hover:text-red-700 bg-transparent\"\n              onClick={handleBulkDelete}\n              data-testid=\"bulk-delete\"\n            >\n              {content.buttons.bulkActions.delete}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {/* Table */}\n      <div\n        className=\"rounded-md border border-border\"\n        data-testid=\"table-wrapper\"\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody data-testid=\"table-body\">\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                  className=\"hover:bg-muted/50 cursor-pointer\"\n                  onClick={handleRowClick(row.original)}\n                  data-testid=\"table-row\"\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                  data-testid=\"empty-state\"\n                >\n                  <div className=\"flex flex-col items-center justify-center space-y-2\">\n                    <ShoppingCart className=\"h-8 w-8 text-muted-foreground\" />\n                    <p className=\"text-muted-foreground\">\n                      {content.emptyMessage}\n                    </p>\n                  </div>\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div\n        className=\"flex items-center justify-between space-x-2 py-4\"\n        data-testid=\"pagination-controls\"\n      >\n        <div className=\"text-sm text-muted-foreground\">\n          Showing{\" \"}\n          {table.getState().pagination.pageIndex *\n            table.getState().pagination.pageSize +\n            1}{\" \"}\n          to{\" \"}\n          {Math.min(\n            (table.getState().pagination.pageIndex + 1) *\n              table.getState().pagination.pageSize,\n            totalRowCount,\n          )}{\" \"}\n          of {totalRowCount} entries\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n            data-testid=\"previous-page-button\"\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n            data-testid=\"next-page-button\"\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}