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 React roots for performance - instead of creating new roots on each render, we reuse existing ones and just call root.render() with new data.

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. Renders React components for expandable detail rows.

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. Renders React components for card layout in responsive mode.

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

Parameters

Name	Type	Description
gridElement	HTMLElement

---

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

Parameters

Name	Type	Description
type	string

---

destroy()

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

destroy(): void

---

releaseCell()

Called when a cell’s content is about to be wiped. Destroys editor React roots whose container is inside the cell. Also cleans up config-based editor roots (from processGridConfig/wrapReactEditor) that bypass the adapter’s tracking arrays.

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

---