GridAdapter

Framework adapter that enables Vue 3 component integration with the grid’s light DOM configuration API.

Usage

The adapter is automatically registered when using the TbwGrid component. For advanced use cases, you can manually register:

import { GridElement } from '@toolbox-web/grid';
import { GridAdapter } from '@toolbox-web/grid-vue';

// One-time registration
GridElement.registerAdapter(new GridAdapter());

Declarative usage with TbwGrid:

<TbwGrid :rows="data" :grid-config="config">
  <TbwGridColumn field="status">
    <template #cell="{ value, row }">
      <StatusBadge :value="value" />
    </template>
  </TbwGridColumn>
</TbwGrid>

Methods

processGridConfig()

Processes a Vue grid configuration, converting Vue component references and VNode-returning render functions to DOM-returning functions.

This is idempotent — already-processed configs pass through safely.

processGridConfig(config: GridConfig<TRow>): GridConfig<TRow>

Parameters

Name	Type	Description
config	GridConfig<TRow>	Vue grid config with possible component/VNode references

Returns

GridConfig<TRow> - Processed config with DOM-returning functions

---

processConfig()

FrameworkAdapter.processConfig implementation. Called automatically by the grid’s set gridConfig setter.

processConfig(config: GridConfig<TRow>): GridConfig<TRow>

Parameters

Name	Type	Description
config	GridConfig<TRow>

---

processTypeDefaults()

Processes typeDefaults, converting Vue component/VNode references to DOM-returning functions.

processTypeDefaults(typeDefaults: Record<string, TypeDefault<TRow>>): Record<string, BaseTypeDefault<TRow>>

Parameters

Name	Type	Description
typeDefaults	Record<string, TypeDefault<TRow>>	Vue type defaults with possible component references

Returns

Record<string, BaseTypeDefault<TRow>> - Processed TypeDefault record

---

processColumn()

Processes a single column configuration, converting Vue component references and VNode-returning render functions to DOM-returning functions.

processColumn(column: ColumnConfig<TRow>): ColumnConfig<TRow>

Parameters

Name	Type	Description
column	ColumnConfig<TRow>	Vue column config

Returns

ColumnConfig<TRow> - Processed ColumnConfig with DOM-returning functions

---

setTypeDefaults()

Sets the type defaults map for this adapter. Called by TbwGrid when it receives type defaults from context.

setTypeDefaults(defaults: TypeDefaultsMap | null): void

Parameters

Name	Type	Description
defaults	TypeDefaultsMap | unknown

---

canHandle()

Determines if this adapter can handle the given element. Checks if a renderer or editor is registered for this element.

canHandle(element: HTMLElement): boolean

Parameters

Name	Type	Description
element	HTMLElement

---

createRenderer()

Creates a view renderer function that renders a Vue component and returns its container DOM element.

createRenderer(element: HTMLElement): ColumnViewRenderer<TRow, TValue> | undefined

Parameters

Name	Type	Description
element	HTMLElement

---

createEditor()

Creates an editor spec that renders a Vue component for cell editing. Returns a function that creates the editor DOM element.

createEditor(element: HTMLElement): ColumnEditorSpec<TRow, TValue> | undefined

Parameters

Name	Type	Description
element	HTMLElement

---

parseDetailElement()

Framework adapter hook called by MasterDetailPlugin during attach(). Parses the <tbw-grid-detail> element and returns a Vue-based renderer.

parseDetailElement(detailElement: Element): (row: TRow, rowIndex: number) => HTMLElement | undefined

Parameters

Name	Type	Description
detailElement	Element

---

parseResponsiveCardElement()

Framework adapter hook called by ResponsivePlugin during attach(). Parses the <tbw-grid-responsive-card> element and returns a Vue-based renderer.

parseResponsiveCardElement(cardElement: Element): (row: TRow, rowIndex: number) => HTMLElement | undefined

Parameters

Name	Type	Description
cardElement	Element

---

getTypeDefault()

Gets type-level defaults from the type defaults map.

This enables application-wide type defaults configured via GridTypeProvider. The returned TypeDefault contains renderer/editor functions that render Vue components into the grid’s cells.

getTypeDefault(type: string): TypeDefault<TRow> | undefined

Parameters

Name	Type	Description
type	string

---

cleanup()

Cleanup all mounted Vue apps.

cleanup(): void

---

unmount()

Unmount a specific container (e.g., detail panel, tool panel). Finds the matching entry in mountedViews by container reference and properly destroys the Vue app to prevent memory leaks.

unmount(container: HTMLElement): void

Parameters

Name	Type	Description
container	HTMLElement

---

releaseCell()

Called when a cell’s content is about to be wiped. Destroys editor Vue apps whose container is inside the cell.

releaseCell(cellEl: HTMLElement): void

Parameters

Name	Type	Description
cellEl	HTMLElement

---