{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-with-sticky-header",
  "type": "registry:block",
  "title": "table-with-sticky-header",
  "registryDependencies": [
    "https://retroui.dev/r/table.json"
  ],
  "files": [
    {
      "path": "preview/components/table-with-sticky-header.tsx",
      "content": "import { Badge } from \"@/components/retroui\";\nimport { Table } from \"@/components/retroui/Table\";\n\nconst transactions = [\n  {\n    id: \"TXN001\",\n    date: \"2024-01-15\",\n    description: \"Payment from Customer A\",\n    amount: \"$1,250.00\",\n    category: \"Revenue\",\n  },\n  {\n    id: \"TXN002\",\n    date: \"2024-01-15\",\n    description: \"Office Supplies Purchase\",\n    amount: \"-$85.50\",\n    category: \"Expense\",\n  },\n  {\n    id: \"TXN003\",\n    date: \"2024-01-16\",\n    description: \"Software License Renewal\",\n    category: \"Expense\",\n    amount: \"-$299.99\",\n  },\n  {\n    id: \"TXN004\",\n    date: \"2024-01-16\",\n    description: \"Payment from Customer B\",\n    category: \"Revenue\",\n    amount: \"$750.00\",\n  },\n  {\n    id: \"TXN005\",\n    date: \"2024-01-17\",\n    description: \"Marketing Campaign\",\n    category: \"Expense\",\n    amount: \"-$500.00\",\n  },\n  {\n    id: \"TXN006\",\n    date: \"2024-01-17\",\n    description: \"Freelancer Payment\",\n    category: \"Expense\",\n    amount: \"-$400.00\",\n  },\n  {\n    id: \"TXN007\",\n    date: \"2024-01-18\",\n    description: \"Payment from Customer C\",\n    category: \"Revenue\",\n    amount: \"$2,100.00\",\n  },\n  {\n    id: \"TXN008\",\n    date: \"2024-01-18\",\n    description: \"Equipment Purchase\",\n    category: \"Expense\",\n    amount: \"-$1,200.00\",\n  },\n  {\n    id: \"TXN009\",\n    date: \"2024-01-19\",\n    description: \"Subscription Fee\",\n    category: \"Expense\",\n    amount: \"-$49.99\",\n    status: \"Pending\",\n  },\n  {\n    id: \"TXN010\",\n    date: \"2024-01-19\",\n    description: \"Payment from Customer D\",\n    category: \"Revenue\",\n    amount: \"$890.00\",\n  },\n  {\n    id: \"TXN011\",\n    date: \"2024-01-20\",\n    description: \"Travel Expenses\",\n    category: \"Expense\",\n    amount: \"-$350.00\",\n  },\n  {\n    id: \"TXN012\",\n    date: \"2024-01-20\",\n    description: \"Payment from Customer E\",\n    category: \"Revenue\",\n    amount: \"$1,500.00\",\n  },\n];\n\nexport default function TableWithStickyHeader() {\n  return (\n    <div className=\"h-96 border-2\">\n      <Table className=\"border-0 shadow-none\">\n        <Table.Header className=\"sticky top-0\">\n          <Table.Row className=\"bg-secondary hover:bg-secondary\">\n            <Table.Head className=\"w-[100px] text-secondary-foreground\">\n              ID\n            </Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">Date</Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">\n              Description\n            </Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">\n              Category\n            </Table.Head>\n            <Table.Head className=\"text-right text-secondary-foreground\">\n              Amount\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {transactions.map((transaction) => (\n            <Table.Row key={transaction.id}>\n              <Table.Cell className=\"font-medium\">{transaction.id}</Table.Cell>\n              <Table.Cell>{transaction.date}</Table.Cell>\n              <Table.Cell>{transaction.description}</Table.Cell>\n              <Table.Cell>\n                <Badge\n                  variant={\n                    transaction.category === \"Revenue\" ? \"default\" : \"outline\"\n                  }\n                  size=\"sm\"\n                >\n                  {transaction.category}\n                </Badge>\n              </Table.Cell>\n              <Table.Cell\n                className={`text-right font-medium ${transaction.amount.startsWith(\"-\") ? \"text-destructive\" : \"text-foreground\"}`}\n              >\n                {transaction.amount}\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/retroui/preview/table-with-sticky-header.tsx"
    }
  ]
}