{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "table", "title": "Table", "author": "Lloyd Richards ", "description": "A responsive table component for displaying tabular data. Uses a simple wrapper component with CSS-based styling for native HTML table elements.", "dependencies": [], "files": [ { "path": "registry/ui/table/table.ts", "content": "import { adoptStyles, html, LitElement, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { tailwind } from \"@/registry/lib/tailwindMixin\";\nimport tableSlottedCss from \"./table.css?inline\";\n\nconst tableStyles = unsafeCSS(tableSlottedCss);\n\n@customElement(\"ui-table\")\nexport class Table extends LitElement {\n override connectedCallback() {\n super.connectedCallback();\n if (this.shadowRoot) {\n adoptStyles(this.shadowRoot, [tailwind, tableStyles]);\n }\n }\n\n override render() {\n return html``;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ui-table\": Table;\n }\n}\n", "type": "registry:ui" }, { "path": "registry/ui/table/table.stories.ts", "content": "import \"./table\";\nimport \"../badge/badge\";\nimport \"../button/button\";\nimport type { Meta, StoryObj } from \"@storybook/web-components-vite\";\nimport { html } from \"lit\";\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\n/**\n * A responsive table component for displaying tabular data.\n */\nconst meta: Meta = {\n title: \"ui/Table\",\n component: \"ui-table\",\n tags: [\"autodocs\"],\n argTypes: {},\n parameters: {\n layout: \"padded\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\n/**\n * The default form of the table with all basic elements.\n */\nexport const Default: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n \n ${invoices.map(\n (invoice) => html`\n \n \n \n \n \n \n `,\n )}\n \n
\n A list of your recent invoices.\n
InvoiceStatusMethodAmount
${invoice.invoice}${invoice.paymentStatus}${invoice.paymentMethod}${invoice.totalAmount}
\n \n `,\n};\n\n/**\n * Table with a footer row for displaying totals or summaries.\n */\nexport const WithFooter: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n \n ${invoices.slice(0, 3).map(\n (invoice) => html`\n \n \n \n \n \n \n `,\n )}\n \n \n \n \n \n \n \n
\n A list of your recent invoices.\n
InvoiceStatusMethodAmount
${invoice.invoice}${invoice.paymentStatus}${invoice.paymentMethod}${invoice.totalAmount}
Total$750.00
\n \n `,\n};\n\n/**\n * Table with badge components for status indicators.\n */\nexport const WithBadges: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n ${invoices.slice(0, 5).map(\n (invoice) => html`\n \n \n \n \n \n \n `,\n )}\n \n
InvoiceStatusMethodAmount
${invoice.invoice}\n \n ${invoice.paymentStatus}\n \n ${invoice.paymentMethod}${invoice.totalAmount}
\n \n `,\n};\n\n/**\n * Table with action buttons in cells.\n */\nexport const WithActions: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n ${invoices.slice(0, 4).map(\n (invoice) => html`\n \n \n \n \n \n \n `,\n )}\n \n
InvoiceStatusAmountActions
${invoice.invoice}${invoice.paymentStatus}${invoice.totalAmount}\n View\n Edit\n
\n \n `,\n};\n\n/**\n * Minimal table without caption or footer.\n */\nexport const Minimal: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser
Bob Johnsonbob@example.comUser
\n \n `,\n};\n\n/**\n * Table demonstrating responsive behavior with many columns.\n */\nexport const Responsive: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${invoices.slice(0, 3).map(\n (invoice) => html`\n \n \n \n \n \n \n \n \n \n `,\n )}\n \n
\n Scroll horizontally on small screens.\n
IDCustomerEmailStatusDateMethodAmount
${invoice.invoice}John Doejohn@example.com${invoice.paymentStatus}2024-01-15${invoice.paymentMethod}${invoice.totalAmount}
\n \n `,\n};\n\n/**\n * Table with checkbox selection in first column.\n * Demonstrates the checkbox styling pattern from shadcn.\n */\nexport const WithCheckboxes: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n ${invoices.slice(0, 4).map(\n (invoice) => html`\n \n \n \n \n \n \n `,\n )}\n \n
\n \n InvoiceStatusAmount
\n \n ${invoice.invoice}${invoice.paymentStatus}${invoice.totalAmount}
\n \n `,\n};\n\n/**\n * Table demonstrating various text alignment options.\n */\nexport const TextAlignment: Story = {\n render: () => html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Left AlignedCenter AlignedRight Aligned
Left contentCenter contentRight content
More leftMore centerMore right
\n \n `,\n};\n", "type": "registry:ui" }, { "path": "registry/ui/table/table.css", "content": "@reference \"../../styles/tailwind.global.css\";\n\n@layer base {\n :host {\n @apply relative w-full overflow-auto block;\n }\n}\n", "type": "registry:ui" } ], "css": { "@layer ui-table": { "ui-table table": { "@apply w-full caption-bottom text-sm": {} }, "ui-table thead": { "@apply [&_tr]:border-b": {} }, "ui-table tbody": { "@apply [&_tr:last-child]:border-0": {} }, "ui-table tfoot": { "@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0": {} }, "ui-table tr": { "@apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors": {} }, "ui-table th": { "@apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]": {} }, "ui-table td": { "@apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]": {} }, "ui-table caption": { "@apply text-muted-foreground mt-4 text-sm": {} } } }, "categories": [ "ui", "table", "web-component" ], "type": "registry:component" }