---
id: "packages/active-grid/api/interaction"
title: "Interaction"
description: "CellPosition, ContextMenuBuilder, ContextMenuContext, ContextMenuItem and 6 more: generated from the source of active-grid."
url: "/packages/active-grid/api/interaction"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:interaction"
---

# Interaction

Exported by `@workspace/active-grid`. Generated from the package source; part of [the index of every export](/packages/active-grid/api).

## Types

**CellPosition**

```ts
interface CellPosition {
  rowIndex: number;
  colIndex: number;
}
```

**ContextMenuBuilder**

```ts
type ContextMenuBuilder<TData> = (
  row: TData | null,
  context?: ContextMenuContext,
) => ContextMenuConfig<TData>[];
```

Builds the consumer's items of a row menu for the row it opened on. The
grid calls it only for a row that stands for a record, only when the menu
opens, and always with the `context`; the argument is optional so a builder
can be called with a row alone.

**ContextMenuContext**

```ts
interface ContextMenuContext {
  kind: 'range' | 'cell' | 'row';
  columnId?: string;
  selection?: {rangeCount: number; cellCount: number};
  selectedRowCount: number;
}
```

What an opened row menu is about, handed to a {@link ContextMenuBuilder}
as its second argument. A builder that declares one parameter ignores it.

**ContextMenuItem**

```ts
type ContextMenuItem<TData = DefaultRowData> =
  | 'separator'
  | {
      label: string;
      action?: (row: TData) => void;
      icon?: React.ElementType;
      variant?: 'default' | 'destructive';
      disabled?: boolean;
      disabledReason?: string;
      shortcut?: string;
      isLoading?: boolean;
      keepOpen?: boolean;
      permission?: string;
      visible?: (row: TData) => boolean;
      separatorBefore?: boolean;
      children?: ContextMenuItem<TData>[];
    };
```

**BatchCommitPayload**

```ts
interface BatchCommitPayload<TData = DefaultRowData> {
  changes: EditingCommitPayload<TData>[];
  totalCellChanges: number;
}
```

**CellRange**

```ts
interface CellRange {
  startRow: number;
  startCol: number;
  endRow: number;
  endCol: number;
}
```

A rectangular selection range defined by start and end cell coordinates.

**CellSelectionState**

```ts
interface CellSelectionState {
  ranges: CellRange[];
  activeRange: CellRange | null;
}
```

Full cell selection state.

**DirtyCellEntry**

```ts
interface DirtyCellEntry {
  rowId: string;
  columnId: string;
  originalValue: unknown;
  currentValue: unknown;
  sequence: number;
  error?: string;
}
```

**EditingCommitPayload**

```ts
interface EditingCommitPayload<TData = DefaultRowData> {
  rowId: string;
  originalRow: TData;
  changes: Record<string, unknown>;
  newData: TData;
}
```

**EditMode**

```ts
type EditMode = 'cell' | 'row' | 'batch';
```