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(). Implementation is installed by @toolbox-web/grid-vue/features/master-detail via registerDetailRendererBridge. Returns undefined if the master-detail feature has not been imported, or if no TbwGridDetailPanel was registered for this grid.

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

Parameters

Name	Type	Description
detailElement	Element

---

parseResponsiveCardElement()

Framework adapter hook called by ResponsivePlugin during attach(). Implementation is installed by @toolbox-web/grid-vue/features/responsive via registerResponsiveCardRendererBridge. Returns undefined if the responsive feature has not been imported, or if no TbwGridResponsiveCard was registered for this grid.

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

Parameters

Name	Type	Description
cardElement	Element

---

createToolPanelRenderer()

Framework adapter hook called by the grid core when a <tbw-grid-tool-panel> needs a renderer. Returns a function that renders Vue tool panel content into the shell’s accordion container.

Uses a wrapper-detach pattern for the cleanup callback: the cleanup synchronously removes a wrapper div from the container, so the shell’s subsequent contentArea.innerHTML = '' (during accordion collapse) sees an empty container and cannot disturb Vue’s still-attached teleport children. Vue then unmounts asynchronously on the next microtask against the orphaned wrapper without throwing NotFoundError.

createToolPanelRenderer(element: HTMLElement): (container: HTMLElement) => void | () => void | undefined

Parameters

Name	Type	Description
element	HTMLElement

---

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, _gridEl: HTMLElement): TypeDefault<TRow> | undefined

Parameters

Name	Type	Description
type	string
_gridEl	HTMLElement

---

cleanup()

Cleanup all teleport entries.

cleanup(): void

---

unmount()

Unmount a specific container (e.g., detail panel, tool panel). Currently a no-op for teleport-based rendering — the TeleportManager’s prune pass handles disconnected containers automatically.

unmount(_container: HTMLElement): void

Parameters

Name	Type	Description
_container	HTMLElement

---

releaseCell()

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

releaseCell(cellEl: HTMLElement): void

Parameters

Name	Type	Description
cellEl	HTMLElement

---