Table
A responsive table element to display data in rows and columns.
Demo
| Id | Date | Status | Amount | |
|---|---|---|---|---|
| 4600 | 2024-03-11T15:30:00 | paid | james.anderson@example.com | 594 |
| 4599 | 2024-03-11T10:10:00 | failed | mia.white@example.com | 276 |
| 4598 | 2024-03-11T08:50:00 | refunded | william.brown@example.com | 315 |
| 4597 | 2024-03-10T19:45:00 | paid | emma.davis@example.com | 529 |
| 4596 | 2024-03-10T15:55:00 | paid | ethan.harris@example.com | 639 |
Related Types
This requires the following types to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { ComponentConfig } from '@/ui/utils/utils'
import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core'
import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, Updater, VisibilityOptions, VisibilityState } from '@tanstack/vue-table'
import type { Ref, WatchOptions } from 'vue'
import theme from '@/ui/theme/table'
import {
FlexRender,
getCoreRowModel,
getExpandedRowModel,
getFilteredRowModel,
getSortedRowModel,
useVueTable,
} from '@tanstack/vue-table'
import { reactiveOmit } from '@vueuse/shared'
import { Primitive } from 'reka-ui'
import { upperFirst } from 'scule'
import { tv } from 'tailwind-variants'
import { computed, ref, watch } from 'vue'
declare module '@tanstack/table-core' {
interface ColumnMeta<TData extends RowData, TValue> {
class?: {
th?: string | ((cell: Header<TData, TValue>) => string)
td?: string | ((cell: Cell<TData, TValue>) => string)
}
}
interface TableMeta<TData> {
class?: {
tr?: string | ((row: Row<TData>) => string)
}
}
}
type Table = ComponentConfig<typeof theme>
export type TableRow<T> = Row<T>
export type TableData = RowData
export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
state?: CoreOptions<T>['state']
onStateChange?: CoreOptions<T>['onStateChange']
renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
}
export interface TableProps<T extends TableData> extends TableOptions<T> {
as?: any
data?: T[]
columns?: TableColumn<T>[]
caption?: string
meta?: TableMeta<T>
empty?: string
sticky?: boolean
loading?: boolean
loadingColor?: Table['variants']['loadingColor']
loadingAnimation?: Table['variants']['loadingAnimation']
watchOptions?: WatchOptions
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
*/
globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
*/
columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
*/
columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
*/
columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
*/
visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
*/
sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
*/
groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
*/
expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
*/
rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
*/
rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
*/
paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
*/
facetedOptions?: FacetedOptions<T>
onSelect?: (row: TableRow<T>, e?: Event) => void
class?: any
ui?: Table['slots']
}
type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
export type TableSlots<T> = {
expanded: (props: { row: Row<T> }) => any
empty: (props?: object) => any
loading: (props?: object) => any
caption: (props?: object) => any
} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
</script>
<script setup lang="ts" generic="T extends TableData">
const props = withDefaults(defineProps<TableProps<T>>(), {
watchOptions: () => ({
deep: true,
}),
})
const slots = defineSlots<TableSlots<T>>()
const data = ref(props.data ?? []) as Ref<T[]>
const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
const meta = computed(() => props.meta ?? {})
const ui = computed(() => tv(theme)({
sticky: props.sticky,
loading: props.loading,
loadingColor: props.loadingColor,
loadingAnimation: props.loadingAnimation,
}))
const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
const sortingState = defineModel<SortingState>('sorting', { default: [] })
const groupingState = defineModel<GroupingState>('grouping', { default: [] })
const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
const paginationState = defineModel<PaginationState>('pagination', { default: {} })
const tableRef = ref<HTMLTableElement>()
const tableApi = useVueTable({
...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
data,
columns: columns.value,
meta: meta.value,
getCoreRowModel: getCoreRowModel(),
...(props.globalFilterOptions || {}),
onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
...(props.columnFiltersOptions || {}),
getFilteredRowModel: getFilteredRowModel(),
onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrderState),
...(props.visibilityOptions || {}),
onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
...(props.columnPinningOptions || {}),
onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
...(props.columnSizingOptions || {}),
onColumnSizingChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingState),
onColumnSizingInfoChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingInfoState),
...(props.rowSelectionOptions || {}),
onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
...(props.rowPinningOptions || {}),
onRowPinningChange: updaterOrValue => valueUpdater(updaterOrValue, rowPinningState),
...(props.sortingOptions || {}),
getSortedRowModel: getSortedRowModel(),
onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
...(props.groupingOptions || {}),
onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, groupingState),
...(props.expandedOptions || {}),
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
...(props.paginationOptions || {}),
onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
...(props.facetedOptions || {}),
state: {
get globalFilter() {
return globalFilterState.value
},
get columnFilters() {
return columnFiltersState.value
},
get columnOrder() {
return columnOrderState.value
},
get columnVisibility() {
return columnVisibilityState.value
},
get columnPinning() {
return columnPinningState.value
},
get expanded() {
return expandedState.value
},
get rowSelection() {
return rowSelectionState.value
},
get sorting() {
return sortingState.value
},
get grouping() {
return groupingState.value
},
get rowPinning() {
return rowPinningState.value
},
get columnSizing() {
return columnSizingState.value
},
get columnSizingInfo() {
return columnSizingInfoState.value
},
get pagination() {
return paginationState.value
},
},
})
function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
}
function handleRowSelect(row: TableRow<T>, e: Event) {
if (!props.onSelect) {
return
}
const target = e.target as HTMLElement
const isInteractive = target.closest('button') || target.closest('a')
if (isInteractive) {
return
}
e.preventDefault()
e.stopPropagation()
props.onSelect(row, e)
}
watch(
() => props.data,
() => {
data.value = props.data ? [...props.data] : []
},
props.watchOptions,
)
defineExpose({
tableRef,
tableApi,
})
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
<caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
<slot name="caption">
{{ caption }}
</slot>
</caption>
<thead :class="ui.thead({ class: [props.ui?.thead] })">
<tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
<th
v-for="header in headerGroup.headers"
:key="header.id"
:data-pinned="header.column.getIsPinned()"
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
:class="ui.th({
class: [
props.ui?.th,
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th,
],
pinned: !!header.column.getIsPinned(),
})"
>
<slot :name="`${header.id}-header`" v-bind="header.getContext()">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
</slot>
</th>
</tr>
</thead>
<tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
<template v-if="tableApi.getRowModel().rows?.length">
<template v-for="row in tableApi.getRowModel().rows" :key="row.id">
<tr
:data-selected="row.getIsSelected()"
:data-selectable="!!props.onSelect"
:data-expanded="row.getIsExpanded()"
:role="props.onSelect ? 'button' : undefined"
:tabindex="props.onSelect ? 0 : undefined"
:class="ui.tr({
class: [
props.ui?.tr,
typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr,
],
})"
@click="handleRowSelect(row, $event)"
>
<td
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:data-pinned="cell.column.getIsPinned()"
:class="ui.td({
class: [
props.ui?.td,
typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td,
],
pinned: !!cell.column.getIsPinned(),
})"
>
<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</slot>
</td>
</tr>
<tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
<td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
<slot name="expanded" :row="row" />
</td>
</tr>
</template>
</template>
<tr v-else-if="loading && !!slots.loading">
<td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
<slot name="loading" />
</td>
</tr>
<tr v-else>
<td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty">
{{ empty || 'No data' }}
</slot>
</td>
</tr>
</tbody>
</table>
</Primitive>
</template>vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { ComponentConfig } from '@/UI/Utils/utils'
import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core'
import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, Updater, VisibilityOptions, VisibilityState } from '@tanstack/vue-table'
import type { Ref, WatchOptions } from 'vue'
import theme from '@/UI/Theme/table'
import {
FlexRender,
getCoreRowModel,
getExpandedRowModel,
getFilteredRowModel,
getSortedRowModel,
useVueTable,
} from '@tanstack/vue-table'
import { reactiveOmit } from '@vueuse/shared'
import { Primitive } from 'reka-ui'
import { upperFirst } from 'scule'
import { tv } from 'tailwind-variants'
import { computed, ref, watch } from 'vue'
declare module '@tanstack/table-core' {
interface ColumnMeta<TData extends RowData, TValue> {
class?: {
th?: string | ((cell: Header<TData, TValue>) => string)
td?: string | ((cell: Cell<TData, TValue>) => string)
}
}
interface TableMeta<TData> {
class?: {
tr?: string | ((row: Row<TData>) => string)
}
}
}
type Table = ComponentConfig<typeof theme>
export type TableRow<T> = Row<T>
export type TableData = RowData
export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
state?: CoreOptions<T>['state']
onStateChange?: CoreOptions<T>['onStateChange']
renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
}
export interface TableProps<T extends TableData> extends TableOptions<T> {
as?: any
data?: T[]
columns?: TableColumn<T>[]
caption?: string
meta?: TableMeta<T>
empty?: string
sticky?: boolean
loading?: boolean
loadingColor?: Table['variants']['loadingColor']
loadingAnimation?: Table['variants']['loadingAnimation']
watchOptions?: WatchOptions
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
*/
globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
*/
columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
*/
columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
*/
columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
*/
visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
*/
sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
*/
groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
*/
expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
*/
rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
*/
rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
*/
paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
/**
* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
* @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
*/
facetedOptions?: FacetedOptions<T>
onSelect?: (row: TableRow<T>, e?: Event) => void
class?: any
ui?: Table['slots']
}
type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
export type TableSlots<T> = {
expanded: (props: { row: Row<T> }) => any
empty: (props?: object) => any
loading: (props?: object) => any
caption: (props?: object) => any
} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
</script>
<script setup lang="ts" generic="T extends TableData">
const props = withDefaults(defineProps<TableProps<T>>(), {
watchOptions: () => ({
deep: true,
}),
})
const slots = defineSlots<TableSlots<T>>()
const data = ref(props.data ?? []) as Ref<T[]>
const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
const meta = computed(() => props.meta ?? {})
const ui = computed(() => tv(theme)({
sticky: props.sticky,
loading: props.loading,
loadingColor: props.loadingColor,
loadingAnimation: props.loadingAnimation,
}))
const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
const sortingState = defineModel<SortingState>('sorting', { default: [] })
const groupingState = defineModel<GroupingState>('grouping', { default: [] })
const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
const paginationState = defineModel<PaginationState>('pagination', { default: {} })
const tableRef = ref<HTMLTableElement>()
const tableApi = useVueTable({
...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
data,
columns: columns.value,
meta: meta.value,
getCoreRowModel: getCoreRowModel(),
...(props.globalFilterOptions || {}),
onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
...(props.columnFiltersOptions || {}),
getFilteredRowModel: getFilteredRowModel(),
onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrderState),
...(props.visibilityOptions || {}),
onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
...(props.columnPinningOptions || {}),
onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
...(props.columnSizingOptions || {}),
onColumnSizingChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingState),
onColumnSizingInfoChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingInfoState),
...(props.rowSelectionOptions || {}),
onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
...(props.rowPinningOptions || {}),
onRowPinningChange: updaterOrValue => valueUpdater(updaterOrValue, rowPinningState),
...(props.sortingOptions || {}),
getSortedRowModel: getSortedRowModel(),
onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
...(props.groupingOptions || {}),
onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, groupingState),
...(props.expandedOptions || {}),
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
...(props.paginationOptions || {}),
onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
...(props.facetedOptions || {}),
state: {
get globalFilter() {
return globalFilterState.value
},
get columnFilters() {
return columnFiltersState.value
},
get columnOrder() {
return columnOrderState.value
},
get columnVisibility() {
return columnVisibilityState.value
},
get columnPinning() {
return columnPinningState.value
},
get expanded() {
return expandedState.value
},
get rowSelection() {
return rowSelectionState.value
},
get sorting() {
return sortingState.value
},
get grouping() {
return groupingState.value
},
get rowPinning() {
return rowPinningState.value
},
get columnSizing() {
return columnSizingState.value
},
get columnSizingInfo() {
return columnSizingInfoState.value
},
get pagination() {
return paginationState.value
},
},
})
function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
}
function handleRowSelect(row: TableRow<T>, e: Event) {
if (!props.onSelect) {
return
}
const target = e.target as HTMLElement
const isInteractive = target.closest('button') || target.closest('a')
if (isInteractive) {
return
}
e.preventDefault()
e.stopPropagation()
props.onSelect(row, e)
}
watch(
() => props.data,
() => {
data.value = props.data ? [...props.data] : []
},
props.watchOptions,
)
defineExpose({
tableRef,
tableApi,
})
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
<caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
<slot name="caption">
{{ caption }}
</slot>
</caption>
<thead :class="ui.thead({ class: [props.ui?.thead] })">
<tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
<th
v-for="header in headerGroup.headers"
:key="header.id"
:data-pinned="header.column.getIsPinned()"
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
:class="ui.th({
class: [
props.ui?.th,
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th,
],
pinned: !!header.column.getIsPinned(),
})"
>
<slot :name="`${header.id}-header`" v-bind="header.getContext()">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
</slot>
</th>
</tr>
</thead>
<tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
<template v-if="tableApi.getRowModel().rows?.length">
<template v-for="row in tableApi.getRowModel().rows" :key="row.id">
<tr
:data-selected="row.getIsSelected()"
:data-selectable="!!props.onSelect"
:data-expanded="row.getIsExpanded()"
:role="props.onSelect ? 'button' : undefined"
:tabindex="props.onSelect ? 0 : undefined"
:class="ui.tr({
class: [
props.ui?.tr,
typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr,
],
})"
@click="handleRowSelect(row, $event)"
>
<td
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:data-pinned="cell.column.getIsPinned()"
:class="ui.td({
class: [
props.ui?.td,
typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td,
],
pinned: !!cell.column.getIsPinned(),
})"
>
<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</slot>
</td>
</tr>
<tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
<td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
<slot name="expanded" :row="row" />
</td>
</tr>
</template>
</template>
<tr v-else-if="loading && !!slots.loading">
<td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
<slot name="loading" />
</td>
</tr>
<tr v-else>
<td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty">
{{ empty || 'No data' }}
</slot>
</td>
</tr>
</tbody>
</table>
</Primitive>
</template>Theme
ts
export default {
slots: {
root: '',
base: '',
caption: '',
thead: '',
tbody: '',
tr: '',
th: '',
td: '',
empty: '',
loading: '',
},
variants: {
pinned: {
true: {
th: '',
td: '',
},
},
sticky: {
true: {
thead: '',
},
},
loading: {
true: {
thead: '',
},
},
loadingAnimation: {
'carousel': '',
'carousel-inverse': '',
'swing': '',
'elastic': '',
},
loadingColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
},
compoundVariants: [],
defaultVariants: {
loadingColor: 'primary',
loadingAnimation: 'carousel',
} as const,
}View Nuxt UI theme
ts
export default {
slots: {
root: 'relative overflow-auto',
base: 'min-w-full overflow-clip',
caption: 'sr-only',
thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)',
tbody: 'divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary',
tr: 'data-[selected=true]:bg-elevated/50',
th: 'px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
td: 'p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0',
empty: 'py-6 text-center text-sm text-muted',
loading: 'py-6 text-center',
},
variants: {
pinned: {
true: {
th: 'sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
td: 'sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
},
},
sticky: {
true: {
thead: 'sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur',
},
},
loading: {
true: {
thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px',
},
},
loadingAnimation: {
'carousel': '',
'carousel-inverse': '',
'swing': '',
'elastic': '',
},
loadingColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
},
compoundVariants: [
{
loading: true,
loadingColor: 'primary',
class: {
thead: 'after:bg-primary',
},
} as const,
{
loading: true,
loadingColor: 'secondary',
class: {
thead: 'after:bg-secondary',
},
} as const,
{
loading: true,
loadingColor: 'success',
class: {
thead: 'after:bg-success',
},
} as const,
{
loading: true,
loadingColor: 'info',
class: {
thead: 'after:bg-info',
},
} as const,
{
loading: true,
loadingColor: 'warning',
class: {
thead: 'after:bg-warning',
},
} as const,
{
loading: true,
loadingColor: 'error',
class: {
thead: 'after:bg-error',
},
} as const,
{
loading: true,
loadingColor: 'neutral',
class: {
thead: 'after:bg-inverted',
},
} as const,
{
loading: true,
loadingAnimation: 'carousel',
class: {
thead: 'after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]',
},
} as const,
{
loading: true,
loadingAnimation: 'carousel-inverse',
class: {
thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]',
},
} as const,
{
loading: true,
loadingAnimation: 'swing',
class: {
thead: 'after:animate-[swing_2s_ease-in-out_infinite]',
},
} as const,
{
loading: true,
loadingAnimation: 'elastic',
class: {
thead: 'after:animate-[elastic_2s_ease-in-out_infinite]',
},
} as const,
],
defaultVariants: {
loadingColor: 'primary',
loadingAnimation: 'carousel',
} as const,
}Test
To test this component, you can use the following test file:
ts
import type { TableColumn } from '@/ui/components/Table.vue'
import type { RenderOptions } from '@testing-library/vue'
import Badge from '@/ui/components/Badge.vue'
import Button from '@/ui/components/Button.vue'
import Checkbox from '@/ui/components/Checkbox.vue'
import DropdownMenu from '@/ui/components/DropdownMenu.vue'
import Table from '@/ui/components/Table.vue'
import theme from '@/ui/theme/table'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
import { h } from 'vue'
describe('table', () => {
const loadingColors = Object.keys(theme.variants.loadingColor) as any
const loadingAnimations = Object.keys(theme.variants.loadingAnimation) as any
const data = [{
id: 'm5gr84i9',
amount: 316,
status: 'success',
email: 'ken99@yahoo.com',
}, {
id: '3u1reuv4',
amount: 242,
status: 'success',
email: 'Abe45@gmail.com',
}, {
id: 'derv1ws0',
amount: 837,
status: 'processing',
email: 'Monserrat44@gmail.com',
}, {
id: '5kma53ae',
amount: 874,
status: 'success',
email: 'Silas22@gmail.com',
}, {
id: 'bhqecj4p',
amount: 721,
status: 'failed',
email: 'carmella@hotmail.com',
}]
const columns: TableColumn<typeof data[number]>[] = [{
id: 'select',
header: ({ table }) => h(Checkbox, {
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate' | undefined) => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all',
}),
cell: ({ row }) => h(Checkbox, {
'modelValue': row.getIsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate' | undefined) => row.toggleSelected(!!value),
'ariaLabel': 'Select row',
}),
enableSorting: false,
enableHiding: false,
}, {
accessorKey: 'id',
header: '#',
cell: ({ row }) => `#${row.getValue('id')}`,
}, {
accessorKey: 'date',
header: 'Date',
cell: ({ row }) => {
return new Date(row.getValue('date')).toLocaleString('en-US', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit',
hour12: false,
})
},
}, {
accessorKey: 'status',
header: 'Status',
cell: ({ row }) => {
const color = ({
paid: 'success' as const,
failed: 'error' as const,
refunded: 'neutral' as const,
})[row.getValue('status') as string]
return h(Badge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
},
}, {
accessorKey: 'email',
header: ({ column }) => {
const isSorted = column.getIsSorted()
return h(Button, {
color: 'neutral',
variant: 'ghost',
label: 'Email',
icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
class: '-mx-2.5',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
})
},
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, {
accessorKey: 'amount',
header: () => h('div', { class: 'text-right' }, 'Amount'),
cell: ({ row }) => {
const amount = Number.parseFloat(row.getValue('amount'))
const formatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
}).format(amount)
return h('div', { class: 'text-right font-medium' }, formatted)
},
}, {
id: 'actions',
enableHiding: false,
cell: ({ row }) => {
const items = [{
type: 'label',
label: 'Actions',
}, {
label: 'Copy payment ID',
}, {
label: row.getIsExpanded() ? 'Collapse' : 'Expand',
}, {
type: 'separator',
}, {
label: 'View customer',
}, {
label: 'View payment details',
}]
return h('div', { class: 'text-right' }, h<any>(DropdownMenu, {
content: {
align: 'end',
},
items,
}, () => h(Button, {
icon: 'i-lucide-ellipsis-vertical',
color: 'neutral',
variant: 'ghost',
class: 'ml-auto',
})))
},
}]
const props = { data }
it.each<[string, RenderOptions<typeof Table>]>([
// Props
['with data', { props }],
['without data', {}],
['with empty', { props: { empty: 'There is no data' } }],
['with caption', { props: { ...props, caption: 'Table caption' } }],
['with columns', { props: { ...props, columns } }],
['with sticky', { props: { ...props, sticky: true } }],
['with loading', { props: { ...props, loading: true } }],
...loadingColors.map((loadingColor: string) => [`with loading color ${loadingColor}`, { props: { ...props, loading: true, loadingColor } }]),
...loadingAnimations.map((loadingAnimation: string) => [`with loading animation ${loadingAnimation}`, { props: { ...props, loading: true, loadingAnimation } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { base: 'table-auto' } } }],
// Slots
['with header slot', { props, slots: { 'id-header': () => 'ID Header slot' } }],
['with cell slot', { props, slots: { 'id-cell': () => 'ID Cell slot' } }],
['with expanded slot', { props, slots: { expanded: () => 'Expanded slot' } }],
['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
['with caption slot', { props, slots: { caption: () => 'Caption slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(Table, options)
expect(html()).toMatchSnapshot()
})
})ts
import type { TableColumn } from '@/UI/Components/Table.vue'
import type { RenderOptions } from '@testing-library/vue'
import Badge from '@/UI/Components/Badge.vue'
import Button from '@/UI/Components/Button.vue'
import Checkbox from '@/UI/Components/Checkbox.vue'
import DropdownMenu from '@/UI/Components/DropdownMenu.vue'
import Table from '@/UI/Components/Table.vue'
import theme from '@/UI/Theme/table'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
import { h } from 'vue'
describe('table', () => {
const loadingColors = Object.keys(theme.variants.loadingColor) as any
const loadingAnimations = Object.keys(theme.variants.loadingAnimation) as any
const data = [{
id: 'm5gr84i9',
amount: 316,
status: 'success',
email: 'ken99@yahoo.com',
}, {
id: '3u1reuv4',
amount: 242,
status: 'success',
email: 'Abe45@gmail.com',
}, {
id: 'derv1ws0',
amount: 837,
status: 'processing',
email: 'Monserrat44@gmail.com',
}, {
id: '5kma53ae',
amount: 874,
status: 'success',
email: 'Silas22@gmail.com',
}, {
id: 'bhqecj4p',
amount: 721,
status: 'failed',
email: 'carmella@hotmail.com',
}]
const columns: TableColumn<typeof data[number]>[] = [{
id: 'select',
header: ({ table }) => h(Checkbox, {
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate' | undefined) => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all',
}),
cell: ({ row }) => h(Checkbox, {
'modelValue': row.getIsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate' | undefined) => row.toggleSelected(!!value),
'ariaLabel': 'Select row',
}),
enableSorting: false,
enableHiding: false,
}, {
accessorKey: 'id',
header: '#',
cell: ({ row }) => `#${row.getValue('id')}`,
}, {
accessorKey: 'date',
header: 'Date',
cell: ({ row }) => {
return new Date(row.getValue('date')).toLocaleString('en-US', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit',
hour12: false,
})
},
}, {
accessorKey: 'status',
header: 'Status',
cell: ({ row }) => {
const color = ({
paid: 'success' as const,
failed: 'error' as const,
refunded: 'neutral' as const,
})[row.getValue('status') as string]
return h(Badge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
},
}, {
accessorKey: 'email',
header: ({ column }) => {
const isSorted = column.getIsSorted()
return h(Button, {
color: 'neutral',
variant: 'ghost',
label: 'Email',
icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
class: '-mx-2.5',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
})
},
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, {
accessorKey: 'amount',
header: () => h('div', { class: 'text-right' }, 'Amount'),
cell: ({ row }) => {
const amount = Number.parseFloat(row.getValue('amount'))
const formatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
}).format(amount)
return h('div', { class: 'text-right font-medium' }, formatted)
},
}, {
id: 'actions',
enableHiding: false,
cell: ({ row }) => {
const items = [{
type: 'label',
label: 'Actions',
}, {
label: 'Copy payment ID',
}, {
label: row.getIsExpanded() ? 'Collapse' : 'Expand',
}, {
type: 'separator',
}, {
label: 'View customer',
}, {
label: 'View payment details',
}]
return h('div', { class: 'text-right' }, h<any>(DropdownMenu, {
content: {
align: 'end',
},
items,
}, () => h(Button, {
icon: 'i-lucide-ellipsis-vertical',
color: 'neutral',
variant: 'ghost',
class: 'ml-auto',
})))
},
}]
const props = { data }
it.each<[string, RenderOptions<typeof Table>]>([
// Props
['with data', { props }],
['without data', {}],
['with empty', { props: { empty: 'There is no data' } }],
['with caption', { props: { ...props, caption: 'Table caption' } }],
['with columns', { props: { ...props, columns } }],
['with sticky', { props: { ...props, sticky: true } }],
['with loading', { props: { ...props, loading: true } }],
...loadingColors.map((loadingColor: string) => [`with loading color ${loadingColor}`, { props: { ...props, loading: true, loadingColor } }]),
...loadingAnimations.map((loadingAnimation: string) => [`with loading animation ${loadingAnimation}`, { props: { ...props, loading: true, loadingAnimation } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { base: 'table-auto' } } }],
// Slots
['with header slot', { props, slots: { 'id-header': () => 'ID Header slot' } }],
['with cell slot', { props, slots: { 'id-cell': () => 'ID Cell slot' } }],
['with expanded slot', { props, slots: { expanded: () => 'Expanded slot' } }],
['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
['with caption slot', { props, slots: { caption: () => 'Caption slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(Table, options)
expect(html()).toMatchSnapshot()
})
})Contributors
Estéban