Table , shadcn/ui components例

概要

• shadcn/ui , Table 実装例になります。

• まとめリンクは、下記になります。

• https://knakatech-blog.pages.dev/books/12

---

関連

• https://ui.shadcn.com/docs/components/table

---

• src/client/Table.tsx
• https://github.com/kuc-arc-f/express_49preact/blob/main/src/client/Table.tsx

<Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
    <TableRow className="bg-gray-100">
        <TableHead className="w-[100px]">Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead className="text-right">Amount</TableHead>
    </TableRow>
    </TableHeader>
    <TableBody>
    <TableRow>
        <TableCell className="font-medium">INV001</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
        <TableCell className="font-medium">INV002</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
        <TableCell className="font-medium">INV003</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    </TableBody>
</Table>