{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-11","type":"registry:block","title":"Product inventory table with stock badges and prices","description":"Product inventory table with stock badges and prices","dependencies":[],"registryDependencies":["@reui/badge","button","dropdown-menu","table"],"files":[{"path":"c-table-11.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst products = [\n  {\n    name: \"Ergonomic Desk Chair\",\n    sku: \"FRN-001\",\n    category: \"Furniture\",\n    price: \"$549.00\",\n    stock: 124,\n    stockStatus: \"In Stock\",\n    stockVariant: \"success-light\" as const,\n  },\n  {\n    name: \"Wireless Noise-Canceling Headphones\",\n    sku: \"AUD-042\",\n    category: \"Audio\",\n    price: \"$349.99\",\n    stock: 8,\n    stockStatus: \"Low Stock\",\n    stockVariant: \"warning-light\" as const,\n  },\n  {\n    name: '4K Ultra HD Monitor 32\"',\n    sku: \"DSP-019\",\n    category: \"Displays\",\n    price: \"$799.00\",\n    stock: 0,\n    stockStatus: \"Out of Stock\",\n    stockVariant: \"destructive-light\" as const,\n  },\n  {\n    name: \"Mechanical Keyboard RGB\",\n    sku: \"INP-087\",\n    category: \"Input\",\n    price: \"$179.99\",\n    stock: 56,\n    stockStatus: \"In Stock\",\n    stockVariant: \"success-light\" as const,\n  },\n  {\n    name: \"USB-C Docking Station\",\n    sku: \"ACC-033\",\n    category: \"Accessories\",\n    price: \"$249.00\",\n    stock: 3,\n    stockStatus: \"Low Stock\",\n    stockVariant: \"warning-light\" as const,\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Category</TableHead>\n            <TableHead>Stock</TableHead>\n            <TableHead className=\"text-right\">Price</TableHead>\n            <TableHead className=\"w-10\" />\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {products.map((product) => (\n            <TableRow key={product.sku}>\n              <TableCell>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-muted flex size-9 shrink-0 items-center justify-center rounded-sm\">\n                    <IconPlaceholder\n                      lucide=\"PackageIcon\"\n                      tabler=\"IconPackage\"\n                      hugeicons=\"Package01Icon\"\n                      phosphor=\"PackageIcon\"\n                      remixicon=\"RiBox3Line\"\n                      className=\"text-muted-foreground size-4\"\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                  <div className=\"flex flex-col\">\n                    <span className=\"text-sm font-medium\">{product.name}</span>\n                    <span className=\"text-muted-foreground truncate font-mono text-xs\">\n                      {product.sku}\n                    </span>\n                  </div>\n                </div>\n              </TableCell>\n              <TableCell className=\"text-muted-foreground text-sm\">\n                {product.category}\n              </TableCell>\n              <TableCell>\n                <div className=\"flex items-center gap-2\">\n                  <Badge variant={product.stockVariant} size=\"sm\">\n                    {product.stockStatus}\n                  </Badge>\n                  <span className=\"text-muted-foreground text-xs\">\n                    ({product.stock})\n                  </span>\n                </div>\n              </TableCell>\n              <TableCell className=\"text-right text-sm font-medium\">\n                {product.price}\n              </TableCell>\n              <TableCell>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={\n                      <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Restock</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem variant=\"destructive\">\n                      Archive\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}","target":"components/examples/c-table-11.tsx"}],"meta":{"order":11,"gridSize":1,"label":"Inventory"}}