Table
Styled table primitives for structured data, with header, body, footer, row, cell and caption parts on native table elements.
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@plexui/vue/components/Table";
import { DataTable, DataTableColumnHeader } from "@plexui/vue/components/DataTable";Table Primitives
Overview
With footer
Minimal
DataTable
The examples import users (15 rows) and its User type from a local ./data file. Column definitions live in <script setup>: header and cell renderers are functions that return VNodes (h()), rendered with TanStack Table's FlexRender.
Variant
variant
Sorting
Pagination
Row click
Row selection
Cell variants
Filtering
Column visibility
Empty state
API
Table Primitives
| Prop | Type | Default | Description |
|---|---|---|---|
Table | table | — | Root table container with horizontal scroll wrapper; attributes go to the <table> |
TableHeader | thead | — | Table header group |
TableBody | tbody | — | Table body group |
TableFooter | tfoot | — | Table footer group |
TableRow | tr | — | Table row |
TableHead | th | — | Table header cell |
TableCell | td | — | Table data cell |
TableCaption | caption | — | Table caption |
Every part renders its native element with the default slot as content, merges class after its own, and forwards all other attributes and listeners (colspan, scope, @click, ...).
DataTable
| Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData>[] | — | Column definitions following TanStack Table v8 API; header and cell renderers return VNodes (required) |
data | TData[] | — | Data array to display (required) |
variant | "default" | "bordered" | "default" | Visual variant: bordered adds a rounded border and tinted header |
page-size | number | 10 | Rows per page. Set 0 or Infinity to disable pagination. The rows-per-page select offers 10, 20, 50, 100 and this size |
initial-sorting | SortingState | — | Initial column sorting state |
global-filter | string | — | Controlled search/filter string. Bind with v-model:global-filter |
column-visibility | VisibilityState | — | Controlled column visibility state. Bind with v-model:column-visibility |
enable-row-selection | boolean | false | Adds a first column (id select) with a checkbox per row and a header checkbox that selects every row on all pages, mixed when some are selected. A click on a checkbox is not a row click |
row-selection | RowSelectionState | — | Controlled row selection state. Bind with v-model:row-selection |
get-row-id | (row: TData) => string | — | Custom row ID accessor; selection keys use it |
empty-message | string | number | VNode | "No results." | Shown when no rows; the emptyMessage slot takes precedence |
show-pagination | boolean | true | Whether to show pagination controls. They hide on their own when every row fits on one page |
class | string | — | Class applied to outermost wrapper |
emptyMessage slot | VNode[] | — | Rich content shown when no rows |
@row-click | (row: TData) => void | — | Click handler for rows. Makes rows interactive: they take Tab and call it on Enter or Space |
@update:global-filter | (value: string) => void | — | Emitted with the next filter when the table changes it; powers v-model:global-filter |
@update:column-visibility | (visibility: VisibilityState) => void | — | Emitted with the next visibility; powers v-model:column-visibility |
@update:row-selection | (selection: RowSelectionState) => void | — | Emitted with the next selection; powers v-model:row-selection |
@row-click is a function prop rather than an event, because its presence makes the rows interactive; :on-row-click works the same. Column groups (a column definition with columns) render a header that spans its columns.
DataTableColumnHeader
| Prop | Type | Default | Description |
|---|---|---|---|
column | Column<TData, TValue> | — | TanStack Table column object (required) |
title | string | — | Display text for the header (required) |
class | string | — | Class applied to the header button (or text when the column cannot sort) |
Column helpers
| Prop | Type | Default | Description |
|---|---|---|---|
idCell(accessor) | CellComponent | — | Monospace ID with copy-on-click tooltip |
dateTimeCell(accessor, options?) | CellComponent | — | Formatted datetime with Intl.DateTimeFormat |
statusCell(accessor, colorMap?) | CellComponent | — | Badge cell with automatic status-to-color mapping |
tooltipHeader(label, description) | HeaderComponent | — | Header with dashed underline and info tooltip |
Each helper returns a functional component for a column's cell or header; TanStack Table's FlexRender renders it with the cell or header context.
Styling
Table reads these component tokens. Override them at any scope to restyle it:
--table-border-color: border color (defaultvar(--color-border))--table-caption-color: caption color (defaultvar(--color-text-tertiary))--table-caption-font-size: caption font size (defaultvar(--font-text-sm-size))--table-cell-color: cell color (defaultvar(--color-text))--table-cell-font-size: cell font size (defaultvar(--font-text-sm-size))--table-cell-line-height: cell line height (defaultvar(--font-text-sm-line-height))--table-cell-padding: cell padding (defaultspacing(3) spacing(4))--table-footer-background: footer background (defaulttransparent)--table-footer-font-weight: footer font weight (defaultvar(--font-weight-medium))--table-header-background: header background (defaulttransparent)--table-header-color: header color (defaultvar(--color-text-secondary))--table-header-font-weight: header font weight (defaultvar(--font-weight-medium))--table-row-hover-background: row hover background (defaultlight-dark(var(--alpha-02), var(--alpha-04)))