{"name":"table","type":"registry:component","title":"Table","description":"A responsive table component for displaying tabular data. Uses a simple wrapper component with CSS-based styling for native HTML table elements.","categories":["ui","table","web-component"],"author":"Lloyd Richards ","dependencies":[],"files":[{"path":"registry/ui/table/table.ts","type":"registry:ui","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"},{"path":"registry/ui/table/table.stories.ts","type":"registry:ui","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"},{"path":"registry/ui/table/table.css","type":"registry:ui","content":"@reference \"../../styles/tailwind.global.css\";\n\n@layer base {\n :host {\n @apply relative w-full overflow-auto block;\n }\n}\n"}],"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":{}}}}}