{
"name": "table",
"type": "registry:ui",
"title": "Table",
"description": "Semantic tabular data with structured headers, cells, selection and interactive-row support.",
"registryDependencies": [
"@siteplane/base"
],
"dependencies": [
"@base-ui/react@1.5.0"
],
"files": [
{
"path": "src/components/ui/table.tsx",
"type": "registry:ui",
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { surfaceClassNames } from \"@/components/ui/surface\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TableVariant = \"default\" | \"card\";\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n variant?: TableVariant;\n render?: useRender.ComponentProps<\"div\">[\"render\"];\n};\n\nexport function Table({\n className,\n variant = \"default\",\n render,\n ...props\n}: TableProps): React.ReactElement {\n const defaultProps = {\n children: (\n \n ),\n className: \"relative w-full overflow-x-auto\",\n \"data-slot\": \"table-container\",\n \"data-variant\": variant,\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, {}),\n render,\n });\n}\n\nexport function TableHeader({\n className,\n ...props\n}: React.ComponentProps<\"thead\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function TableBody({\n className,\n ...props\n}: React.ComponentProps<\"tbody\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function TableFooter({\n className,\n ...props\n}: React.ComponentProps<\"tfoot\">): React.ReactElement {\n return (\n tr]:last:border-b-0\",\n className,\n )}\n data-slot=\"table-footer\"\n {...props}\n />\n );\n}\n\nexport function TableRow({\n className,\n ...props\n}: React.ComponentProps<\"tr\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function TableHead({\n className,\n ...props\n}: React.ComponentProps<\"th\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function TableCell({\n className,\n ...props\n}: React.ComponentProps<\"td\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function TableCaption({\n className,\n ...props\n}: React.ComponentProps<\"caption\">): React.ReactElement {\n return (\n \n );\n}\n"
}
],
"categories": [
"data-display"
],
"docs": "# Table\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Table for genuinely tabular, scannable data whose columns need semantic headers and consistent alignment.\n\n## Import\n\n`import { Table } from \"@/components/ui/table\";`\n\n`import { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";`\n\n`variant?: \"default\" | \"card\"`\n\n## Public API\n\n- Compose `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`.\n- `Table` accepts `variant=\"default\" | \"card\"`; the wrapper provides horizontal overflow through its native table container.\n- Set `data-state=\"selected\"` on a selected row. Set `data-interactive=\"true\"` on a clickable row to receive the native pointer and focus-visible treatment.\n- Use Data Table when sorting, accessor columns or controlled table behavior is required.\n\n## Public Motion\n\n- Table has no mount or row-entry animation. Hover, selected and interactive states use quiet tokenized state changes.\n- Reduced motion needs no extra handling because rows do not translate or scale.\n\n## Public Accessibility\n\n- Use real header cells, body cells and a caption when the surrounding context does not already name the table.\n- Interactive rows need keyboard activation and a clear focus target; nested buttons or links must remain independently operable.\n- Loading and empty rows should span the full column count.\n\n## Public Agent Guidance\n\n- Do not use Table as a general layout grid.\n- Use `data-interactive=\"true\"` instead of rebuilding clickable-row cursor and focus styles.\n- Keep sorting and accessor logic in Data Table, not in the primitive Table.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/table)\n\n- [Registry source](https://ui.siteplane.io/r/table.json)\n",
"meta": {
"siteplane:agentContractVersion": 1,
"siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/table",
"siteplane:releaseVersion": "0.1.1",
"siteplane:sourceOwned": true
},
"devDependencies": []
}