` component and build a complex data table
**Tip:** If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component.
-
\ No newline at end of file
+
+
+## Table of Contents
+
+This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the
component to build your own custom data table. We'll cover the following topics:
+
+- [Basic Table](#basic-table)
+- [Row Actions](#row-actions)
+- [Pagination](#pagination)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Visibility](#visibility)
+- [Row Selection](#row-selection)
+- [Reusable Components](#reusable-components)
+
+## Installation
+
+1. Add the `
` component to your project:
+
+```bash
+npx shadcn-vue@latest add table
+```
+
+2. Add `tanstack/vue-table` dependency:
+
+```bash
+npm install @tanstack/vue-table
+```
+
+## Prerequisites
+
+We are going to build a table to show recent payments. Here's what our data looks like:
+
+```ts:line-numbers
+interface Payment {
+ id: string
+ amount: number
+ status: 'pending' | 'processing' | 'success' | 'failed'
+ email: string
+}
+
+export const payments: Payment[] = [
+ {
+ id: '728ed52f',
+ amount: 100,
+ status: 'pending',
+ email: 'm@example.com',
+ },
+ {
+ id: '489e1d42',
+ amount: 125,
+ status: 'processing',
+ email: 'example@gmail.com',
+ },
+ // ...
+]
+```
+
+## Project Structure
+
+Start by creating the following file structure:
+
+```txt
+ components
+ โโโ payments
+ โโโ columns.ts
+ โโโ data-table.vue
+ โโโ data-table-dropdown.vue
+โโโ app.vue
+```
+
+I'm using a Nuxt.js example here but this works for any other Vue framework.
+
+- `columns.ts` It will contain our column definitions.
+- `data-table.vue` It will contain our `` component.
+- `data-table-dropdown.vue` It will contain our `` component.
+- `app.vue` This is where we'll fetch data and render our table.
+
+## Basic Table
+
+Let's start by building a basic table.
+
+
+
+### Column Definitions
+
+First, we'll define our columns in the `columns.ts` file.
+
+```ts:line-numbers title="components/payments/columns.ts" {1,12-27}
+import type { ColumnDef } from '@tanstack/vue-table'
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export interface Payment {
+ id: string
+ amount: number
+ status: 'pending' | 'processing' | 'success' | 'failed'
+ email: string
+}
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: 'status',
+ header: 'Status',
+ },
+ {
+ accessorKey: 'email',
+ header: 'Email',
+ },
+ {
+ accessorKey: 'amount',
+ header: 'Amount',
+ },
+]
+```
+
+
+
+**Note:** Columns are where you define the core of what your table
+will look like. They define the data that will be displayed, how it will be
+formatted, sorted and filtered.
+
+
+
+### `` component
+
+Next, we'll create a `` component to render our table.
+
+```ts:line-numbers
+
+
+
+
+
+```
+
+
+
+**Tip**: If you find yourself using `` in multiple places, this is the component you could make reusable by extracting it to `components/ui/data-table.vue`.
+
+``
+
+
+
+
+### Render the table
+
+Finally, we'll render our table in our index component.
+
+```ts:line-numbers showLineNumbers{28}
+
+
+
+
+
+
+
+```
+
+
+
+## Cell Formatting
+
+Let's format the amount cell to display the dollar amount. We'll also align the cell to the right.
+
+
+
+### Update columns definition
+
+Update the `header` and `cell` definitions for amount as follows:
+
+
+```ts:line-numbers showLineNumbers title="components/payments/columns.ts" {5-17}
+import { h } from 'vue'
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "amount",
+ header: () => h('div', { class: 'text-right' }, 'Amount'),
+ cell: ({ row }) => {
+ const amount = parseFloat(row.getValue("amount"))
+ const formatted = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(amount)
+
+ return h('div', { class: 'text-right font-medium' }, formatted)
+ },
+ }
+]
+```
+You can use the same approach to format other cells and headers.
+
+
+## Row Actions
+
+Let's add row actions to our table. We'll use a `` component for this.
+
+
+
+### Add the following into your `DataTableDropDown.vue` component:
+
+```ts:line-numbers
+// DataTableDropDown.vue
+
+
+
+
+
+
+
+
+ Actions
+
+ Copy payment ID
+
+
+ View customer
+ View payment details
+
+
+
+
+```
+
+### Update columns definition
+
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `` component.
+
+
+```ts:line-numbers showLineNumber{2,6-16}
+import { ColumnDef } from "@tanstack/vue-table"
+import DropdownAction from '@/components/DataTableDropDown.vue'
+
+export const columns: ColumnDef[] = [
+ // ...
+ {
+ id: 'actions',
+ enableHiding: false,
+ cell: ({ row }) => {
+ const payment = row.original
+
+ return h('div', { class: 'relative' }, h(DropdownAction, {
+ payment,
+ }))
+ },
+ },
+]
+
+```
+
+You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
+
+
+
+## Pagination
+
+Next, we'll add pagination to our table.
+
+
+
+### Update ``
+
+```ts:line-numbers showLineNumbers{4,12}
+import {
+ FlexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ useVueTable,
+} from "@tanstack/vue-table"
+
+const table = useVueTable({
+ data: props.data,
+ columns: props.columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+})
+```
+
+This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
+
+### Add pagination controls
+
+We can add pagination controls to our table using the `` component and the `table.previousPage()`, `table.nextPage()` API methods.
+
+```ts:line-numbers showLineNumbers{3,15,21-39}
+// components/payments/DataTable.vue
+
+
+
+
+
+
+ { // .... }
+
+
+
+
+
+
+
+
+
+```
+
+See [Reusable Components](#reusable-components) section for a more advanced pagination component.
+
+
+
+## Sorting
+
+Let's make the email column sortable.
+
+
+
+### Add the following into your `utils` file:
+
+```ts:line-numbers showLineNumbers{5,6,12-17}
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+import type { Updater } from '@tanstack/vue-table'
+import { type Ref } from 'vue'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+export function valueUpdater>(updaterOrValue: T, ref: Ref) {
+ ref.value
+ = typeof updaterOrValue === 'function'
+ ? updaterOrValue(ref.value)
+ : updaterOrValue
+}
+```
+
+The `valueUpdater` function updates a Vue `ref` object's value. It handles both direct assignments and transformations using a function. If `updaterOrValue` is a function, it's called with the current `ref` value, and the result is assigned to `ref.value`. If it's not a function, it's directly assigned to `ref.value`. This utility enhances flexibility in updating `ref` values. While Vue `ref` can manage reactive state directly, `valueUpdater` simplifies value updates, improving code readability and maintainability when the new state can be a direct value or a function generating it based on the current one.
+
+### Update ``
+
+```ts:line-numbers showLineNumbers{4,7,16,34,41-44}
+
+
+
+
+
+
{ ... }
+
+
+
+```
+
+### Make header cell sortable
+
+We can now update the `email` header cell to add sorting controls.
+
+```ts:line-numbers showLineNumbers{5,10-17}
+// components/payments/columns.ts
+import type {
+ ColumnDef,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: 'email',
+ header: ({ column }) => {
+ return h(Button, {
+ variant: 'ghost',
+ onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+ }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
+ },
+ cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
+ },
+]
+```
+
+This will automatically sort the table (asc and desc) when the user toggles on the header cell.
+
+
+
+## Filtering
+
+Let's add a search input to filter emails in our table.
+
+
+
+### Update ``
+
+```ts:line-numbers showLineNumbers{4,11,19,39,48-49,52,60-64}
+
+
+
+
+
+
+
+
+
{ ... }
+
+
+
+
+```
+
+Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.
+
+
+
+## Visibility
+
+Adding column visibility is fairly simple using `@tanstack/vue-table` visibility API.
+
+
+
+### Update ``
+
+```ts:line-numbers showLineNumbers{6,9-14,48,59,63,75-91}
+
+
+
+
+
+
+```
+
+This adds a checkbox to each row and a checkbox in the header to select all rows.
+
+### Show selected rows
+
+You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
+
+```vue
+
+```
+
+
+
+## Reusable Components
+
+Here are some components you can use to build your data tables. This is from the [Tasks](/examples/tasks) demo.
+
+### Column header
+
+Make any column header sortable and hideable.
+
+```ts:line-numbers
+
+
+
+
+
+
+
+
+```
+
+```vue
+
+```
+
+### Column toggle
+
+A component to toggle column visibility.
+
+```ts:line-numbers
+
+
+
+
+
+
+
+
+
+ Toggle columns
+
+
+
+ {{ column.id }}
+
+
+
+
+```
+
+```vue
+
+```
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index 6c120676..d1614790 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -4,7 +4,7 @@ description: Displays a form input field or a component that looks like an input
---
-
+
## Installation
@@ -45,23 +45,23 @@ import { Input } from '@/components/ui/input'
### Default
-
+
### File
-
+
### Disabled
-
+
### With Label
-
+
### With Button
-
+
### Form
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 24b31da8..930a7762 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -59,7 +59,7 @@ import { Textarea } from '@/components/ui/textarea'
### With Label
-
+
### With Text
diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md
index 59d92b2c..899f8244 100644
--- a/apps/www/src/content/docs/installation.md
+++ b/apps/www/src/content/docs/installation.md
@@ -5,7 +5,7 @@ description: How to install dependencies and structure your app.
## Frameworks
-
+
-
Vite
+
Vite
-
Nuxt
+
Nuxt
-
+
Astro
+
-
Laravel
+
Laravel
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md
index 3d78e848..fd3b2de9 100644
--- a/apps/www/src/content/docs/installation/astro.md
+++ b/apps/www/src/content/docs/installation/astro.md
@@ -32,20 +32,30 @@ Strict
Yes/No
```
-### Add React to your project
+### Add Vue to your project
-Install React using the Astro CLI:
+Install Vue using the Astro CLI:
```bash
-npx astro add react
+npx astro add vue
```
-Answer `Yes` to all the question prompted by the CLI when installing React.
+Answer `Yes` to all the question prompted by the CLI when installing Vue.
+This will install `vue` and `@astrojs/vue` as dependencies and automatically set them up in the `astro.config.mjs` file.
+
+### Install TypeScript
+
+If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118)
+
+```bash
+npm install -D typescript
+```
+
### Add Tailwind CSS to your project
Install Tailwind CSS using the Astro CLI:
@@ -60,6 +70,8 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS
+This will install `tailwindcss` and `@astrojs/tailwind` as dependencies and set them up in your `astro.config.mjs` file. It will also create a `tailwind.config.mjs` file with the needed configurations.
+
### Edit tsconfig.json file
Add the code below to the tsconfig.json file to resolve paths:
@@ -77,10 +89,10 @@ Add the code below to the tsconfig.json file to resolve paths:
### Run the CLI
-Run the `shadcn-ui` init command to setup your project:
+Run the `shadcn-vue` init command to setup your project:
```bash
-npx shadcn-ui@latest init
+npx shadcn-vue@latest init
```
### Configure components.json
@@ -89,14 +101,15 @@ You will be asked a few questions to configure `components.json`:
```txt showLineNumbers
Would you like to use TypeScript (recommended)? no / yes
+Which framework are you using? Astro
Which style would you like to use? โบ Default
Which color would you like to use as base color? โบ Slate
-Where is your global CSS file? โบ โบ ./src/styles/globals.css
+Where is your global CSS file? โบ src/styles/globals.css
Do you want to use CSS variables for colors? โบ no / yes
-Where is your tailwind.config.js located? โบ tailwind.config.cjs
+Where is your tailwind.config located? โบ tailwind.config.mjs
Configure the import alias for components: โบ @/components
Configure the import alias for utils: โบ @/lib/utils
-Are you using React Server Components? โบ no
+Write configuration to components.json. Proceed? > Y/n
```
### Import the globals.css file
@@ -126,7 +139,7 @@ export default defineConfig({
You can now start adding components to your project.
```bash
-npx shadcn-ui@latest add button
+npx shadcn-vue@latest add button
```
The command above will add the `Button` component to your project. You can then import it like this:
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
index b655e297..8a4f7f48 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
@@ -45,7 +45,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
-
+ No framework found.
@@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
v-for="framework in frameworks"
:key="framework.value"
:value="framework"
- @select="open = false"
+ @select="(ev) => {
+ value = ev.detail.value as typeof framework
+ open = false
+ }"
>
Create a new project
-
+
-
+ Edit profile
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
index 563e01a8..1bfac8de 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -11,7 +11,7 @@ const emits = defineEmits()
-
+
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
index f0c5e07a..8fb30de8 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
@@ -1,14 +1,14 @@
-
+
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index 78f15c80..e90acfb6 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -7,7 +7,11 @@ import { computed, nextTick, onMounted, ref } from 'vue'
import { buttonVariants } from '../button'
import { cn } from '@/lib/utils'
-const props = withDefaults(defineProps< {
+defineOptions({
+ inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
modelValue?: string | number | Date | Partial<{
start: Date
end: Date
@@ -41,7 +45,6 @@ function handleNav(direction: 'prev' | 'next') {
}
onMounted(async () => {
- await nextTick()
await nextTick()
if (modelValue.value instanceof Date && calendarRef.value)
calendarRef.value.focusDate(modelValue.value)
@@ -59,7 +62,16 @@ onMounted(async () => {