{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table",
  "description": "A data table for rows of items with the same fields, like invoices or users.",
  "dependencies": [],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/table.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: table. Managed by BlankUI. Read table.md before editing.\nimport type { ComponentProps } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A data table. Scrolls sideways on small screens.\n *\n * @example\n * <Table>\n *   <TableCaption>Recent invoices</TableCaption>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Invoice</TableHead>\n *       <TableHead className=\"text-right\">Amount</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow>\n *       <TableCell>INV-001</TableCell>\n *       <TableCell className=\"text-right\">$250.00</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n */\nexport function Table({ className, ...props }: ComponentProps<\"table\">) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto rounded-lg border\">\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\n/** The header rows. Holds TableRow with TableHead cells. */\nexport function TableHeader({ className, ...props }: ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"bg-muted [&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The body rows. */\nexport function TableBody({ className, ...props }: ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Totals or summary rows. */\nexport function TableFooter({ className, ...props }: ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\n/** One row. */\nexport function TableRow({ className, ...props }: ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-surface-hover data-[state=selected]:bg-muted\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A header cell. Defaults to `scope=\"col\"`. */\nexport function TableHead({ className, scope = \"col\", ...props }: ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      scope={scope}\n      className={cn(\n        \"h-10 px-4 text-left align-middle font-medium whitespace-nowrap text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A data cell. */\nexport function TableCell({ className, ...props }: ComponentProps<\"td\">) {\n  return <td data-slot=\"table-cell\" className={cn(\"p-4 align-middle\", className)} {...props} />\n}\n\n/** Describes the table. Shown below it. */\nexport function TableCaption({ className, ...props }: ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"py-3 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/table.md",
      "type": "registry:ui",
      "content": "---\nname: table\ntitle: Table\ndescription: A data table for rows of items with the same fields, like invoices or users.\ncategory: display\nwhenToUse:\n  - Rows of records with the same columns that people compare or scan.\nwhenNotToUse:\n  - when: Laying out a page in columns.\n    use: layout\n  - when: A few items with different content each.\n    use: card\nrelated: [card, layout]\nrequiredParts:\n  [Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableFooter]\nantiPatterns:\n  - avoid: \"A grid of divs that looks like a table\"\n    instead: \"<Table> so screen readers can read rows and columns\"\n  - avoid: \"<table className=...> (a raw table element)\"\n    instead: \"<Table>\"\n  - avoid: \"TableHead cells inside TableBody\"\n    instead: \"TableHead in TableHeader, TableCell in TableBody\"\n---\n\n# Table\n\nPlain HTML table parts with BlankUI styles. For sorting and filtering, use a library like TanStack Table and render with these parts.\n\n## Import\n\n```tsx\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n```\n\n## Example\n\n```tsx\n<Table>\n  <TableCaption>Team members</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Name</TableHead>\n      <TableHead>Role</TableHead>\n      <TableHead className=\"text-right\">Actions</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {members.map((m) => (\n      <TableRow key={m.id}>\n        <TableCell className=\"font-medium\">{m.name}</TableCell>\n        <TableCell>{m.role}</TableCell>\n        <TableCell className=\"text-right\">\n          <Button size=\"sm\" variant=\"ghost\">\n            Edit\n          </Button>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>\n```\n"
    }
  ],
  "docs": "Read components/ui/table.md before using Table. Docs: https://blank.vageshwar.dev/docs/table",
  "meta": {
    "category": "display",
    "requiredParts": [
      "Table",
      "TableHeader",
      "TableBody",
      "TableRow",
      "TableHead",
      "TableCell",
      "TableCaption",
      "TableFooter"
    ],
    "related": [
      "card",
      "layout"
    ]
  }
}