e5cecae352
* docs: improve the api reference of all the components * docs(app): #152 add new-york theme This pull request is intended to add the new-york theme for the newly created component examples. Closes: #152 * chore: build registry * chore: change usage of lucide icon in new-york --------- Co-authored-by: zernonia <zernonia@gmail.com>
1.4 KiB
1.4 KiB
| title | description |
|---|---|
| Table | A responsive table component. |
Installation
npx shadcn-vue@latest add table
Usage
<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.