Skip to content
Zonvoir Table LogoZonvoir Table

Vue 3 Frontend Adapter API

import {
ZonvoirTable,
normalizeTable,
useActions,
useTable,
} from '@zonvoir/zonvoir-table-vue';

ZonvoirTable and Table are aliases for the same Vue component.

type TableProps<T extends TableRow> = {
table?: TableResource<T> | TableDefinition<T>;
loading?: boolean;
showColumnToggle?: boolean;
selectable?: boolean;
autoVisit?: boolean;
searchDebounce?: number;
config?: TableConfiguration;
};
Prop Default Description
table Laravel table payload or a normalized definition.
loading false Shows the loading state.
showColumnToggle true Shows the toggleable-columns control.
selectable true Enables row selection when the payload permits it.
autoVisit true Performs Inertia navigation for payload URLs.
searchDebounce 300 Debounce delay for search events, in milliseconds.
config Per-instance visual and label configuration.
<ZonvoirTable
:table="users"
@row-click="(row, column, event) => {}"
@cell-click="({ row, column, value, event }) => {}"
@search-change="(value) => {}"
@per-page-change="(value) => {}"
@page-click="(url) => {}"
@retry="reload"
/>

The adapter also exports useTable, useActions, normalizeTable, visitUrl, and table configuration helpers. Exported types include TableResource, TableDefinition, TableRow, TableColumn, TableAction, TablePagination, TableSorting, TableState, and ImageConfig.