Vue 3 wrapper for TanStack Table with slot-based rendering and headless composables.
npm install tanstack-table-vueVue 3 wrapper for TanStack Table with slot-based rendering and headless composables.
``bash`
pnpm add tanstack-table-vue
Component`vue
`
- #header-{columnId} — custom header: { column, context }#cell-{columnId}
- — custom cell: { row, value, context }#footer-{columnId}
- — custom footer: { column, context }
Column meta is typed via TSTableColumnMeta:
`ts`
const columns: ColumnDef
{
accessorKey: 'name',
meta: { size: 200, enableSorting: true, headerClass: 'font-bold' },
},
]
Available meta fields: size, style, enableSorting, headerClass, cellClass.
Import from the tanstack-table-vue/plugins subpath:
`ts`
import { usePaginationState, useTableSorting, useTableSelection } from 'tanstack-table-vue/plugins'
Manages 1-based page state and provides TanStack-compatible pagination options.
`ts`
const { page, pageSize, paginationState, paginationOptions, setPage, setPageSize, resetPagination } =
usePaginationState({ defaultPage: 1, defaultPageSize: 10 })
Spread paginationOptions.value into your tableOptions prop.
Manages sorting state with a pre-configured sorted row model.
`ts`
const { sorting, sortingOptions, clearSorting } = useTableSorting([{ id: 'name', desc: false }])
Manages row selection state.
`ts`
const { rowSelection, selectionOptions, selectedCount, clearSelection } = useTableSelection()
`ts
const { paginationOptions } = usePaginationState()
const { sortingOptions } = useTableSorting()
const { selectionOptions } = useTableSelection()
const tableOptions = computed(() => ({
...paginationOptions.value,
...sortingOptions.value,
...selectionOptions.value,
}))
`
`vue`
`ts`
import { valueUpdater, processColumns } from 'tanstack-table-vue'
- valueUpdater(updaterOrValue, ref) — apply TanStack updater functions to Vue refsprocessColumns(columnHelper, columns, slots)` — process column definitions with slot integration
-
MIT