@adapttable/vue
Requires Node.js 22.12.0 or newer; packed releases are tested on Node 22.12 and Node 24.
Headless Vue 3.5 composables over the framework-neutral AdaptTable engine.
Vue owns reactivity and lifecycle; adapters supply every visible control.
This is a public 0.1.0 package.
pnpm add @adapttable/vue vue@^3.5.0
For a ready table with native controls, install @adapttable/vue-unstyled and
follow the Vue getting-started guide.
Features
- Reactive frontend, server and query-library sources with search, filtering, sorting and pagination over host-owned rows
- Typed cell/header/footer renderers, controlled column layout and row selection, desktop table and responsive mobile card models
- Feature composition for filters, header filters and AND/OR filter trees; cell, row and batch editing with validation, conflict handling, dirty state and undo/redo
- Grouping and aggregation, tree data, row expansion and nested tables; resizable/grouped columns, row pinning, independent summary rows, cell spans, full-width rows, row styling and host-owned row actions
- Density/fullscreen view controls, URL state and Saved Views for the connected state slices
- Localized labels, RTL semantic attributes, SSR-safe setup and scoped resource ownership through mount, KeepAlive deactivation and disposal
The binding provides models and structural Chrome. A feature that needs UI
requires adapter controls; use the native factories from
@adapttable/vue-unstyled with its DataTable. The native standardFeatures()
preset is available from @adapttable/vue-unstyled/preset.
Sources and rendering
import { useFrontendData, useDataTable } from "@adapttable/vue";
import type { ColumnDef } from "@adapttable/vue";
interface Person {
id: string;
name: string;
}
const columns: ColumnDef<Person>[] = [{ key: "name", sortable: true }];
const source = useFrontendData({
data: [{ id: "ada", name: "Ada" }],
columns,
urlSync: false,
});
const table = useDataTable({
source,
columns,
rowKey: (row: Person) => row.id,
});
Run composables in setup or an owned effect scope. Source results are readonly
shallow refs; read the latest source.value in script. Returned table refs stay
reactive when destructured. Callback values remain callbacks; pass a getter for
the whole options object when replacing callback identities.
useServerData sends the host a query and request-local AbortSignal. Check
info.signal.aborted before publishing rows, totals, errors or loading state.
responseKey attributes data to a query; it is not a request-generation token.
useQuerySource adapts an existing query composable, which owns its requests,
cancellation and SSR policy.
ColumnDef<TRow, TValue>, CellContext, HeaderContext, FooterContext and
componentRenderer preserve row/value types. The table never mutates host data.
Controlled layout, selection, density and hierarchy state request host changes;
ignoring a request preserves the supplied state.
Feature and adapter entries
@adapttable/vue/features exports opt-in factories and feature-specific options.
Import shared table, source, column, view-state and feature composition contracts
from @adapttable/vue. Structural Chrome, required slot props and adapter
construction helpers belong to @adapttable/vue/adapter.
Formula, pivot, stream and sparkline integrations keep their matching binding
entries. Optional PDF and XLSX factories and writers live at /pdf and /xlsx;
CSV and callback-driven print factories live at /features.
Adapter authors use @adapttable/vue/adapter for useDataTableShell, semantic
attribute/ref bridges, structural Chrome and lifecycle/model channels. Every
visible button, input, select and overlay is supplied by the adapter. Bind
complete attribute records to the actual semantic element.
DataTableSurfaceChrome is an optional shared outer layout. Its required
Search, Select, Button, Loading, Desktop and Mobile renderers let each kit own
its controls, table/card markup and appearance. DataTableSurfaceSlots and
DataTableSurfaceChromeProps describe that construction boundary. Root
composables and direct shell rendering remain available for completely custom
UI without selecting this layout. See the optional layout reference.
The shell composes column-aligned summaries through useSummaryCells,
useTableSummaryModel, TableSummaryChrome and MobileSummaryChrome.
TableFooterChrome places custom content outside the table. Summary mappers
receive the current source row scope, with reactive Vue values and shared
neutral incremental aggregates supported.
The shell distinguishes loaded rows from visible hierarchy rows: collapsed
children keep their editing drafts while select-all follows visible rows.
Grouped/tree tables refuse data-row pinning; independent summaries still work.
Saved Views capture connected URL slices, including density and uncontrolled
pins; group collapse and column layout require explicit host wiring.
useColumnLayoutUrlState returns layout/change/flush bindings;
useColumnLayoutStorageState persists an independent browser preference. Pass
the URL flush as the Saved Views flushViewState option. Selection,
tree/detail expansion and edit drafts are not captured.
SSR state is request-local. Browser resources start after mount and suspend under KeepAlive. Dispose explicit effect scopes when their owner finishes. Supply equivalent initial rows, direction, URL state and responsive settings on server and client.
Read getting started, feature composition and the Vue API reference for signatures, examples, required slots and state-persistence boundaries.
Optional assistant UI
@adapttable/vue/adapter exports TableAssistantChrome, AgentApprovalChrome,
ApprovalReviewChrome and their required kit control contracts. It imports no
AI runtime. The separately opt-in @adapttable/ai-vue package connects agents,
conversations and speech to Vue scopes. See the
assistant guide for approvals,
controlled updates and lifecycle behavior. These public packages are published on npm.
Popup control slot ownership
Create popup renderer functions once in component setup and read current
presentation props through getters. A new slots object containing the same
renderer functions is a harmless render wrapper; it does not begin a new
logical session. Creating new renderer closures during each render replaces
their owner and retires callbacks captured by the previous owner.
SidePanelChrome tracks the Frame, Tab, and Close renderers (or its
complete presentation renderer). SavedViewsPanelChrome tracks Surface,
Row, Input, and Empty. Context menus track their Surface driver;
saved-view menus track their Panel driver. A replaced context-menu onClose
callback also retires captured callbacks and queued commands. Keep these
functions stable across style, label, and other ordinary presentation updates. Slot objects may be
recreated, and getters may read updated classes or direction without replacing
the functions. Replaced models or callback owners, replaced renderers, closed
sessions, KeepAlive deactivation, and disposal still retire stale callbacks.
Context-menu commands whose close was accepted remain one-shot dispatches even
when the closed projection clears its items or recreates its Surface wrapper.
Controls become active after their mounted render has flushed. In mounted interaction tests, await Vue's next tick before invoking a control for the first time; a callback captured from an inactive render remains retired.