Ubuntu
17 lines
4.3 KiB
JSON
17 lines
4.3 KiB
JSON
{
|
|
"$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"
|
|
}
|
|
]
|
|
} |