Table
A responsive table component.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
Installation
pnpm dlx shadcn-vue@latest add table Usage
vue
<script setup lang="ts"> import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table' </script> <template> <Table> <TableCaption>A list of your recent invoices.</TableCaption> <TableHeader> <TableRow> <TableHead class="w-[100px]"> Invoice </TableHead> <TableHead>Status</TableHead> <TableHead>Method</TableHead> <TableHead class="text-right"> Amount </TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell class="font-medium"> INV001 </TableCell> <TableCell>Paid</TableCell> <TableCell>Credit Card</TableCell> <TableCell class="text-right"> $250.00 </TableCell> </TableRow> </TableBody> </Table> </template>Data Table
You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/vue-table to create tables with sorting, filtering and pagination.
See the Data Table documentation for more information.
You can also see an example of a data table in the Tasks demo.