TypeScript Types & Vue Definitions

The Vue adapter exports its table payload types from @zonvoir/zonvoir-table-vue.

import type {
  TableAction,
  TableColumn,
  TableDefinition,
  TableResource,
  TableRow,
} from '@zonvoir/zonvoir-table-vue';

Core payload types

type TableResource<T extends TableRow = TableRow> = {
  columns?: Array<Partial<TableColumn>>;
  rows?: T[];
  results?: PaginatedResults<T> | T[];
  state?: TableState;
  pagination?: boolean | Partial<TablePagination>;
  actions?: TableAction[];
  exports?: TableExport[];
};

type TableDefinition<T extends TableRow = TableRow> = {
  name: string;
  columns: TableColumn[];
  rows: T[];
  pagination: TablePagination;
  sorting: TableSorting;
  search: string;
};

Use TableResource for the serialized Laravel payload. TableDefinition is the normalized form used internally by the adapter.

Row and column metadata

type TableRow = {
  id?: string | number;
  _primary_key?: string | number | null;
  _url?: string | TableUrl | null;
  _actions?: TableAction[] | string | null;
  _selectable?: boolean;
};

type TableColumn = {
  attribute: string;
  label: string;
  sortable: boolean;
  toggleable: boolean;
  visible: boolean;
  alignment: 'left' | 'center' | 'right' | string;
  meta: TableMeta;
};

TableAction, TablePagination, TableSorting, TableUrl, and ImageConfig describe their respective serialized metadata. Import them when typing custom cells, links, actions, or payload transforms.