table-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-example",
  "title": "Table",
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "input",
    "select",
    "table",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-vega/examples/table-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-vega/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}