TypeDefault

Type default configuration for Vue applications.

Defines default renderer, editor, and editorParams for a data type using Vue render functions.

Example

import type { TypeDefault } from '@toolbox-web/grid-vue';
import CountryFlag from './CountryFlag.vue';
import CountrySelect from './CountrySelect.vue';

const countryDefault: TypeDefault<Employee, string> = {
  renderer: (ctx) => h(CountryFlag, { code: ctx.value }),
  editor: (ctx) => h(CountrySelect, {
    modelValue: ctx.value,
    'onUpdate:modelValue': ctx.commit,
  }),
};

Properties

Property	Type	Description
renderer?	(ctx: CellRenderContext<TRow, TValue>) => VNode	Vue render function for rendering cells of this type
editor?	(ctx: ColumnEditorContext<TRow, TValue>) => VNode	Vue render function for editing cells of this type
editorParams?	Record<string, unknown>	Default editorParams for this type
filterPanelRenderer?	(params: FilterPanelParams) => VNode	Vue render function for custom filter panels for this type.

Property Details

filterPanelRenderer

Vue render function for custom filter panels for this type.

Unlike the core imperative API (container, params) => void, this accepts a Vue render function that receives only the params and returns a VNode. The bridge handles mounting and appending to the container automatically.

import { h } from 'vue';
import CustomFilter from './CustomFilter.vue';

const typeDefault: TypeDefault = {
  filterPanelRenderer: (params) => h(CustomFilter, {
    field: params.field,
    uniqueValues: params.uniqueValues,
    onApply: (values: Set<unknown>) => params.applySetFilter(values),
  }),
};

---