Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Table API Reference

createTableHook

Function: createTableHook()

ts
function createTableHook<TFeatures, TTableComponents, TCellComponents, THeaderComponents>(__namedParameters): object;
function createTableHook<TFeatures, TTableComponents, TCellComponents, THeaderComponents>(__namedParameters): object;

Defined in: packages/vue-table/src/createTableHook.ts:300

Creates app-scoped Vue table helpers with features, row models, and renderable component maps pre-bound.

Use this when an app or design system wants typed useAppTable, a pre-bound column helper, and context helpers for table, cell, and header components.

Type Parameters

TFeatures

TFeatures extends TableFeatures

TTableComponents

TTableComponents extends Record<string, ComponentType<any>>

TCellComponents

TCellComponents extends Record<string, ComponentType<any>>

THeaderComponents

THeaderComponents extends Record<string, ComponentType<any>>

Parameters

__namedParameters

CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>

Returns

object

appFeatures

ts
appFeatures: TFeatures;
appFeatures: TFeatures;

createAppColumnHelper()

ts
createAppColumnHelper: <TData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
createAppColumnHelper: <TData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;

Type Parameters

TData

TData extends RowData

Returns

AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>

useAppTable()

ts
useAppTable: <TData, TSelected>(tableOptions, selector?) => AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
useAppTable: <TData, TSelected>(tableOptions, selector?) => AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;

Type Parameters

TData

TData extends RowData

TSelected

TSelected = TableState<TFeatures>

Parameters

tableOptions

Omit<TableOptionsWithReactiveData<TFeatures, TData>, "_features" | "_rowModels">

selector?

(state) => TSelected

Returns

AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>

useCellContext()

ts
useCellContext: <TValue>() => Cell<TFeatures, any, TValue>;
useCellContext: <TValue>() => Cell<TFeatures, any, TValue>;

Type Parameters

TValue

TValue extends unknown = unknown

Returns

Cell<TFeatures, any, TValue>

useHeaderContext()

ts
useHeaderContext: <TValue>() => Header<TFeatures, any, TValue>;
useHeaderContext: <TValue>() => Header<TFeatures, any, TValue>;

Type Parameters

TValue

TValue extends unknown = unknown

Returns

Header<TFeatures, any, TValue>

useTableContext()

ts
useTableContext: <TData>() => VueTable<TFeatures, TData>;
useTableContext: <TData>() => VueTable<TFeatures, TData>;

Type Parameters

TData

TData extends RowData = RowData

Returns

VueTable<TFeatures, TData>

Example

ts
const { useAppTable, createAppColumnHelper } = createTableHook({
  _features,
  _rowModels: {},
  tableComponents: {},
  cellComponents: {},
  headerComponents: {},
})
const { useAppTable, createAppColumnHelper } = createTableHook({
  _features,
  _rowModels: {},
  tableComponents: {},
  cellComponents: {},
  headerComponents: {},
})