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/base-nova/examples/table-example.tsx",
      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/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\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=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\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\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=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\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\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=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\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\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\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          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\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"
}