mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
21 lines
17 KiB
JSON
21 lines
17 KiB
JSON
{
|
|
"$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-nova/examples/table-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-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 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"
|
|
} |