Examples
Basic
| Prop | Default | Type | Description |
|---|---|---|---|
columns | [] | array | Table columns. |
data | [] | array | Table data. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Marcos | Waelchi | 9 | 258 | relationship | 64 |
| Reginald | Mayert | 16 | 237 | relationship | 1 |
| Jordan | Turcotte | 22 | 897 | complicated | 43 |
| Carrie | Herzog | 9 | 569 | relationship | 35 |
| Icie | Metz | 24 | 500 | single | 32 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<NTable
:columns
:data
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Row Selection
Row selection allows you to select rows in the table. This is useful when you want to select rows in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
rowSelection | - | object | Selected row state, can be binded with v-model. |
enableRowSelection | false | boolean | Enable row selection. |
enableMultiRowSelection | true | boolean | Enable multiple row selection. |
rowId | id | string | Row id to uniquely identify each row. |
enableSubRowSelection | false | boolean | Enable sub row selection. |
@select | - | event, row | Emitted when a row is selected. |
@select-all | - | event, rows | Emitted when all rows are selected. |
@row | - | event, row | Emitted when a row is clicked. |
When using the @row event, you should stop propagation if you have interactive elements like buttons or links inside the row to prevent triggering the row click event.
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress | |
|---|---|---|---|---|---|---|
| Alessandro | Jenkins-Konopelski | 29 | 686 | relationship | 17 | |
| Elenora | Altenwerth | 23 | 918 | relationship | 91 | |
| Kody | Gibson | 2 | 51 | single | 29 | |
| Alfredo | Effertz-Beier | 12 | 236 | complicated | 60 | |
| Stanley | Lubowitz | 17 | 76 | complicated | 76 | |
| Arden | Jerde | 20 | 422 | complicated | 36 | |
| Laron | Kunze | 2 | 141 | relationship | 41 | |
| Favian | Glover | 22 | 850 | single | 46 | |
| Norbert | Kozey | 0 | 584 | relationship | 12 | |
| Kathryn | Dibbert | 23 | 208 | complicated | 56 | |
of row(s) selected.
<script setup lang="ts">
import type { ColumnDef, RowSelectionState, Table } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(10))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const select = ref<RowSelectionState>()
const table = useTemplateRef<Table<Person>>('table')
</script>
<template>
<div class="flex flex-col space-y-4">
<NTable
ref="table"
v-model:row-selection="select"
:columns
:data
enable-row-selection
/>
<div
class="flex items-center justify-between px-2"
>
<div
class="flex-1 text-sm text-muted-foreground"
>
{{ table?.getFilteredSelectedRowModel().rows.length }} of
{{ table?.getFilteredRowModel().rows.length }} row(s) selected.
</div>
</div>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Row Selection Documentation
Empty
Empty allows you to show a message when the table is empty. This is useful when you want to show a message when the table is empty.
| Prop | Default | Type | Description |
|---|---|---|---|
empty-text | No results. | string | Empty text. |
empty-icon | i-tabler-database-x | string | Empty icon. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
No data. | |||||
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
const data = ref<Person[]>([])
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<div class="flex flex-col space-y-2">
<NTable
:columns
:data
empty-text="No data."
empty-icon="i-lucide-package-x"
/>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Loading
Loading allows you to show a loading progress indicator in the table. This is useful when you want to show a loading progress indicator in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
loading | false | boolean | Loading state. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Manuel | Boyle | 28 | 772 | complicated | 25 |
| Kaitlin | Crona | 19 | 373 | single | 91 |
| Arely | Koelpin | 14 | 488 | complicated | 41 |
| Kaley | Mertz | 6 | 125 | complicated | 64 |
| Elfrieda | Rempel | 36 | 950 | complicated | 0 |
| Billy | Jast | 35 | 82 | single | 30 |
| Cullen | Zulauf | 23 | 811 | complicated | 5 |
| Jamil | Homenick | 30 | 94 | complicated | 65 |
| Emmanuelle | Mosciski-Donnelly | 3 | 937 | relationship | 73 |
| Jorge | Hahn | 34 | 629 | complicated | 43 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(50))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const loading = ref(true)
</script>
<template>
<div class="flex flex-col space-y-2">
<NCheckbox
v-model="loading"
label="Loading"
/>
<NTable
:loading
:columns
:data
/>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Loading Documentation
Pagination
Pagination allows you to paginate rows in the table. This is useful when you want to paginate rows in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
pagination | {pageIndex: 0, pageSize: 10} | {pageIndex: Number, pageSize: Number} | Pagination state, can be binded with v-model. |
manualPagination | false | boolean | Enable manual pagination, ideal for server-side pagination. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Laron | Donnelly | 7 | 803 | relationship | 40 |
| Corbin | O'Hara | 25 | 164 | single | 87 |
| Kiara | Rolfson | 30 | 346 | single | 98 |
| Ronny | Streich | 4 | 228 | relationship | 92 |
| Hosea | Torp | 26 | 828 | single | 23 |
Page 1 of
<script setup lang="ts">
import type { ColumnDef, Table } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(50))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const pagination = ref({
pageSize: 5,
pageIndex: 0,
})
const table = useTemplateRef<Table<Person>>('table')
</script>
<template>
<div class="flex flex-col space-y-4">
<!-- table -->
<NTable
ref="table"
:pagination="pagination"
:columns
:data
/>
<!-- pagination -->
<div
class="flex flex-wrap items-center justify-between gap-4 overflow-auto px-2"
>
<div
class="flex items-center justify-center text-sm font-medium"
>
Page {{ (table?.getState().pagination.pageIndex ?? 0) + 1 }} of
{{ table?.getPageCount().toLocaleString() }}
</div>
<NPagination
:page="(table?.getState().pagination.pageIndex ?? 0) + 1"
:total="table?.getFilteredRowModel().rows.length"
show-edges
:items-per-page="table?.getState().pagination.pageSize ?? 5"
@update:page="table?.setPageIndex($event - 1)"
/>
</div>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Pagination Component
Read more in Tanstack Pagination Documentation
Sorting
Sorting allows you to sort columns in ascending or descending order. This is useful when you want to sort columns in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
sorting | - | array | Sorting state, can be binded with v-model. |
enableMultiSort | - | boolean | Enable multi-column sorting |
enableSorting | - | boolean | Enable all column sorting |
column.enableSorting | - | boolean | Enable specific column sorting |
enableSortingRemoval | true | boolean | Enables the ability to remove sorting for the table. |
Preview
Code
Data
| Status | |||||
|---|---|---|---|---|---|
| Timmy | Wisozk | 36 | 444 | complicated | 42 |
| Malika | Monahan-Howe | 40 | 352 | complicated | 50 |
| Eliseo | Hirthe | 4 | 259 | complicated | 23 |
| Kayley | Metz | 40 | 703 | relationship | 97 |
| Ryleigh | Marvin | 4 | 548 | relationship | 13 |
| Wendell | Jenkins | 37 | 869 | single | 1 |
| Eleazar | Kulas | 24 | 698 | relationship | 50 |
| Elwin | Larson | 0 | 310 | single | 74 |
| Sarina | Wiza | 4 | 591 | single | 34 |
| Crystel | Witting | 17 | 798 | relationship | 72 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(50))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
enableSorting: false,
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<NTable
:columns
:data
enable-sorting
enable-multi-sort
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Sorting Documentation
Visibility
Visibility allows you to show or hide columns in the table. This is useful when you want to show or hide columns in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
columnVisibility | - | object | Column visibility state, can be binded with v-model. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Clotilde | D'Amore | 21 | 52 | single | 19 |
| Caleb | Ledner | 25 | 215 | relationship | 70 |
| Brenna | Ondricka | 19 | 589 | complicated | 5 |
| Cristina | Kerluke-Klocko | 18 | 924 | single | 97 |
| Neal | Zulauf | 2 | 359 | complicated | 82 |
<script setup lang="ts">
import type { ColumnDef, Table, VisibilityState } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
] satisfies ColumnDef<Person>[]
const table = useTemplateRef<Table<Person>>('table')
const columnVisibility = ref<VisibilityState>({})
</script>
<template>
<div>
<div class="flex flex-wrap gap-4">
<NCheckbox
v-for="tableColumn in table?.getAllLeafColumns()"
:key="tableColumn.id"
:model-value="tableColumn.getIsVisible()"
:label="tableColumn.id"
@update:model-value="tableColumn.toggleVisibility()"
/>
</div>
<NSeparator />
<NTable
ref="table"
:column-visibility="columnVisibility"
:columns
:data
/>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Visibility Documentation
Global Filtering
Global filtering allows you to filter rows based on the value entered in the filter input. This is useful when you want to filter rows in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
globalFilter | - | string | Global filter state, can be binded with v-model. |
manualFiltering | - | boolean | Enable manual filtering. Ideal for server-side filtering. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Jaiden | Rodriguez | 6 | 465 | single | 49 |
| Baby | Carter | 3 | 791 | single | 51 |
| Anita | Runolfsson | 33 | 641 | single | 48 |
| Will | Morar | 22 | 344 | single | 91 |
| Madelyn | Stanton | 36 | 224 | relationship | 31 |
| Hanna | Hoeger | 2 | 381 | relationship | 63 |
| Riley | Jaskolski | 28 | 506 | complicated | 90 |
| Vaughn | Moore | 21 | 523 | relationship | 84 |
| Trevion | Kunze | 18 | 692 | complicated | 80 |
| Loraine | Koss | 32 | 983 | complicated | 63 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(10))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const search = ref('')
</script>
<template>
<div class="flex flex-col space-y-4">
<div class="flex flex-wrap items-center justify-between gap-4">
<NInput
v-model="search"
placeholder="Search"
:una="{
inputWrapper: 'w-full md:w-80',
}"
/>
<NButton
label="Add new"
disabled
leading="i-radix-icons-plus"
class="w-full md:w-auto"
/>
</div>
<NTable
:columns
:global-filter="search"
:data
/>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Global Filtering Documentation
Column Filtering
Column filtering allows you to filter columns based on the value entered in the filter input. This is useful when you want to filter columns in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
columnFilters | - | array | Column filter state, can be binded with v-model. |
enableColumnFilter | - | boolean | Enable all column filtering |
column.enableColumnFilter | - | boolean | Enable specific column filtering |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Mafalda | Schulist | 11 | 328 | single | 45 |
| Isobel | Kuhic | 13 | 353 | single | 96 |
| Harley | Klein | 35 | 767 | complicated | 0 |
| Jada | Gislason | 30 | 659 | complicated | 50 |
| Hilma | Daniel | 11 | 597 | single | 69 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
enableColumnFilter: false,
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<NTable
:columns
enable-column-filters
:data
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Column Filtering Documentation
Column Ordering
Column ordering allows you to reorder columns by dragging and dropping them. This is useful when you want to change the order of columns in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
columnOrder | - | array | Column order state, can be binded with v-model. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Myrl | Sawayn | 19 | 904 | relationship | 96 |
| Simone | Lakin | 8 | 509 | complicated | 30 |
| Brando | Ernser | 1 | 143 | single | 70 |
| Eldred | Marks | 35 | 910 | relationship | 17 |
| Garrick | Bruen | 11 | 362 | complicated | 59 |
<script setup lang="ts">
import type { ColumnDef, Table } from '@tanstack/vue-table'
import type { Person } from './makeData'
import { faker } from '@faker-js/faker'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: () => 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const table = useTemplateRef<Table<Person>>('table')
function randomizeColumns() {
table.value?.setColumnOrder(faker.helpers.shuffle(table.value?.getAllLeafColumns().map(d => d.id)))
}
</script>
<template>
<div class="flex justify-end">
<NButton
label="Randomize columns"
class="mb-4"
@click="randomizeColumns"
/>
</div>
<!-- table -->
<NTable
ref="table"
:columns
:data
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Column Ordering Documentation
Column Pinning
Column pinning allows you to pin columns to the left or right of the table. This is useful when you have a large number of columns and you want to keep some columns in view while scrolling.
| Prop | Default | Type | Description |
|---|---|---|---|
columnPinning | - | { left: array, right: array } | Column pinning state, can be binded with v-model. |
Preview
Code
Data
| Status | First Name | Last Name | Age | Visits | Profile Progress |
|---|---|---|---|---|---|
| single | Maryse | Bartoletti | 14 | 360 | 17 |
| single | Fidel | Littel | 34 | 18 | 83 |
| relationship | Celestine | McGlynn | 25 | 926 | 3 |
| complicated | Lavinia | Emmerich | 26 | 927 | 51 |
| relationship | Darrion | Bergnaum | 27 | 774 | 96 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: () => 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<NTable
:columns
:data
:column-pinning="{
left: ['status'],
right: ['priority'],
}"
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Column Pinning Documentation
Expanding
Expanding allows you to expand rows to show additional information. This is useful when you want to show additional information about a row.
| Prop | Default | Type | Description |
|---|---|---|---|
expanded | - | array | Expanded state, can be binded with v-model. |
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress | |
|---|---|---|---|---|---|---|
| Shanny | O'Connell | 30 | 922 | relationship | 61 | |
| Orion | Kemmer | 38 | 617 | complicated | 55 | |
| Genesis | Buckridge | 20 | 717 | complicated | 44 | |
| Jake | Morissette-Jacobson | 16 | 323 | complicated | 58 | |
| Judy | Mayer | 12 | 269 | single | 41 | |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
const expanded = ref<Record<string, boolean>>({})
</script>
<template>
<NTable
v-model:expanded="expanded"
:columns
:data
>
<template #expanded="{ row }">
<div class="p-4">
<p class="text-sm text-muted-foreground">
Object:
</p>
<p class="text-foreground">
{{ row }}
</p>
</div>
</template>
</NTable>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Expanding Documentation
Grouping
Grouping allows you to group rows based on a column value. This is useful when you want to group rows in the table.
| Prop | Default | Type | Description |
|---|---|---|---|
grouping | - | array | Grouping state, can be binded with v-model. |
manualGrouping | - | boolean | Enable manual grouping. |
Preview
Code
Data
| Info | Name | Info | |||
|---|---|---|---|---|---|
| Status | Progress | First Name | Last Name | Age | Visits |
| single | 53 | Tia | Miller | 11 | 876 |
| complicated | 28 | Juana | Kihn | 13 | 284 |
| relationship | 62 | Afton | Crist | 15 | 540 |
| relationship | 59 | General | McClure | 11 | 328 |
| relationship | 93 | Janet | Gottlieb | 19 | 132 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import { makeData } from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'Name',
enableSorting: false,
columns: [
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
],
},
{
header: 'Info',
columns: [
{
header: () => 'Age',
accessorKey: 'age',
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Progress',
accessorKey: 'progress',
},
],
},
]
const grouping = ref([
'status',
'progress',
'firstName',
'lastName',
'age',
'visits',
])
</script>
<template>
<NTable
v-model:grouping="grouping"
manual-grouping
:columns
:data
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Grouping Documentation
Server-side
Allows you to fetch data from the server. This is useful when you want to fetch data from the server.
Preview
Code
Data
| Name | Url |
|---|---|
| bulbasaur | https://pokeapi.co/api/v2/pokemon/1/ |
| ivysaur | https://pokeapi.co/api/v2/pokemon/2/ |
| venusaur | https://pokeapi.co/api/v2/pokemon/3/ |
| charmander | https://pokeapi.co/api/v2/pokemon/4/ |
| charmeleon | https://pokeapi.co/api/v2/pokemon/5/ |
Rows per page
Page 1 of 270
<script setup lang="ts">
import type { ColumnDef, Table } from '@tanstack/vue-table'
interface Pokemon {
name: string
url: string
}
interface ResourceMeta {
count: number
next: string | null
previous: string | null
results: Pokemon[]
}
const pagination = ref({
pageSize: 5,
pageIndex: 0,
})
const endpoint = computed (() => {
const { pageSize, pageIndex } = pagination.value
return `https://pokeapi.co/api/v2/pokemon?limit=${pageSize}&offset=${pageSize * pageIndex}`
})
const { data: resource, refresh, status } = await useLazyFetch<ResourceMeta>(endpoint)
const data = computed(() => {
return resource.value?.results ?? []
})
const columns = ref<ColumnDef<Pokemon>[]>([
{
header: 'Name',
accessorKey: 'name',
},
{
header: 'Url',
accessorKey: 'url',
},
])
const pageCount = computed(() => {
const { pageSize } = pagination.value
return Math.ceil((resource.value?.count || 0) / pageSize)
})
const table = useTemplateRef<Table<Pokemon>>('table')
</script>
<template>
<div class="flex flex-col space-y-4">
<!-- header -->
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
<div class="flex items-center gap-x-2 sm:ml-auto">
<NButton
:loading="status === 'pending'"
@click="refresh()"
>
Reload
</NButton>
</div>
</div>
<!-- table -->
<NTable
ref="table"
v-model:pagination="pagination"
manual-pagination
:columns
:loading="status === 'pending'"
:page-count
:data
/>
<!-- footer -->
<div
class="flex items-center justify-end px-2"
>
<div class="flex items-center justify-between space-x-6 lg:space-x-8">
<div
class="hidden items-center justify-center text-sm font-medium sm:flex space-x-2"
>
<span class="text-nowrap">
Rows per page
</span>
<NSelect
:items="[5, 10, 20, 30, 40, 50]"
:_select-trigger="{
class: 'w-15',
}"
:model-value="table?.getState().pagination.pageSize"
@update:model-value="table?.setPageSize($event as unknown as number)"
/>
</div>
<div
class="flex items-center justify-center text-sm font-medium"
>
Page {{ (table?.getState().pagination.pageIndex ?? 0) + 1 }} of {{ pageCount }}
</div>
<NPagination
:page="(table?.getState().pagination.pageIndex ?? 0) + 1"
:total="pageCount * pagination.pageSize"
:show-list-item="false"
:items-per-page="table?.getState().pagination.pageSize ?? 5"
@update:page="table?.setPageIndex($event - 1)"
/>
</div>
</div>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Read more in Tanstack Table Serve-Side Documentation
Customization
Configure the progress using the una prop and utility classes.
| Prop | Default | Type | Description |
|---|---|---|---|
columns.meta.una | {} | object | Column Una meta data. |
una | {} | object | Global Una attribute. |
Read more in Component Props API
Read more in Component Presets
Preview
Code
Data
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Maiya | Deckow-West | 32 | 783 | complicated | 11 |
| Maiya | Johnston | 13 | 888 | relationship | 60 |
| Jimmy | Daniel | 20 | 938 | complicated | 93 |
| Bo | Mante | 19 | 774 | relationship | 6 |
| Chadrick | Koss | 16 | 111 | relationship | 56 |
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Person } from './makeData'
import makeData from './makeData'
const data = ref(makeData(5))
const columns: ColumnDef<Person>[] = [
{
header: 'First Name',
accessorKey: 'firstName',
meta: {
una: {
tableHead: 'text-left bg-primary-700 text-white',
tableCell: 'text-left bg-primary-700 text-white',
},
},
},
{
header: 'Last Name',
accessorKey: 'lastName',
meta: {
una: {
tableHead: 'text-left bg-primary-700 text-white',
tableCell: 'text-left bg-primary-700 text-white',
},
},
},
{
header: 'Age',
accessorKey: 'age',
meta: {
una: {
tableHead: 'text-center',
tableCell: 'text-center',
},
},
},
{
header: 'Visits',
accessorKey: 'visits',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Profile Progress',
accessorKey: 'progress',
},
]
</script>
<template>
<NTable
:columns
:data
:column-pinning="{
left: ['firstName', 'lastName'],
}"
:una="{
tableHead: 'text-right',
tableCell: 'text-right',
}"
/>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Slots
| Name | Props | Description |
|---|---|---|
{column}-filter | column | Column filter slot. |
{column}-header | column | Column header slot. |
{column}-cell | cell | Column cell slot. |
{column}-footer | column | Column footer slot. |
header | table | Header slot. |
body | table | Body slot. |
raw | row | Row slot. |
footer | table | Footer slot. |
expanded | row | Expanded slot. |
empty | - | Empty slot. |
loading | - | Loading slot. |
Preview
Code
Data
| Account | |||||
|---|---|---|---|---|---|
 WRWerner Rau Alexandre.Haag@gmail.com | Werner | Rau | complicated | 22% | |
 MCMarta Carter Chester30@yahoo.com | Marta | Carter | relationship | 80% | |
 ESEliseo Stroman Kaia15@hotmail.com | Eliseo | Stroman | complicated | 8% | |
 JKJessie Kilback Sabrina6@hotmail.com | Jessie | Kilback | complicated | 66% | |
 ABAlison Bartoletti Lorena_Kris@gmail.com | Alison | Bartoletti | relationship | 11% | |
 BSBerry Steuber Elenor73@hotmail.com | Berry | Steuber | relationship | 96% | |
 LDLaurie Donnelly Jillian.Klein42@yahoo.com | Laurie | Donnelly | single | 20% | |
 NRNettie Renner Augusta_Hermiston@hotmail.com | Nettie | Renner | complicated | 88% | |
 TBTania Becker Joaquin.Stracke@yahoo.com | Tania | Becker | complicated | 71% | |
 LALera Abbott Hollie_Crona@hotmail.com | Lera | Abbott | single | 100% | |
of row(s) selected.
Rows per page
Page 1 of
<script setup lang="ts">
import type { ColumnDef, RowSelectionState, Table } from '@tanstack/vue-table'
import type { Person } from './makeData'
import { NAvatar } from '#components'
import { faker } from '@faker-js/faker'
import makeData from './makeData'
const data = ref(makeData(50))
const columns: ColumnDef<Person>[] = [
{
header: 'Account',
accessorKey: 'account',
accessorFn: (row) => {
return {
fullname: `${row.firstName} ${row.lastName}`,
avatar: faker.image.avatar(),
email: row.email,
}
},
// you can customize the cell renderer like this as an alternative to slot 😉
cell: (info: any) => {
const fullname = info.getValue().fullname
return h('div', {
class: 'flex items-center',
}, [
h(NAvatar, {
src: info.getValue().avatar,
alt: fullname,
}),
[
h('div', {
class: 'ml-2',
}, [
h('div', {
class: 'text-sm font-semibold leading-none',
}, fullname),
h('span', {
class: 'text-sm text-muted-foreground',
}, info.getValue().email),
]),
],
])
},
enableSorting: false,
enableColumnFilter: false,
},
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Status',
accessorKey: 'status',
},
{
header: 'Progress',
accessorKey: 'progress',
},
]
const search = ref('')
const select = ref<RowSelectionState>()
const table = useTemplateRef<Table<Person>>('table')
</script>
<template>
<div class="flex flex-col space-y-4">
<!-- header -->
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
<NInput
v-model="search"
leading="i-radix-icons-magnifying-glass"
placeholder="Search"
:una="{
inputWrapper: 'w-full md:w-80',
}"
/>
<div class="flex items-center gap-x-2 sm:ml-auto">
<NButton
label="Rerender"
btn="outline-gray"
leading="i-radix-icons-update"
class="w-full sm:w-auto sm:shrink-0 active:translate-y-0.5"
@click="data = makeData(20_000)"
/>
<NButton
label="Add 1000"
btn="solid-primary"
leading="i-radix-icons-plus"
class="w-full sm:w-auto sm:shrink-0 active:translate-y-0.5"
@click="data = [...makeData(1_000), ...data]"
/>
</div>
</div>
<!-- table -->
<NTable
ref="table"
v-model:row-selection="select"
:columns
:data
:global-filter="search"
enable-row-selection enable-column-filters enable-sorting
row-id="username"
>
<!-- filters -->
<template #status-filter="{ column }">
<NSelect
:items="['Relationship', 'Complicated', 'Single']"
placeholder="All"
:model-value="column.getFilterValue()"
@update:model-value="column?.setFilterValue($event)"
/>
</template>
<template #progress-filter="{ column }">
<div class="flex items-center space-x-2">
<NInput
type="number"
placeholder="min"
:model-value="column.getFilterValue()?.[0] ?? ''"
@update:model-value="column?.setFilterValue((old: [number, number]) => [
$event,
old?.[1],
])"
/>
<NInput
type="number"
placeholder="max"
:model-value="column.getFilterValue()?.[1] ?? ''"
@update:model-value="column?.setFilterValue((old: [number, number]) => [
old?.[0],
$event,
])"
/>
</div>
</template>
<!-- end filter -->
<!-- cells -->
<template #status-cell="{ cell }">
<NBadge
:una="{
badgeDefaultVariant: cell.row.original.status === 'relationship'
? 'badge-soft-success' : cell.row.original.status === 'single'
? 'badge-soft-info' : 'badge-soft-warning' }"
class="capitalize"
:label="cell.row.original.status"
/>
</template>
<template #progress-cell="{ cell }">
<div class="flex items-center">
<NProgress
:model-value="cell.row.original.progress"
:una="{
progressRoot: cell.row.original.progress >= 85
? 'progress-success' : cell.row.original.progress >= 70
? 'progress-info' : cell.row.original.progress >= 55
? 'progress-warning' : 'progress-error' }"
/>
<span class="ml-2 text-sm text-muted-foreground">{{ cell.row.original.progress }}%</span>
</div>
</template>
<!-- end cell -->
</NTable>
<!-- footer -->
<div
class="flex items-center justify-between px-2"
>
<div
class="hidden text-sm text-muted-foreground sm:block"
>
{{ table?.getFilteredSelectedRowModel().rows.length.toLocaleString() }} of
{{ table?.getFilteredRowModel().rows.length.toLocaleString() }} row(s) selected.
</div>
<div class="flex items-center space-x-6 lg:space-x-8">
<div
class="hidden items-center justify-center text-sm font-medium sm:flex space-x-2"
>
<span class="text-nowrap">
Rows per page
</span>
<NSelect
:items="[10, 20, 30, 40, 50]"
:_select-trigger="{
class: 'w-15',
}"
:model-value="table?.getState().pagination.pageSize"
@update:model-value="table?.setPageSize($event as unknown as number)"
/>
</div>
<div
class="flex items-center justify-center text-sm font-medium"
>
Page {{ (table?.getState().pagination.pageIndex ?? 0) + 1 }} of
{{ table?.getPageCount().toLocaleString() }}
</div>
<NPagination
:page="(table?.getState().pagination.pageIndex ?? 0) + 1"
:total="table?.getFilteredRowModel().rows.length"
:show-list-item="false"
:items-per-page="table?.getState().pagination.pageSize ?? 5"
@update:page="table?.setPageIndex($event - 1)"
/>
</div>
</div>
</div>
</template>
makeData.ts
import { faker } from '@faker-js/faker'
export interface Person {
id: string
username: string
email: string
firstName?: string
lastName?: string
avatar?: string
age: number
visits: number
progress: number
status: 'relationship' | 'complicated' | 'single'
subRows?: Person[]
}
function range(len: number) {
const arr: number[] = []
for (let i = 0; i < len; i++)
arr.push(i)
return arr
}
function newPerson(): Person {
return {
id: faker.database.mongodbObjectId(),
username: faker.internet.username(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
avatar: faker.image.avatarGitHub(),
age: faker.number.int(40),
visits: faker.number.int(1000),
progress: faker.number.int(100),
status: faker.helpers.shuffle<Person['status']>([
'relationship',
'complicated',
'single',
])[0]!,
}
}
export function makeData(...lens: number[]) {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!
return range(len).map((): Person => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}
export default makeData
Presets
shortcuts/table.ts
type TablePrefix = 'table'
export const staticTable: Record<`${TablePrefix}-${string}` | TablePrefix, string> = {
// config
'table-default-variant': 'table-solid-gray',
// table-root
'table-root': 'relative w-full overflow-x-auto overflow-y-hidden border border-border rounded-md',
'table': 'w-full caption-bottom text-sm',
'table-body': '[&_tr:last-child]:border-0',
'table-caption': 'mt-4 text-sm text-muted-foreground',
// table-head
'table-head': 'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
'table-head-pinned': 'sticky bg-background',
'table-head-pinned-left': 'left-0',
'table-head-pinned-right': 'right-0',
// table-header
'table-header': '[&_tr]:border-b [&_tr]:border-border',
// table-row
'table-row': 'border-b border-border transition-colors hover:bg-muted/50 data-[filter=true]:hover:bg-background data-[state=selected]:bg-muted',
// table-cell
'table-cell': 'p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
'table-cell-pinned': 'sticky bg-background',
'table-cell-pinned-left': 'left-0',
'table-cell-pinned-right': 'right-0',
// table-empty
'table-empty-row': '',
'table-empty-cell': 'p-4 whitespace-nowrap align-middle text-sm text-muted-foreground bg-background',
'table-empty': 'flex items-center flex-col justify-center py-10 gap-4',
'table-empty-text': 'text-center text-wrap',
'table-empty-icon-name': 'i-tabler-database-x size-2xl',
// table-loading
'table-loading-icon': 'animate-spin text-lg', // TODO: to add
'table-loading-icon-name': 'i-lucide-refresh-ccw', // TODO: to add
'table-loading-row': 'data-[loading=true]:border-0 absolute inset-x-0 -mt-1.5px',
'table-loading-cell': '',
'table-loading': 'absolute inset-x-0 overflow-hidden p-0',
// table-footer
'table-footer': 'border-t border-border bg-muted font-medium [&>tr]:last:border-b-0',
}
export const dynamicTable: [RegExp, (params: RegExpExecArray) => string][] = [
]
export const table = [
...dynamicTable,
staticTable,
]
Props
types/table.ts
import type {
ColumnDef,
CoreOptions,
GroupColumnDef,
} from '@tanstack/vue-table'
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import type { NProgressProps } from './progress'
import type { NScrollAreaProps, NScrollAreaUnaProps } from './scroll-area'
export interface NTableProps<TData, TValue> extends Omit<CoreOptions<TData>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'>, Pick<NTableEmptyProps, 'emptyText' | 'emptyIcon'> {
class?: HTMLAttributes['class']
/**
* @see https://tanstack.com/table/latest/docs/api/core/table#state
*/
state?: CoreOptions<TData>['state']
/**
* @see https://tanstack.com/table/latest/docs/api/core/table#onstatechange
*/
onStateChange?: CoreOptions<TData>['onStateChange']
/**
* @see https://tanstack.com/table/latest/docs/api/core/table#renderfallbackvalue
*/
renderFallbackValue?: CoreOptions<TData>['renderFallbackValue']
/**
* @see https://tanstack.com/table/latest/docs/guide/data
*/
data: TData[]
/**
* @see https://tanstack.com/table/latest/docs/api/core/column
*/
columns: ColumnDef<TData, TValue>[] | GroupColumnDef<TData, TValue>[]
/**
* @see https://tanstack.com/table/latest/docs/api/core/table#getrowid
*/
rowId?: string
/**
* @see https://tanstack.com/table/latest/docs/api/core/table#autoresetall
*/
autoResetAll?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablerowselection
*/
enableRowSelection?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablemultirowselection
*/
enableMultiRowSelection?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablesubrowselection
*/
enableSubRowSelection?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/column-filtering#enablecolumnfilters
*/
enableColumnFilters?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/column-filtering#manualfiltering
*/
manualFiltering?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#enablesorting
*/
enableSorting?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#enablemultisort
*/
enableMultiSort?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#enablemultiremove
*/
enableMultiRemove?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#enablesortingremoval
*/
enableSortingRemoval?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#manualsorting
*/
manualSorting?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#maxmultisortcolcount
*/
maxMultiSortColCount?: number
/**
* @see https://tanstack.com/table/latest/docs/api/features/pagination#manualpagination
*/
manualPagination?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/pagination#pagecount
*/
pageCount?: number
/**
* @see https://tanstack.com/table/latest/docs/api/features/pagination#rowcount
*/
rowCount?: number
/**
* @see https://tanstack.com/table/latest/docs/api/features/pagination#autoresetpageindex
*/
autoResetPageIndex?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#sortingfns
*/
sortingFns?: Record<string, (a: any, b: any) => number>
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#sortdescfirst-1
*/
sortDescFirst?: boolean
/**
* @see https://tanstack.com/table/latest/docs/api/features/sorting#ismultisortevent
*/
isMultiSortEvent?: (e: unknown) => boolean
// sub-components props
_tableHead?: NTableHeadProps
_tableHeader?: NTableHeaderProps
_tableFooter?: NTableFooterProps
_tableBody?: NTableBodyProps
_tableCaption?: NTableCaptionProps
_tableRow?: NTableRowProps | ((row?: TData) => NTableRowProps)
_tableCell?: NTableCellProps
_tableEmpty?: NTableEmptyProps
_tableLoading?: NTableLoadingProps
_scrollArea?: NScrollAreaProps
/**
* Whether the table is loading.
*/
loading?: boolean
/**
* `UnaUI` preset configuration
*
* @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/table.ts
*/
una?: NTableUnaProps & NScrollAreaUnaProps
}
export interface NTableBodyProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
una?: Pick<NTableUnaProps, 'tableBody'>
}
export interface NTableHeadProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
dataPinned?: 'left' | 'right' | false
una?: Pick<NTableUnaProps, 'tableHead'>
}
export interface NTableHeaderProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
una?: Pick<NTableUnaProps, 'tableHeader'>
}
export interface NTableFooterProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
una?: Pick<NTableUnaProps, 'tableFooter'>
}
export interface NTableRowProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
una?: Pick<NTableUnaProps, 'tableRow'>
}
export interface NTableCellProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
dataPinned?: 'left' | 'right' | false
una?: Pick<NTableUnaProps, 'tableCell'>
}
export interface NTableEmptyProps {
[key: string]: any
class?: HTMLAttributes['class']
colspan?: number
/**
* The text to display when the table is empty.
*/
emptyText?: string
/**
* The icon to display when the table is empty.
*/
emptyIcon?: string
_tableCell?: NTableCellProps
_tableRow?: NTableRowProps
una?: Pick<NTableUnaProps, 'tableEmpty' | 'tableRow' | 'tableCell' | 'tableEmptyText' | 'tableEmptyIcon'>
}
export interface NTableLoadingProps {
[key: string]: any
size?: HTMLAttributes['class']
enabled?: boolean
class?: HTMLAttributes['class']
colspan?: number
_tableCell?: NTableCellProps
_tableRow?: NTableRowProps
_tableProgress?: NProgressProps
una?: Pick<NTableUnaProps, 'tableLoading' | 'tableLoadingCell' | 'tableLoadingRow'>
}
export interface NTableCaptionProps extends PrimitiveProps {
[key: string]: any
class?: HTMLAttributes['class']
una?: Pick<NTableUnaProps, 'tableCaption'>
}
interface NTableUnaProps {
table?: HTMLAttributes['class']
tableRoot?: HTMLAttributes['class']
tableBody?: HTMLAttributes['class']
tableHead?: HTMLAttributes['class']
tableHeader?: HTMLAttributes['class']
tableFooter?: HTMLAttributes['class']
tableRow?: HTMLAttributes['class']
tableCell?: HTMLAttributes['class']
tableCaption?: HTMLAttributes['class']
tableLoading?: HTMLAttributes['class']
tableLoadingRow?: HTMLAttributes['class']
tableLoadingCell?: HTMLAttributes['class']
tableEmpty?: HTMLAttributes['class']
tableEmptyText?: HTMLAttributes['class']
tableEmptyIcon?: HTMLAttributes['class']
}
Components
Table.vue
TableRoot.vue
TableHeader.vue
TableHead.vue
TableBody.vue
TableFooter.vue
TableCell.vue
TableRow.vue
TableEmpty.vue
TableLoading.vue
TableCaption.vue
<script setup lang="ts" generic="TData, TValue">
import type {
ColumnFiltersState,
ColumnOrderState,
ColumnPinningState,
ExpandedState,
GroupingState,
Header,
PaginationState,
Row,
RowSelectionState,
SortingState,
Table,
VisibilityState,
} from '@tanstack/vue-table'
import type { NTableProps } from '../../../types'
import {
FlexRender,
getCoreRowModel,
getExpandedRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable,
} from '@tanstack/vue-table'
import { computed, h } from 'vue'
import { cn, valueUpdater } from '../../../utils'
import Button from '../../elements/Button.vue'
import Checkbox from '../../forms/Checkbox.vue'
import Input from '../../forms/Input.vue'
import ScrollArea from '../../scroll-area/ScrollArea.vue'
import TableBody from './TableBody.vue'
import TableCell from './TableCell.vue'
import TableEmpty from './TableEmpty.vue'
import TableFooter from './TableFooter.vue'
import TableHead from './TableHead.vue'
import TableHeader from './TableHeader.vue'
import TableLoading from './TableLoading.vue'
import TableRow from './TableRow.vue'
const props = withDefaults(defineProps <NTableProps<TData, TValue>>(), {
enableMultiRowSelection: true,
enableSortingRemoval: true,
})
const emit = defineEmits<{
select: [row: TData]
selectAll: [rows: TData[]]
expand: [row: TData]
row: [event: Event, row: TData]
}>()
const slots = defineSlots()
const rowSelection = defineModel<RowSelectionState>('rowSelection')
const sorting = defineModel<SortingState>('sorting')
const columnVisibility = defineModel<VisibilityState>('columnVisibility')
const columnFilters = defineModel<ColumnFiltersState>('columnFilters')
const globalFilter = defineModel<string>('globalFilter')
const columnOrder = defineModel<ColumnOrderState>('columnOrder')
const columnPinning = defineModel<ColumnPinningState>('columnPinning')
const expanded = defineModel<ExpandedState>('expanded')
const grouping = defineModel<GroupingState>('grouping')
const pagination = defineModel<PaginationState>('pagination', {
default: () => ({
pageIndex: 0,
pageSize: 10,
}),
})
const columnsWithMisc = computed(() => {
let data = []
// add selection column
data = props.enableRowSelection
? [
{
accessorKey: 'selection',
header: props.enableMultiRowSelection
? ({ table }: { table: Table<TData> }) => h(Checkbox, {
'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:modelValue': (value: boolean | 'indeterminate' | null) => {
table.toggleAllPageRowsSelected(!!value)
emit('selectAll', table.getRowModel().rows.map(row => row.original))
},
'areaLabel': 'Select all rows',
'onClick': (event: Event) => {
event.stopPropagation()
},
})
: '',
cell: ({ row }: { row: Row<TData> }) => h(Checkbox, {
'modelValue': row.getIsSelected() ?? false,
'onUpdate:modelValue': (value: boolean | 'indeterminate' | null) => {
row.toggleSelected(!!value)
emit('select', row.original)
},
'areaLabel': 'Select row',
'onClick': (event: Event) => {
event.stopPropagation()
},
}),
enableSorting: false,
},
...props.columns,
]
: props.columns
// add expanded column
data = slots.expanded
? [
{
accessorKey: 'expanded',
header: '',
cell: ({ row }: any) => h(Button, {
size: 'xs',
icon: true,
square: true,
btn: 'ghost-gray',
label: 'i-radix-icons-chevron-down',
onClick: () => {
row.toggleExpanded()
emit('expand', row)
},
una: {
btnIconLabel: cn(
'transform transition-transform duration-200',
row.getIsExpanded() ? '-rotate-180' : 'rotate-0',
),
},
}),
enableSorting: false,
enableHiding: false,
},
...data,
]
: data
return data
})
const table = useVueTable({
get data() {
return props.data ?? []
},
get columns() {
return columnsWithMisc.value ?? []
},
state: {
get sorting() { return sorting.value },
get columnFilters() { return columnFilters.value },
get globalFilter() { return globalFilter.value },
get rowSelection() { return rowSelection.value },
get columnVisibility() { return columnVisibility.value },
get pagination() { return pagination.value },
get columnOrder() { return columnOrder.value },
get columnPinning() { return columnPinning.value },
get expanded() { return expanded.value },
get grouping() { return grouping.value },
},
enableMultiRowSelection: props.enableMultiRowSelection,
enableSubRowSelection: props.enableSubRowSelection,
autoResetAll: props.autoResetAll,
enableRowSelection: props.enableRowSelection,
enableColumnFilters: props.enableColumnFilters,
manualPagination: props.manualPagination,
manualSorting: props.manualSorting,
manualFiltering: props.manualFiltering,
pageCount: props.pageCount,
rowCount: props.rowCount,
autoResetPageIndex: props.autoResetPageIndex,
enableSorting: props.enableSorting,
enableSortingRemoval: props.enableSortingRemoval,
enableMultiSort: props.enableMultiSort,
enableMultiRemove: props.enableMultiRemove,
maxMultiSortColCount: props.maxMultiSortColCount,
sortingFns: props.sortingFns,
isMultiSortEvent: props.isMultiSortEvent,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getRowId: (row: any) => props.rowId ? row[props.rowId] : row.id,
getSubRows: (row: any) => row.subRows,
getExpandedRowModel: getExpandedRowModel(),
onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilter),
onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinning),
onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, grouping),
})
function getHeaderColumnFiltersCount(headers: Header<unknown, unknown>[]): number {
let count = 0
headers.forEach((header) => {
if (header.column.columnDef.enableColumnFilter)
count++
})
return count
}
function getRowAttrs(data?: TData) {
if (typeof props._tableRow === 'function') {
return props._tableRow(data)
}
return props._tableRow
}
defineExpose({
...table,
})
</script>
<template>
<div
:class="cn('table-root', props.una?.tableRoot)"
>
<ScrollArea
orientation="horizontal"
v-bind="props._scrollArea"
:una
>
<table
v-bind="$attrs"
:class="cn(
'table',
props.una?.table,
props.class,
)"
>
<!-- header -->
<TableHeader
:una
v-bind="props._tableHeader"
>
<slot name="header" :table="table">
<TableRow
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
:una
v-bind="getRowAttrs()"
>
<!-- headers -->
<TableHead
v-for="header in headerGroup.headers"
:key="header.id"
:colspan="header.colSpan"
:data-pinned="header.column.getIsPinned()"
:una
v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
>
<Button
v-if="header.column.columnDef.enableSorting || (header.column.columnDef.enableSorting !== false && enableSorting)"
btn="ghost-gray"
size="sm"
class="font-normal -ml-1em"
:una="{
btnTrailing: 'text-sm',
}"
:trailing="header.column.getIsSorted() === 'asc'
? 'i-lucide-arrow-up-wide-narrow' : header.column.getIsSorted() === 'desc'
? 'i-lucide-arrow-down-narrow-wide' : 'i-lucide-arrow-up-down'"
@click="header.column.getToggleSortingHandler()?.($event)"
>
<slot
:name="`${header.id}-header`"
:column="header.column"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</slot>
</Button>
<slot
v-else
:name="`${header.id}-header`"
:column="header.column"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</slot>
</TableHead>
</TableRow>
<!-- column filters -->
<template
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<TableRow
v-if="getHeaderColumnFiltersCount(headerGroup.headers) > 0 || enableColumnFilters"
data-filter="true"
:una
v-bind="getRowAttrs()"
>
<TableHead
v-for="header in headerGroup.headers"
:key="header.id"
:una
:colspan="header.colSpan"
class="font-normal"
:data-pinned="header.column.getIsPinned()"
v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
>
<slot
v-if="header.id !== 'selection' && ((header.column.columnDef.enableColumnFilter !== false && enableColumnFilters) || header.column.columnDef.enableColumnFilter)"
:name="`${header.id}-filter`"
:column="header.column"
>
<Input
class="w-auto"
:model-value="header.column.getFilterValue() as string"
:placeholder="header.column.columnDef.header"
@update:model-value="header.column.setFilterValue($event)"
/>
</slot>
</TableHead>
</TableRow>
</template>
</slot>
<TableLoading
:enabled="props.loading"
:una
v-bind="props._tableLoading"
>
<slot name="loading" />
</TableLoading>
</TableHeader>
<!-- body -->
<TableBody
:una
v-bind="props._tableBody"
>
<slot name="body" :table="table">
<template v-if="table.getRowModel().rows?.length">
<template
v-for="row in table.getRowModel().rows"
:key="row.id"
>
<TableRow
:data-state="row.getIsSelected() && 'selected'"
:una
v-bind="getRowAttrs(row.original)"
@click="emit('row', $event, row.original)"
>
<slot
name="row"
:row="row"
>
<!-- rows -->
<TableCell
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:data-pinned="cell.column.getIsPinned()"
:una
v-bind="{ ...props._tableCell, ...cell.column.columnDef.meta }"
>
<slot
:name="`${cell.column.id}-cell`"
:cell="cell"
>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</slot>
</TableCell>
</slot>
</TableRow>
<!-- expanded -->
<TableRow
v-if="row.getIsExpanded() && $slots.expanded"
:una
v-bind="getRowAttrs(row.original)"
>
<TableCell
:colspan="row.getAllCells().length"
:una
v-bind="props._tableCell"
>
<slot name="expanded" :row="row" />
</TableCell>
</TableRow>
</template>
</template>
<TableEmpty
v-else
:colspan="table.getAllLeafColumns().length"
:una
:empty-text="props.emptyText"
:empty-icon="props.emptyIcon"
v-bind="props._tableEmpty"
>
<slot name="empty" />
</TableEmpty>
</slot>
</TableBody>
<!-- footer -->
<TableFooter
v-if="table.getFooterGroups().length > 0"
:una
v-bind="props._tableFooter"
>
<slot name="footer" :table="table">
<template
v-for="footerGroup in table.getFooterGroups()"
:key="footerGroup.id"
>
<TableRow
v-if="footerGroup.headers.length > 0"
:una
v-bind="getRowAttrs()"
>
<template
v-for="header in footerGroup.headers"
:key="header.id"
>
<TableHead
v-if="header.column.columnDef.footer"
:colspan="header.colSpan"
:una
v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
>
<slot :name="`${header.id}-footer`" :column="header.column">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.footer"
:props="header.getContext()"
/>
</slot>
</TableHead>
</template>
</TableRow>
</template>
</slot>
</TableFooter>
</table>
</ScrollArea>
</div>
</template>
🔴 ../packages/nuxt/src/runtime/components/data/table/TableRoot.vue | Snippet does not exist 🔴
<script setup lang="ts">
import type { NTableHeaderProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableHeaderProps>(), {
as: 'thead',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="cn(
'table-header',
props?.una?.tableHeader,
props.class,
)"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<script setup lang="ts">
import type { NTableHeadProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableHeadProps>(), {
as: 'th',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="cn(
'table-head',
props.una?.tableHead,
props.class,
{ 'table-head-pinned': props.dataPinned },
props.dataPinned === 'left' ? 'table-head-pinned-left' : 'table-head-pinned-right',
)"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<script setup lang="ts">
import type { NTableBodyProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableBodyProps>(), {
as: 'tbody',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="cn(
'table-body',
props?.una?.tableBody,
props.class,
)"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<script setup lang="ts">
import type { NTableFooterProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableFooterProps>(), {
as: 'tfoot',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="cn(
'table-footer',
props.una?.tableFooter,
props.class,
)"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<script setup lang="ts">
import type { NTableCellProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableCellProps>(), {
as: 'td',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="
cn(
'table-cell',
props?.una?.tableCell,
props.class,
{ 'table-cell-pinned': dataPinned },
dataPinned === 'left' ? 'table-cell-pinned-left' : 'table-cell-pinned-right',
)
"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<script setup lang="ts">
import type { NTableRowProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableRowProps>(), {
as: 'tr',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
role="row"
:class="cn(
'table-row',
props.una?.tableRow,
props.class,
)"
v-bind="{ ...rootProps, ...$attrs }"
>
<slot />
</Primitive>
</template>
<style>
/* the builtin unocss utility is overwritten, so it has to be defined here */
.table-row {
display: table-row;
}
</style>
<script setup lang="ts">
import type { NTableEmptyProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { cn, omitProps } from '../../../utils'
import TableCell from './TableCell.vue'
import TableRow from './TableRow.vue'
const props = withDefaults(defineProps<NTableEmptyProps>(), {
colspan: 1,
emptyText: 'No results.',
emptyIcon: 'table-empty-icon-name',
})
const delegatedProps = reactiveOmit(props, ['class'])
</script>
<template>
<TableRow
:class="cn(
'table-empty-row',
props.una?.tableRow,
)"
v-bind="delegatedProps._tableRow"
>
<TableCell
:class="
cn(
'table-empty-cell',
props.una?.tableCell,
)
"
:colspan="props.colspan"
v-bind="delegatedProps._tableCell"
>
<div
:class="cn(
'table-empty',
props.una?.tableEmpty,
props.class,
)"
v-bind="omitProps(delegatedProps, ['_tableRow', '_tableCell', 'colspan'])"
>
<slot>
<NIcon
:name="props.emptyIcon"
:class="cn(
'table-empty-icon',
props.una?.tableEmptyIcon,
)"
/>
<span
:class="cn(
'table-empty-text',
props.una?.tableEmptyText,
)"
>
{{ props.emptyText }}
</span>
</slot>
</div>
</TableCell>
</TableRow>
</template>
<script setup lang="ts">
import type { NTableLoadingProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { cn } from '../../../utils'
import Progress from '../../elements/Progress.vue'
import TableRow from './TableRow.vue'
const props = withDefaults(defineProps<NTableLoadingProps>(), {
size: '2.5px',
})
const delegatedProps = reactiveOmit(props, ['class'])
</script>
<template>
<TableRow
:class="cn(
'table-loading-row',
props.una?.tableLoadingRow,
)"
data-loading="true"
v-bind="delegatedProps._tableRow"
>
<td
:class="
cn(
'table-loading-cell',
props.una?.tableLoadingCell,
)
"
:colspan="0"
v-bind="delegatedProps._tableCell"
>
<div
v-if="enabled"
:class="cn(
'table-loading',
props.una?.tableLoading,
)"
>
<slot>
<Progress
:size
v-bind="props._tableProgress"
:class="cn(
props._tableProgress?.class,
)"
/>
</slot>
</div>
</td>
</TableRow>
</template>
<script setup lang="ts">
import type { NTableCaptionProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '../../../utils'
const props = withDefaults(defineProps<NTableCaptionProps>(), {
as: 'caption',
})
const rootProps = reactiveOmit(props, ['una', 'class'])
</script>
<template>
<Primitive
:class="cn(
'table-caption',
props?.una?.tableCaption,
props.class,
)"
v-bind="{ ...rootProps, ...$attrs } "
>
<slot />
</Primitive>
</template>
On This Page