GridAdapter

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

Usage

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

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

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

Declarative usage with DataGrid:

<DataGrid rows={data} gridConfig={config}>
  <GridColumn field="status">
    {(ctx) => <StatusBadge value={ctx.value} />}
  </GridColumn>
  <GridColumn field="name" editor={(ctx) => (
    <NameEditor value={ctx.value} onCommit={ctx.commit} onCancel={ctx.cancel} />
  )} />
</DataGrid>

Methods

setTypeDefaults()

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

setTypeDefaults(defaults: TypeDefaultsMap | null): void

Parameters

Name	Type	Description
defaults	TypeDefaultsMap | unknown

---

processConfig()

FrameworkAdapter.processConfig implementation. Called automatically by the grid’s set gridConfig setter. Converts React renderer/editor functions to DOM-returning functions.

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

Parameters

Name	Type	Description
config	GridConfig<TRow>

---

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 React component and returns its container DOM element.

Uses a cell cache to reuse portals for performance - instead of creating new portals on each render, we reuse existing ones and update their content.

Returns undefined if no renderer is registered for this element, allowing the grid to use its default rendering.

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

Parameters

Name	Type	Description
element	HTMLElement

---

createEditor()

Creates an editor spec that renders a React component with commit/cancel callbacks passed as props.

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

Parameters

Name	Type	Description
element	HTMLElement

---

createDetailRenderer()

Creates a detail renderer function for MasterDetailPlugin. Implementation is installed by @toolbox-web/grid-react/features/master-detail via registerDetailRendererBridge. Returns undefined if the master-detail feature has not been imported, or if no GridDetailPanel was registered for this grid.

createDetailRenderer(gridElement: HTMLElement): (row: TRow, rowIndex: number) => HTMLElement | undefined

Parameters

Name	Type	Description
gridElement	HTMLElement

---

parseDetailElement()

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

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

Parameters

Name	Type	Description
detailElement	Element

---

createResponsiveCardRenderer()

Creates a responsive card renderer function for ResponsivePlugin. Implementation is installed by @toolbox-web/grid-react/features/responsive via registerResponsiveCardRendererBridge. Returns undefined if the responsive feature has not been imported, or if no GridResponsiveCard was registered for this grid.

createResponsiveCardRenderer(gridElement: HTMLElement): (row: TRow, rowIndex: number) => HTMLElement | undefined

Parameters

Name	Type	Description
gridElement	HTMLElement

---

parseResponsiveCardElement()

FrameworkAdapter hook called by ResponsivePlugin during attach(). Parses the <tbw-grid-responsive-card> element and delegates to createResponsiveCardRenderer. Needed for parity with the Vue and Angular adapters so ResponsivePlugin’s standard lookup path works for React users as well, not just via the imperative refreshResponsiveCardRenderer hook in DataGrid.

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

Parameters

Name	Type	Description
cardElement	Element

---

createToolPanelRenderer()

Creates a tool panel renderer from a light DOM element. Renders React components into tool panel containers.

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 React components into the grid’s cells.

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

Parameters

Name	Type	Description
type	string
gridEl	HTMLElement

---

destroy()

Clean up all mounted portals. Call this when the grid is unmounted.

destroy(): void

---

releaseCell()

Called when a cell’s content is about to be wiped.

Destroys editor portals AND renderer portals whose container is inside the cell. Releasing renderers here is critical: the editing pipeline runs cell.innerHTML = '' immediately after this returns, which silently detaches React-managed renderer containers from the DOM. If we leave the React root mounted, its fiber tree still believes the now-orphaned children are present — a subsequent React commit (e.g. the user’s onCellCommit → setRows) tries to removeChild those gone nodes and throws NotFoundError (issue #250).

Calling this BEFORE the wipe lets React unmount cleanly while DOM still matches its fiber tree. The wrapReactRenderer cache will detect the missing entry on the next render and create a fresh container — see the cache-validation defense in createRenderer and wrapReactRenderer (react-column-config.ts).

Also cleans up config-based editor and renderer roots (from processGridConfig/wrapReactEditor/wrapReactRenderer) that bypass the adapter’s own portal tracking.

releaseCell(cellEl: HTMLElement): void

Parameters

Name	Type	Description
cellEl	HTMLElement

---

unmount()

Unmount a specific container (called when cell is recycled).

unmount(container: HTMLElement): void

Parameters

Name	Type	Description
container	HTMLElement

---