{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data table",
  "description": "A filterable members table with a toolbar, ToneBadge status pills, and a per-row actions menu.",
  "registryDependencies": [
    "table",
    "https://www.quilldesignsystem.com/r/tone-badge.json",
    "button",
    "input",
    "https://www.quilldesignsystem.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/blocks/data-table.tsx",
      "content": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n} from '@/components/ui/table'\nimport { ToneBadge, type Tone } from '@/components/ui/tone-badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Icon } from '@/components/ui/icon'\n\nconst rows = [\n  { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Owner', status: 'Active' as const },\n  { name: 'Alan Turing', email: 'alan@example.com', role: 'Admin', status: 'Active' as const },\n  { name: 'Grace Hopper', email: 'grace@example.com', role: 'Editor', status: 'Invited' as const },\n  { name: 'Katherine Johnson', email: 'kat@example.com', role: 'Viewer', status: 'Active' as const },\n]\n\n// Status → pigment, decided once so every row reads from the same vocabulary:\n// moss for a live membership, gold for one still developing.\nconst STATUS_TONE: Record<(typeof rows)[number]['status'], Tone> = { Active: 'moss', Invited: 'gold' }\n\n/** A filterable members table with a toolbar, ToneBadge status pills, and a per-row actions menu. */\nexport function DataTable() {\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center gap-2\">\n        <div className=\"max-w-xs flex-1\">\n          <Input placeholder=\"Filter members…\" />\n        </div>\n        <Button variant=\"outline\" size=\"sm\" className=\"ml-auto\">\n          <Icon name=\"filter_list\" size={16} /> Filter\n        </Button>\n        <Button size=\"sm\">\n          <Icon name=\"add\" size={16} /> Invite\n        </Button>\n      </div>\n      <div className=\"overflow-hidden rounded-lg border border-border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Role</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead className=\"w-10\">\n                <span className=\"sr-only\">Actions</span>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {rows.map((r) => (\n              <TableRow key={r.email}>\n                <TableCell>\n                  <div className=\"flex flex-col\">\n                    <span className=\"font-medium text-foreground\">{r.name}</span>\n                    <span className=\"text-xs text-muted-foreground\">{r.email}</span>\n                  </div>\n                </TableCell>\n                <TableCell className=\"text-muted-foreground\">{r.role}</TableCell>\n                <TableCell>\n                  <ToneBadge tone={STATUS_TONE[r.status]}>{r.status}</ToneBadge>\n                </TableCell>\n                <TableCell>\n                  <Button variant=\"ghost\" size=\"icon\" aria-label={`Actions for ${r.name}`}>\n                    <Icon name=\"more_horiz\" size={18} />\n                  </Button>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/data-table.tsx"
    }
  ],
  "meta": {
    "intent": [
      "data-display"
    ],
    "use_when": "You need a filterable, actionable table of records with tone-mapped status pills and row actions."
  },
  "docs": "A filterable members table with a toolbar, ToneBadge status pills, and a per-row actions menu. Do: Give every icon-only row-action button a per-row aria-label (e.g. \"Actions for Ada Lovelace\"), not a generic one. Don't: Ship a table full of icon-only buttons that all announce as the same unlabeled button to a screen reader. Use activity-feed when you want a read-only chronological list, not sortable/filterable records with row actions. Use kanban when the records are better organized by status columns than by table rows.",
  "categories": [
    "data-display"
  ],
  "type": "registry:block"
}