table/usage

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Table basic usage example

Example of basic Table usage: ```tsx import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" <Table> <TableHeader> <TableHead isRowHeader className="w-[100px]">Invoice</TableHead> <TableHead>Status</TableHead> <TableHead>Method</TableHead> <TableHead className="text-right">Amount</TableHead> </TableHeader> <TableBody> <TableRow> <TableCell className="font-medium">INV001</TableCell> <TableCell>Paid</TableCell> <TableCell>Credit Card</TableCell> <TableCell className="text-right">$250.00</TableCell> </TableRow> </TableBody> </Table> <TableCaption>A list of your recent invoices.</TableCaption> ``` This example demonstrates creating a table with headers, body rows, and a caption.

Table basic usage example

Basic Table usage example: ```tsx <Table> <TableCaption>A list of your recent invoices.</TableCaption> <TableHeader> <TableRow> <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> </TableBody> </Table> ```

Table with actions using DropdownMenu

Tables can include action columns for each row by combining the Table component with a DropdownMenu component.

Table component imports

Import the Table component and its sub-components from '@/components/ui/table': Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, and TableRow.

Table component basic usage example

Example of building a table with invoices: wrap Table around TableCaption, TableHeader with TableRow containing TableHead elements, and TableBody with TableRow elements containing TableCell components for data rows.

Table with actions using DropdownMenu

You can create a table showing actions for each row by combining the Table component with a DropdownMenu component.

Data Table with TanStack React Table

For complex data tables with sorting, filtering, and pagination, combine the Table component with @tanstack/react-table library. See the Data Table documentation for more information and refer to the Tasks demo for an example implementation.

Give your agent this brain