{"id":"gen-1783100026-50Cx0ABtfauPH6WWH9Z6","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"I cannot directly generate a rendered PNG/JPG image, but I can provide you with a **visual SVG mockup** of the design (which you can view in a browser) and the **exact Next.js + shadcn/ui code** to build the product table.\n\n---\n\n## 🎨 Design Mockup (SVG)\n\nCopy the SVG code below into a file called `products-table.svg` and open it in your browser to see the design:\n\n```svg\n\n```\n\n---\n\n## 📦 Installation & Setup\n\nFirst, install the required shadcn/ui components:\n\n```bash\nnpx shadcn-ui@latest add table\nnpx shadcn-ui@latest add badge\nnpx shadcn-ui@latest add button\nnpx shadcn-ui@latest add input\nnpx shadcn-ui@latest add dropdown-menu\nnpx shadcn-ui@latest add checkbox\nnpx shadcn-ui@latest add pagination\n```\n\nThen install the table library:\n\n```bash\nnpm install @tanstack/react-table\n```\n\n---\n\n## 💻 The Code\n\nCreate a new file: `components/ProductsTable.tsx`\n\n```tsx\n\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal, Plus, Search } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\"\nimport { Badge } from \"@/components/ui/badge\"\n\n// ---------- Types ----------\ntype Product = {\n id: string\n name: string\n sku: string\n category: string\n price: number\n stock: number\n status: \"active\" | \"low_stock\" | \"out_of_stock\" | \"archived\"\n}\n\n// ---------- Mock Data ----------\nconst data: Product[] = [\n { id: \"1\", name: \"Wireless Mouse\", sku: \"SKU-001\", category: \"Electronics\", price: 29.99, stock: 50, status: \"active\" },\n { id: \"2\", name: \"Mechanical Keyboard\", sku: \"SKU-002\", category: \"Electronics\", price: 89.99, stock: 30, status: \"active\" },\n { id: \"3\", name: \"USB-C Hub\", sku: \"SKU-003\", category: \"Accessories\", price: 49.99, stock: 15, status: \"low_stock\" },\n { id: \"4\", name: \"Laptop Stand\", sku: \"SKU-004\", category: \"Accessories\", price: 39.99, stock: 0, status: \"out_of_stock\" },\n { id: \"5\", name: \"Noise Cancelling Earbuds\", sku: \"SKU-005\", category: \"Audio\", price: 199.99, stock: 100, status: \"active\" },\n { id: \"6\", name: \"HDMI Cable 6ft\", sku: \"SKU-006\", category: \"Cables\", price: 12.99, stock: 200, status: \"active\" },\n { id: \"7\", name: \"Webcam 4K\", sku: \"SKU-007\", category: \"Electronics\", price: 129.99, stock: 8, status: \"low_stock\" },\n { id: \"8\", name: \"Mouse Pad XL\", sku: \"SKU-008\", category: \"Accessories\", price: 24.99, stock: 0, status: \"out_of_stock\" },\n { id: \"9\", name: \"Bluetooth Speaker\", sku: \"SKU-009\", category: \"Audio\", price: 59.99, stock: 45, status: \"active\" },\n { id: \"10\", name: \"Desk Lamp LED\", sku: \"SKU-010\", category: \"Accessories\", price: 34.99, stock: 12, status: \"low_stock\" },\n]\n\n// ---------- Status Badge ----------\nconst statusLabels: Record = {\n active: \"Active\",\n low_stock: \"Low Stock\",\n out_of_stock: \"Out of Stock\",\n archived: \"Archived\",\n}\n\nconst statusStyles: Record = {\n active: \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100 border-green-200 dark:border-green-800\",\n low_stock: \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800\",\n out_of_stock: \"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100 border-red-200 dark:border-red-800\",\n archived: \"bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-800\",\n}\n\n// ---------- Columns ----------\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"name\",\n header: ({ column }) => (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Product\n \n \n ),\n cell: ({ row }) => (\n

\n {row.original.name.charAt(0).toUpperCase()}\n

{row.getValue(\"name\")}

{row.original.category}

\n ),\n },\n {\n accessorKey: \"sku\",\n header: \"SKU\",\n },\n {\n accessorKey: \"category\",\n header: \"Category\",\n },\n {\n accessorKey: \"price\",\n header: ({ column }) => (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Price\n \n \n ),\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"price\"))\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n return

{formatted}

\n },\n },\n {\n accessorKey: \"stock\",\n header: ({ column }) => (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n className=\"text-right\"\n >\n Stock\n \n \n ),\n cell: ({ row }) =>

{row.getValue(\"stock\")}

,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => {\n const status = row.getValue(\"status\") as Product[\"status\"]\n return (\n \n {statusLabels[status]}\n \n )\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const product = row.original\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(product.id)}>\n Copy product ID\n \n \n Edit\n Duplicate\n \n Delete\n \n \n )\n },\n },\n]\n\n// ---------- Component ----------\nexport function ProductsTable() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState([])\n const [columnVisibility, setColumnVisibility] = React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\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 state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n

\n {/* Header */}\n

Products

\n \n

\n\n {/* Filters */}\n

\n \n \n table.getColumn(\"name\")?.setFilterValue(event.target.value)\n }\n className=\"pl-8 max-w-sm\"\n />\n

\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n

\n\n {/* Table */}\n

\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n

\n\n {/* Pagination */}\n

\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n

Rows per page

\n {\n table.setPageSize(Number(e.target.value))\n }}\n >\n {[5, 10, 20, 30, 40, 50].map((pageSize) => (\n \n ))}\n \n

\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n

\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n

\n )\n}\n```\n\n---\n\n## 🚀 Usage\n\nCreate a page to display the table, e.g. `app/products/page.tsx`:\n\n```tsx\nimport { ProductsTable } from \"@/components/ProductsTable\"\n\nexport default function ProductsPage() {\n return (\n

\n \n

\n )\n}\n```\n\n---\n\n## ✨ Features Included\n\n| Feature | Description |\n|---------|-------------|\n| **Sorting** | Click on column headers (Product, Price, Stock) |\n| **Search** | Filter by product name |\n| **Column Visibility** | Toggle columns via the \"Columns\" dropdown |\n| **Row Selection** | Checkbox in each row & header |\n| **Status Badges** | Color-coded (Active, Low Stock, Out of Stock) |\n| **Actions Menu** | Three-dot menu with Copy ID, Edit, Duplicate, Delete |\n| **Pagination** | Page navigation, page size selector, and \"Go to page\" controls |\n| **Responsive Design** | Built with shadcn/ui's dark mode + Tailwind utilities |\n\nLet me know if you'd like any modifications to the design or functionality!","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"Thinking. 1. **Analyze the Request:**\n * Goal: Create a UI for a list of products in a table format.\n * Technology: Next.js, shadcn/ui.\n * Output Request: \"please provide the designed image\".\n * *Wait.* I am an AI text model. I cannot *directly* generate images in the standard chat interface, but I can generate SVG code, or write a detailed prompt for an image generator, or, most importantly, write the *code* for the UI. The user is asking for the \"designed image\" which might mean a code snippet that renders a beautiful table, or they might literally want an image. I should clarify.\n * *Self-Correction on Image Generation:* Standard LLM interfaces don't have DALL-E/Imagen built-in unless they are multimodal. I can write a very detailed description of the UI, or I can write the React/JSX code for the table using shadcn. I can also generate an SVG to represent the table visually inside the code block.\n * *Let's provide the best possible outcome:* A comprehensive code example using shadcn/ui's table, data-table, or a custom solution. I will also include a detailed text description of the design, and optionally an SVG representation of the table.\n\n2. **Deconstructing the Tech Stack (Next.js + shadcn/ui):**\n * shadcn/ui provides `table`, `data-table`, `badge`, `avatar`, `dropdown-menu`, `button`, `input` components.\n * For a product list, a typical table has: Product Name, SKU, Category, Price, Stock, Status, Actions.\n * Best practices: Pagination, Search, Filtering, Sorting.\n * I can use the `@tanstack/react-table` library (which is the foundation of `shadcn/ui`'s data table) or just the basic `table` component for a static example.\n\n3. **Designing the UI:**\n * **Header:** Title \"Products\" with a \"Add Product\" button.\n * **Search Bar:** Input field for filtering products.\n * **Table:**\n * Columns: Image, Product Name, SKU, Category, Price, Stock, Status, Actions.\n * Rows: Data mapped.\n * Status: `Badge` component (e.g., \"Active\", \"Draft\", \"Archived\").\n * Actions: `DropdownMenu` (Edit, Duplicate, Archive, Delete).\n * **Pagination:** `Pagination` component or shadcn's `DataTablePagination`.\n\n4. **Code Structure (Next.js App Router, shadcn):**\n * Install dependencies: `@tanstack/react-table`, `lucide-react`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-avatar`, `@radix-ui/react-badge`, etc.\n * Create `components/ui/data-table.tsx` (if using the advanced data table).\n * Create `components/ProductsTable.tsx`.\n\n5. **Drafting the SVG (for the image request):**\n * Since I can't literally output a `png`/`jpg` image file, I will generate an SVG image that represents the table. This is the closest I can get to \"providing the designed image\" directly in the text output.\n * *SVG Design:*\n * Background: White/Light Gray.\n * Header: \"Products\" text, \"Add Product\" button.\n * Search bar.\n * Table grid: Header row (light gray background), data rows.\n * Columns: Product Name (with thumbnail), Status (green/red badges), Price, Actions (dots).\n * Pagination at the bottom.\n * *Wait, generating a complex SVG from scratch that looks like a beautifully designed shadcn table is quite tedious and might not be pixel-perfect. Is it better to just write the code and describe the image?*\n Yes, writing the code is almost always more valuable to a developer. I will provide the code AND a detailed text description of the design, and *also* generate an SVG mockup to give them a visual idea.\n\n *Let's refine the SVG approach:*\n I will create a high-fidelity SVG mockup of the table.\n\n *Let's refine the code approach:*\n I will provide the code for the `ProductsTable` component.\n\n *Let's bridge the gap:*\n \"I can't generate raster images (PNG/JPG) directly, but I can provide you with the exact code to build this UI, along with a detailed visual description and an SVG mockup of the design.\"\n\n *Wait, some users expect a literal image link. Can I generate a URL?*\n No, I cannot generate URLs to images. I am an AI text model. My best option is to create the SVG inline.\n\n *Let's create the SVG mockup. It's a great way to visualize the design directly in the chat.*\n\n *Let's write the code for `ProductsTable.tsx`.*\n\n **Step 1: SVG Mockup Design**\n * Width: 900, Height: 500\n * Background: #f8fafc (slate-50)\n * Header: \"Products\" (text, bold, 20px), \"Add Product\" button (filled, indigo-600).\n * Search/Filter: Input placeholder \"Search products...\", Filter button.\n * Table:\n * Header: #f1f5f9 (slate-100). Text: \"Product\", \"SKU\", \"Category\", \"Price\", \"Stock\", \"Status\", \"Actions\".\n * Row 1: \"Wireless Mouse\", \"SKU-001\", \"Electronics\", \"$29.99\", \"50\", Badge \"Active\" (green), `...`\n * Row 2: \"Mechanical Keyboard\", \"SKU-002\", \"Electronics\", \"$89.99\", \"30\", Badge \"Active\", ...\n * Row 3: \"USB-C Hub\", \"SKU-003\", \"Accessories\", \"$49.99\", \"15\", Badge \"Low Stock\" (yellow), ...\n * Row 4: \"Laptop Stand\", \"SKU-004\", \"Accessories\", \"$39.99\", \"0\", Badge \"Out of Stock\" (red), ...\n * Row 5: \"Noise Cancelling Earbuds\", \"SKU-005\", \"Audio\", \"$199.99\", \"100\", Badge \"Active\", ...\n * Pagination: \"Rows per page\", \"10\", \"Page 1 of 10\", \"1 2 3 ... 10\", Arrows.\n\n *Generating the SVG carefully for a good visual.*\n ```svg\n \n ```\n *Wait, SVG text alignment is tricky. Let's adjust coordinates.*\n Actually, let's trace the SVG visually to make sure it looks good.\n Header: x=0, y=0, width=1000, height=70. Text \"Products\" at x=40, y=45.\n Button \"Add Product\" at x=830, y=20, width=130, height=36.\n Search box: x=40, y=90, width=300, height=40.\n Table header: x=40, y=150, width=920, height=40.\n Column widths: Product (200), SKU (140), Category (140), Price (110), Stock (90), Status (90), Actions (50).\n Product: x=60. SKU: x=260. Category: x=400. Price: x=540. Stock: x=650. Status: x=740. Actions: x=860.\n Rows: y=190, y=250, y=310, y=370, y=430. Height=60.\n Row 1: Product text at x=100, y=215. Circle at x=70, y=220.\n Let's keep the SVG structure. It's a beautiful representation.\n\n **Step 2: The Code**\n The user specifically asked for a table using shadcn for Next.js.\n\n Let's write the `ProductsTable.tsx` component.\n\n ```typescript\n import {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n } from \"@/components/ui/table\"\n import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n } from \"@/components/ui/dropdown-menu\"\n import { Button } from \"@/components/ui/button\"\n import { Input } from \"@/components/ui/input\"\n import { Badge } from \"@/components/ui/badge\"\n import {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n } from \"@/components/ui/pagination\"\n import { MoreHorizontal, Plus, Search } from \"lucide-react\"\n import Image from \"next/image\"\n\n // Define the Product type\n type Product = {\n id: string\n name: string\n sku: string\n category: string\n price: number\n stock: number\n status: \"active\" | \"low_stock\" | \"out_of_stock\" | \"archived\"\n image?: string // URL\n }\n\n // Mock data\n const products: Product[] = [\n {\n id: \"1\",\n name: \"Wireless Mouse\",\n sku: \"SKU-001\",\n category: \"Electronics\",\n price: 29.99,\n stock: 50,\n status: \"active\",\n },\n // ... add other products\n ]\n\n // Status badge component\n const StatusBadge = ({ status }: { status: Product[\"status\"] }) => {\n const variants: Record = {\n active: \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100\",\n low_stock: \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100\",\n out_of_stock: \"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100\",\n archived: \"bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100\",\n }\n const labels: Record = {\n active: \"Active\",\n low_stock: \"Low Stock\",\n out_of_stock: \"Out of Stock\",\n archived: \"Archived\",\n }\n return (\n \n {labels[status]}\n \n )\n }\n\n export function ProductsTable() {\n return (\n

\n {/* Header */}\n

Products

\n \n

\n\n {/* Filters */}\n

\n \n \n

\n\n {/* Table */}\n

\n \n \n \n Product\n SKU\n Category\n Price\n Stock\n Status\n Actions\n \n \n \n {products.map((product) => (\n \n \n

\n {/* Image placeholder */}\n {/* {product.name}

*/}\n {product.name.charAt(0).toUpperCase()}\n

{product.name}

{product.category}

\n \n {product.sku}\n {product.category}\n ${product.price.toFixed(2)}\n {product.stock}\n \n \n \n \n \n \n \n \n \n Actions\n Edit\n Duplicate\n \n \n Delete\n \n \n \n \n \n ))}\n \n

\n\n {/* Pagination */}\n

\n Showing 1 to 5 of 50 results\n

\n \n \n \n \n \n \n 1\n \n \n 2\n \n \n 3\n \n \n \n \n \n \n \n \n \n

\n )\n }\n ```\n\n *Wait, the `StatusBadge` using className directly is not exactly how shadcn `Badge` works out of the box with variants. The `Badge` component has `variant` prop. Let's use `variant: \"secondary\"`, `variant: \"destructive\"`, `variant: \"outline\"`, etc., or just use the `className` prop for styling. The `className` approach is fine, but I can also create a `status` variant map. Let's stick to the `className` approach for the status badge to make it colorful, or use the `variant` prop with a custom class.*\n\n *Better approach for StatusBadge using shadcn Badge:*\n ```tsx\n \n ```\n *Wait, shadcn's default Badge doesn't have a `success` or `warning` variant out of the box. It has `default`, `secondary`, `destructive`, `outline`.*\n *Let's modify the `Badge` component to add `success` and `warning` variants, or just use the `className` prop. It's very common to customize the Badge component in shadcn.*\n\n *Actually, let's just use the `className` directly for the status badge, or create a custom badge component. The `className` approach is clean and doesn't require modifying the library.*\n\n *Let's refine the `StatusBadge` using `cn()` and tailwind classes.*\n ```tsx\n const statusVariants: Record = {\n active: \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100 border-green-200 dark:border-green-800\",\n low_stock: \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800\",\n out_of_stock: \"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100 border-red-200 dark:border-red-800\",\n archived: \"bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-800\",\n }\n ```\n\n **Step 3: Full Code and Explanation**\n\n Let's compile the full response.\n\n **Assumptions:**\n - The user is using Next.js 13+ (App Router or Pages Router, shadcn works with both).\n - The user has shadcn/ui installed.\n - The user wants a functional, modern, and beautiful table.\n\n **Response Structure:**\n 1. **Acknowledge Limitation:** I'm an AI text model, I can't directly generate a PNG/JPG, but I can provide an SVG mockup that renders perfectly in the browser/markdown viewer, and the exact code.\n 2. **SVG Mockup:** Provide the SVG code. (I will render it in a code block, but markdown usually renders SVG from image tags. Let's use an `` tag with a `data:image/svg+xml` or just provide the SVG code and ask them to save it as an `.svg` file. Actually, `data:image/svg+xml` is the best way to display it directly.\n ```svg\n \n ```\n *Wait, does Markdown render SVG inside `` tags? Yes, but it's safer to just provide the raw SVG code. Let's provide the SVG code block and the React code block.*\n\n 3. **Installation Steps:**\n ```bash\n npx shadcn-ui@latest add table\n npx shadcn-ui@latest add badge\n npx shadcn-ui@latest add button\n npx shadcn-ui@latest add input\n npx shadcn-ui@latest add dropdown-menu\n npx shadcn-ui@latest add pagination\n ```\n\n 4. **Component Code (`ProductsTable.tsx`):**\n Provide the full code.\n *Include the `StatusBadge` component.*\n *Use `@tanstack/react-table` (optional, but good for dynamic data). Let's keep it simple with static data for clarity, or use `@tanstack/react-table` for a more robust solution. The user asked for \"list of products as a table format\". Providing a `@tanstack/react-table` example is industry standard for shadcn.*\n\n *Choosing `@tanstack/react-table`:*\n It's much more powerful and scalable. I will provide a version using `@tanstack/react-table` as it's the standard way to build complex tables in shadcn.\n\n ```tsx\n \"use client\"\n\n import * as React from \"react\"\n import {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n } from \"@tanstack/react-table\"\n import { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\n import { Button } from \"@/components/ui/button\"\n import { Checkbox } from \"@/components/ui/checkbox\"\n import {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n } from \"@/components/ui/dropdown-menu\"\n import { Input } from \"@/components/ui/input\"\n import {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n } from \"@/components/ui/table\"\n import { Badge } from \"@/components/ui/badge\"\n\n // ... (rest of the code)\n ```\n\n Let's draft the `ProductsTable.tsx` with `@tanstack/react-table`.\n\n ```tsx\n \"use client\"\n\n import * as React from \"react\"\n import {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n } from \"@tanstack/react-table\"\n import { ArrowUpDown, MoreHorizontal, Plus, Search } from \"lucide-react\"\n\n import { Button } from \"@/components/ui/button\"\n import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n } from \"@/components/ui/dropdown-menu\"\n import { Input } from \"@/components/ui/input\"\n import {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n } from \"@/components/ui/table\"\n import { Badge } from \"@/components/ui/badge\"\n import {\n Pagination,\n PaginationContent,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n } from \"@/components/ui/pagination\"\n\n type Product = {\n id: string\n name: string\n sku: string\n category: string\n price: number\n stock: number\n status: \"active\" | \"low_stock\" | \"out_of_stock\" | \"archived\"\n }\n\n const statusLabels: Record = {\n active: \"Active\",\n low_stock: \"Low Stock\",\n out_of_stock: \"Out of Stock\",\n archived: \"Archived\",\n }\n\n const statusVariants: Record = {\n active: \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100 border-green-200 dark:border-green-800\",\n low_stock: \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800\",\n out_of_stock: \"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100 border-red-200 dark:border-red-800\",\n archived: \"bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-800\",\n }\n\n const data: Product[] = [\n { id: \"1\", name: \"Wireless Mouse\", sku: \"SKU-001\", category: \"Electronics\", price: 29.99, stock: 50, status: \"active\" },\n { id: \"2\", name: \"Mechanical Keyboard\", sku: \"SKU-002\", category: \"Electronics\", price: 89.99, stock: 30, status: \"active\" },\n { id: \"3\", name: \"USB-C Hub\", sku: \"SKU-003\", category: \"Accessories\", price: 49.99, stock: 15, status: \"low_stock\" },\n { id: \"4\", name: \"Laptop Stand\", sku: \"SKU-004\", category: \"Accessories\", price: 39.99, stock: 0, status: \"out_of_stock\" },\n { id: \"5\", name: \"Noise Cancelling Earbuds\", sku: \"SKU-005\", category: \"Audio\", price: 199.99, stock: 100, status: \"active\" },\n { id: \"6\", name: \"HDMI Cable 6ft\", sku: \"SKU-006\", category: \"Cables\", price: 12.99, stock: 200, status: \"active\" },\n { id: \"7\", name: \"Webcam 4K\", sku: \"SKU-007\", category: \"Electronics\", price: 129.99, stock: 8, status: \"low_stock\" },\n { id: \"8\", name: \"Mouse Pad XL\", sku: \"SKU-008\", category: \"Accessories\", price: 24.99, stock: 0, status: \"out_of_stock\" },\n { id: \"9\", name: \"Bluetooth Speaker\", sku: \"SKU-009\", category: \"Audio\", price: 59.99, stock: 45, status: \"active\" },\n { id: \"10\", name: \"Desk Lamp LED\", sku: \"SKU-010\", category: \"Accessories\", price: 34.99, stock: 12, status: \"low_stock\" },\n ]\n\n export const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"name\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Product\n \n \n )\n },\n cell: ({ row }) =>

{row.getValue(\"name\")}

,\n },\n {\n accessorKey: \"sku\",\n header: \"SKU\",\n },\n {\n accessorKey: \"category\",\n header: \"Category\",\n },\n {\n accessorKey: \"price\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n className=\"text-right\"\n >\n Price\n \n \n )\n },\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"price\"))\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n return

{formatted}

\n },\n },\n {\n accessorKey: \"stock\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n className=\"text-right\"\n >\n Stock\n \n \n )\n },\n cell: ({ row }) =>

{row.getValue(\"stock\")}

,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => {\n const status = row.getValue(\"status\") as Product[\"status\"]\n return (\n \n {statusLabels[status]}\n \n )\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const product = row.original\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(product.id)}\n >\n Copy product ID\n \n \n Edit\n Duplicate\n \n \n Delete\n \n \n \n )\n },\n },\n ]\n\n export function ProductsTable() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState([])\n const [columnVisibility, setColumnVisibility] = React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\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 state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n

\n {/* Header */}\n

Products

\n \n

\n\n {/* Filters */}\n

\n \n \n table.getColumn(\"name\")?.setFilterValue(event.target.value)\n }\n className=\"pl-8 max-w-sm\"\n />\n

\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n

\n\n {/* Table */}\n

\n\n {/* Pagination */}\n

\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n

\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n

\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n

\n )\n }\n ```\n\n Wait, I used `VisibilityState` without importing it. Let's fix the imports.\n ```tsx\n import { SortingState, ColumnFiltersState, VisibilityState } from \"@tanstack/react-table\"\n ```\n\n Also, I need to make sure the `Badge` component is properly imported and the `StatusBadge` works.\n\n Let's refine the `StatusBadge` logic. The `variant` prop of the Badge component in shadcn is one of `default | secondary | destructive | outline`. We can use the `className` prop to override the colors.\n\n Actually, let's create a custom Badge variant. Many shadcn users add `success` and `warning` variants to their `Badge` component.\n\n ```tsx\n // In components/ui/badge.tsx\n const badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n success:\n \"border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100\",\n warning:\n \"border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n )\n ```\n\n Wait, I should provide the code that aligns with the default shadcn installation, but show how to add these variants. It's better to just use the `className` prop on the `Badge` component, as it's a standard way to customize components in shadcn.\n\n ```tsx\n \n Active\n \n ```\n\n This is the safest and most compatible way.\n\n **Let's structure the final code.**\n\n Include the `Checkbox` import for the `select` column.\n ```bash\n npx shadcn-ui@latest add checkbox\n ```\n\n **Final check of the code.**\n\n ```tsx\n // components/ProductsTable.tsx\n \"use client\"\n\n import * as React from \"react\"\n import {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n } from \"@tanstack/react-table\"\n import { ArrowUpDown, ChevronDown, MoreHorizontal, Plus, Search } from \"lucide-react\"\n\n import { Button } from \"@/components/ui/button\"\n import { Checkbox } from \"@/components/ui/checkbox\"\n import {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n } from \"@/components/ui/dropdown-menu\"\n import { Input } from \"@/components/ui/input\"\n import {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n } from \"@/components/ui/table\"\n import { Badge } from \"@/components/ui/badge\"\n\n // ... data and columns\n ```\n\n Let's add the SVG mockup at the beginning of the response.\n\n ```svg\n \n ```\n\n I will provide the SVG code inside a markdown code block with the `svg` or `xml` language identifier. The user can copy this and save it as an `.svg` file to view the design.\n\n **Summary of the plan:**\n 1. Apologize for not being able to generate a direct image, provide SVG.\n 2. Provide the SVG code.\n 3. Provide the exact Next.js + shadcn code.\n 4. Explain the steps to set it up.\n\n **Let's refine the SVG to make it look even better.**\n\n The SVG I drafted earlier is good. Let's make the text alignment perfect.\n Header row:\n Product: x=60, width=200\n SKU: x=260, width=140\n Category: x=400, width=140\n Price: x=540, width=110\n Stock: x=650, width=90\n Status: x=740, width=90\n Actions: x=860, width=50\n\n Let's adjust the SVG coordinates to be perfectly aligned.\n Row 1: y=190\n Product row: text \"Wireless Mouse\" at x=100, y=215.\n SKU: \"SKU-001\" at x=260, y=220.\n Category: \"Electronics\" at x=400, y=220.\n Price: \"$29.99\" at x=540, y=220.\n Stock: \"50\" at x=650, y=220.\n Status Badge: rect x=730, y=208, width=60, height=22, rx=11.\n Actions: circles at x=870, y=220.\n\n *Let's check the SVG text alignment.*\n For the header, text baseline is y=175.\n For the data rows, text baseline is y=220.\n\n Let's add checkboxes to the SVG.\n Checkbox in header: rect x=45, y=162, width=14, height=14, rx=2.\n Checkbox in row 1: rect x=45, y=222, width=14, height=14, rx=2.\n\n Let's refine the SVG.\n ```svg\n \n ```\n This SVG is pretty solid. I will provide it.\n\n **Now, let's refine the React code.**\n\n I will provide the full `ProductsTable.tsx` component. I will also provide the `page.tsx` where it is used.\n\n `app/products/page.tsx`\n ```tsx\n import { ProductsTable } from \"@/components/ProductsTable\"\n\n export default function ProductsPage() {\n return (\n

\n \n

\n )\n }\n ```\n\n **Dependencies:**\n Make sure to run:\n ```bash\n npx shadcn-ui@latest init\n npx shadcn-ui@latest add table\n npx shadcn-ui@latest add badge\n npx shadcn-ui@latest add button\n npx shadcn-ui@latest add input\n npx shadcn-ui@latest add dropdown-menu\n npx shadcn-ui@latest add checkbox\n npx shadcn-ui@latest add pagination\n npm install @tanstack/react-table\n ```\n\n **Addressing the \"designed image\" request:**\n I will clearly state that I cannot generate a rendered image in the chat, but I can provide an SVG representation of the design, which they can open in a browser. I will also provide the exact code to achieve this design.\n\n \"I'm an AI text model, so I can't directly output a PNG/JPG image file, but I can generate an SVG mockup of the design and provide you with the exact React/Next.js code using shadcn/ui to build it. The SVG code below is a visual representation of the final product table.\"\n\n Let's double check the SVG code for any syntax errors.\n `viewBox=\"0 0 1000 600\"` - correct.\n `xmlns=\"http://www.w3.org/2000/svg\"` - correct.\n Colors: `#f8fafc`, `#ffffff`, `#4f46e5`, `#e2e8f0`, etc. - correct.\n Text alignment looks good.\n\n Let's review the React code for any issues.\n - `@tanstack/react-table` types: `useReactTable` takes `ColumnDef[]`. The `columns` array is correctly typed.\n - `getCoreRowModel`, `getPaginationRowModel`, etc. are correctly imported and used.\n - The `StatusBadge` styling is inline with Tailwind classes.\n - Search functionality: `table.getColumn(\"name\")?.getFilterValue()` and `setFilterValue`. This is correct.\n - The `columns` dropdown is implemented correctly.\n - Pagination uses `table.getState().pagination.pageIndex + 1` and `table.getPageCount()`.\n\n I will format the code nicely and provide the complete files.\n\n **Self-Correction on `Checkbox` import:**\n Yes, I used `Checkbox` from `@/components/ui/checkbox`. It needs to be added.\n\n **Final check on the response:**\n - SVG mockup provided.\n - Full component code provided.\n - Setup instructions provided.\n - Clear explanation of my limitations and what I can offer.\n\n Looks solid. Ready to generate.","reasoning_details":[{"type":"reasoning.text","text":"Thinking. 1. **Analyze the Request:**\n * Goal: Create a UI for a list of products in a table format.\n * Technology: Next.js, shadcn/ui.\n * Output Request: \"please provide the designed image\".\n * *Wait.* I am an AI text model. I cannot *directly* generate images in the standard chat interface, but I can generate SVG code, or write a detailed prompt for an image generator, or, most importantly, write the *code* for the UI. The user is asking for the \"designed image\" which might mean a code snippet that renders a beautiful table, or they might literally want an image. I should clarify.\n * *Self-Correction on Image Generation:* Standard LLM interfaces don't have DALL-E/Imagen built-in unless they are multimodal. I can write a very detailed description of the UI, or I can write the React/JSX code for the table using shadcn. I can also generate an SVG to represent the table visually inside the code block.\n * *Let's provide the best possible outcome:* A comprehensive code example using shadcn/ui's table, data-table, or a custom solution. I will also include a detailed text description of the design, and optionally an SVG representation of the table.\n\n2. **Deconstructing the Tech Stack (Next.js + shadcn/ui):**\n * shadcn/ui provides `table`, `data-table`, `badge`, `avatar`, `dropdown-menu`, `button`, `input` components.\n * For a product list, a typical table has: Product Name, SKU, Category, Price, Stock, Status, Actions.\n * Best practices: Pagination, Search, Filtering, Sorting.\n * I can use the `@tanstack/react-table` library (which is the foundation of `shadcn/ui`'s data table) or just the basic `table` component for a static example.\n\n3. **Designing the UI:**\n * **Header:** Title \"Products\" with a \"Add Product\" button.\n * **Search Bar:** Input field for filtering products.\n * **Table:**\n * Columns: Image, Product Name, SKU, Category, Price, Stock, Status, Actions.\n * Rows: Data mapped.\n * Status: `Badge` component (e.g., \"Active\", \"Draft\", \"Archived\").\n * Actions: `DropdownMenu` (Edit, Duplicate, Archive, Delete).\n * **Pagination:** `Pagination` component or shadcn's `DataTablePagination`.\n\n4. **Code Structure (Next.js App Router, shadcn):**\n * Install dependencies: `@tanstack/react-table`, `lucide-react`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-avatar`, `@radix-ui/react-badge`, etc.\n * Create `components/ui/data-table.tsx` (if using the advanced data table).\n * Create `components/ProductsTable.tsx`.\n\n5. **Drafting the SVG (for the image request):**\n * Since I can't literally output a `png`/`jpg` image file, I will generate an SVG image that represents the table. This is the closest I can get to \"providing the designed image\" directly in the text output.\n * *SVG Design:*\n * Background: White/Light Gray.\n * Header: \"Products\" text, \"Add Product\" button.\n * Search bar.\n * Table grid: Header row (light gray background), data rows.\n * Columns: Product Name (with thumbnail), Status (green/red badges), Price, Actions (dots).\n * Pagination at the bottom.\n * *Wait, generating a complex SVG from scratch that looks like a beautifully designed shadcn table is quite tedious and might not be pixel-perfect. Is it better to just write the code and describe the image?*\n Yes, writing the code is almost always more valuable to a developer. I will provide the code AND a detailed text description of the design, and *also* generate an SVG mockup to give them a visual idea.\n\n *Let's refine the SVG approach:*\n I will create a high-fidelity SVG mockup of the table.\n\n *Let's refine the code approach:*\n I will provide the code for the `ProductsTable` component.\n\n *Let's bridge the gap:*\n \"I can't generate raster images (PNG/JPG) directly, but I can provide you with the exact code to build this UI, along with a detailed visual description and an SVG mockup of the design.\"\n\n *Wait, some users expect a literal image link. Can I generate a URL?*\n No, I cannot generate URLs to images. I am an AI text model. My best option is to create the SVG inline.\n\n *Let's create the SVG mockup. It's a great way to visualize the design directly in the chat.*\n\n *Let's write the code for `ProductsTable.tsx`.*\n\n **Step 1: SVG Mockup Design**\n * Width: 900, Height: 500\n * Background: #f8fafc (slate-50)\n * Header: \"Products\" (text, bold, 20px), \"Add Product\" button (filled, indigo-600).\n * Search/Filter: Input placeholder \"Search products...\", Filter button.\n * Table:\n * Header: #f1f5f9 (slate-100). Text: \"Product\", \"SKU\", \"Category\", \"Price\", \"Stock\", \"Status\", \"Actions\".\n * Row 1: \"Wireless Mouse\", \"SKU-001\", \"Electronics\", \"$29.99\", \"50\", Badge \"Active\" (green), `...`\n * Row 2: \"Mechanical Keyboard\", \"SKU-002\", \"Electronics\", \"$89.99\", \"30\", Badge \"Active\", ...\n * Row 3: \"USB-C Hub\", \"SKU-003\", \"Accessories\", \"$49.99\", \"15\", Badge \"Low Stock\" (yellow), ...\n * Row 4: \"Laptop Stand\", \"SKU-004\", \"Accessories\", \"$39.99\", \"0\", Badge \"Out of Stock\" (red), ...\n * Row 5: \"Noise Cancelling Earbuds\", \"SKU-005\", \"Audio\", \"$199.99\", \"100\", Badge \"Active\", ...\n * Pagination: \"Rows per page\", \"10\", \"Page 1 of 10\", \"1 2 3 ... 10\", Arrows.\n\n *Generating the SVG carefully for a good visual.*\n ```svg\n \n ```\n *Wait, SVG text alignment is tricky. Let's adjust coordinates.*\n Actually, let's trace the SVG visually to make sure it looks good.\n Header: x=0, y=0, width=1000, height=70. Text \"Products\" at x=40, y=45.\n Button \"Add Product\" at x=830, y=20, width=130, height=36.\n Search box: x=40, y=90, width=300, height=40.\n Table header: x=40, y=150, width=920, height=40.\n Column widths: Product (200), SKU (140), Category (140), Price (110), Stock (90), Status (90), Actions (50).\n Product: x=60. SKU: x=260. Category: x=400. Price: x=540. Stock: x=650. Status: x=740. Actions: x=860.\n Rows: y=190, y=250, y=310, y=370, y=430. Height=60.\n Row 1: Product text at x=100, y=215. Circle at x=70, y=220.\n Let's keep the SVG structure. It's a beautiful representation.\n\n **Step 2: The Code**\n The user specifically asked for a table using shadcn for Next.js.\n\n Let's write the `ProductsTable.tsx` component.\n\n ```typescript\n import {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n } from \"@/components/ui/table\"\n import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n } from \"@/components/ui/dropdown-menu\"\n import { Button } from \"@/components/ui/button\"\n import { Input } from \"@/components/ui/input\"\n import { Badge } from \"@/components/ui/badge\"\n import {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n } from \"@/components/ui/pagination\"\n import { MoreHorizontal, Plus, Search } from \"lucide-react\"\n import Image from \"next/image\"\n\n // Define the Product type\n type Product = {\n id: string\n name: string\n sku: string\n category: string\n price: number\n stock: number\n status: \"active\" | \"low_stock\" | \"out_of_stock\" | \"archived\"\n image?: string // URL\n }\n\n // Mock data\n const products: Product[] = [\n {\n id: \"1\",\n name: \"Wireless Mouse\",\n sku: \"SKU-001\",\n category: \"Electronics\",\n price: 29.99,\n stock: 50,\n status: \"active\",\n },\n // ... add other products\n ]\n\n // Status badge component\n const StatusBadge = ({ status }: { status: Product[\"status\"] }) => {\n const variants: Record = {\n active: \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100\",\n low_stock: \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100\",\n out_of_stock: \"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100\",\n archived: \"bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100\",\n }\n const labels: Record = {\n active: \"Active\",\n low_stock: \"Low Stock\",\n out_of_stock: \"Out of Stock\",\n archived: \"Archived\",\n }\n return (\n \n {labels[status]}\n \n )\n }\n\n export function ProductsTable() {\n return (\n

\n {/* Header */}\n

Products

\n \n

\n\n {/* Filters */}\n

\n \n \n

\n\n {/* Table */}\n

\n \n \n \n Product\n SKU\n Category\n Price\n Stock\n Status\n Actions\n \n \n \n {products.map((product) => (\n \n \n

\n {/* Image placeholder */}\n {/* {product.name}

*/}\n {product.name.charAt(0).toUpperCase()}\n

{product.name}

{product.category}

\n \n {product.sku}\n {product.category}\n ${product.price.toFixed(2)}\n {product.stock}\n \n \n \n \n \n \n \n \n \n Actions\n Edit\n Duplicate\n \n \n Delete\n \n \n \n \n \n ))}\n \n

\n\n {/* Pagination */}\n

\n Showing 1 to 5 of 50 results\n

\n \n \n \n \n \n \n 1\n \n \n 2\n \n \n 3\n \n \n \n \n \n \n \n \n \n

{row.getValue(\"name\")}

{formatted}

{row.getValue(\"stock\")}

,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => {\n const status = row.getValue(\"status\") as Product[\"status\"]\n return (\n \n {statusLabels[status]}\n \n )\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const product = row.original\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(product.id)}\n >\n Copy product ID\n \n \n Edit\n Duplicate\n \n \n Delete\n \n \n \n )\n },\n },\n ]\n\n export function ProductsTable() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState([])\n const [columnVisibility, setColumnVisibility] = React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\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 state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n

\n {/* Header */}\n

Products

\n \n

\n\n {/* Filters */}\n

\n \n \n table.getColumn(\"name\")?.setFilterValue(event.target.value)\n }\n className=\"pl-8 max-w-sm\"\n />\n

\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n

\n\n {/* Table */}\n

\n\n {/* Pagination */}\n

\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n

\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n

\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n

\n \n

sample