# GridAdapter

> _Since v0.11.0_

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:

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

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

## Declarative usage with DataGrid:

```tsx
<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.

```ts
setTypeDefaults(defaults: TypeDefaultsMap | null): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `defaults` | <code><a href="/grid/react/api/types/typedefaultsmap/">TypeDefaultsMap</a> &#124; unknown</code> |  |

***

### processConfig()

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

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `config` | <code><a href="/grid/react/api/types/gridconfig/">GridConfig</a>&lt;TRow&gt;</code> |  |

***

### canHandle()

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

```ts
canHandle(element: HTMLElement): boolean
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### 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.

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### createEditor()

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

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### 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.

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `gridElement` | <code>HTMLElement</code> |  |

***

### parseDetailElement()

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

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `detailElement` | <code>Element</code> |  |

***

### 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.

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `gridElement` | <code>HTMLElement</code> |  |

***

### 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.

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `cardElement` | <code>Element</code> |  |

***

### createToolPanelRenderer()

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

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### 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.

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `type` | <code>string</code> |  |
| `gridEl` | <code>HTMLElement</code> |  |

***

### destroy()

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

```ts
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.

```ts
releaseCell(cellEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `cellEl` | <code>HTMLElement</code> |  |

***

### unmount()

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

```ts
unmount(container: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `container` | <code>HTMLElement</code> |  |

***

### beginBatch()

Open a teardown batch on the PortalManager. Grid core wraps multi-cell
release loops (`_clearRowPool`, row-pool shrink, full row rebuild) with
`beginBatch` / `endBatch` so the N per-cell sync removals collapse to a
single deferred render instead of N `flushSync` calls. Eliminates the
"flushSync was called from inside a lifecycle method" warning storm on
grouping changes (#330).

```ts
beginBatch(gridEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `gridEl` | <code>HTMLElement</code> |  |

***

### endBatch()

Close a teardown batch opened by beginBatch. Caller is
responsible for ensuring affected containers are detached from the
DOM before this returns; the manager's render-time `isConnected`
filter then prunes them silently.

```ts
endBatch(gridEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `gridEl` | <code>HTMLElement</code> |  |

***