Glide Data Grid

https://docs.grid.glideapps.com/api
Admin
Glide Data Grid is an API that provides components, types, and methods for building, customizing,...
Tokens:19,534
Snippets:273
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Configure rowMarkerStartIndex property

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

Sets the starting numerical index for row markers, defaulting to 1.

```ts
rowMarkerStartIndex?: number;
```

--------------------------------

### Handle Mouse Movement and Hover

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callbacks for tracking mouse movement and item hovering; debouncing is recommended for performance.

```ts
onItemHovered?: (args: GridMouseEventArgs) => void;
```

```ts
onMouseMove?: (args: GridMouseEventArgs) => void;
```

--------------------------------

### Initialize DataEditor

Source: https://docs.grid.glideapps.com/api/dataeditor.md

Render the DataEditor component with fixed dimensions.

```jsx
<DataEditor width={500} height={300} {...props} />
```

--------------------------------

### emit

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Emits a keyboard shortcut event into the data grid.

```APIDOC
## emit(eventName: EmitEvents)

### Description
Emits the event into the data grid as if the user had pressed the keyboard shortcut.

### Parameters
- **eventName** ("copy" | "paste" | "delete" | "fill-right" | "fill-down") - Required - The event to trigger.
```

--------------------------------

### focus

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Sets focus to the data grid.

```APIDOC
## focus()

### Description
Causes the data grid to become focused.
```

--------------------------------

### Event Callbacks

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Event handlers for user interactions like clicking, moving, resizing, and hovering.

```APIDOC
## Event Callbacks

### onCellClicked
- **Signature**: (cell: Item) => void
- **Description**: Triggered when a user clicks a cell.

### onCellActivated
- **Signature**: (cell: Item) => void
- **Description**: Triggered when a user double clicks, presses Enter, or presses Space on a cell.

### onColumnMoved
- **Signature**: (startIndex: number, endIndex: number) => void
- **Description**: Triggered when a column move operation is completed.

### onColumnResizeStart / onColumnResize / onColumnResizeEnd
- **Signature**: (column: GridColumn, newSize: number, columnIndex: number) => void
- **Description**: Lifecycle events for column resizing interactions.

### onHeaderClicked
- **Signature**: (colIndex: number, event: HeaderClickedEventArgs) => void
- **Description**: Triggered when a column header is clicked.

### onHeaderMenuClick
- **Signature**: (col: number, screenPosition: Rectangle) => void
- **Description**: Triggered when the menu button on a column header is clicked.

### onItemHovered
- **Signature**: (args: GridMouseEventArgs) => void
- **Description**: Triggered when the user hovers over a cell, header, or the grid area.

### onRowMoved
- **Signature**: (startIndex: number, endIndex: number) => void
- **Description**: Triggered when a row re-order operation is completed.
```

--------------------------------

### Configuration Properties

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Properties used to configure column sizing, row selection behavior, and scrolling constraints.

```APIDOC
## Configuration Properties

### maxColumnWidth
- **Type**: number
- **Description**: Sets the maximum size of columns in pixels. Values less than 50 are increased to 50. Defaults to 500.

### minColumnWidth
- **Type**: number
- **Description**: Sets the minimum size of columns in pixels.

### maxColumnAutoWidth
- **Type**: number
- **Description**: Sets the maximum width for auto-sized columns. Defaults to `maxColumnWidth`.

### preventDiagonalScrolling
- **Type**: boolean
- **Description**: If true, prevents diagonal scrolling.

### rowSelectionMode
- **Type**: "auto" | "multi"
- **Description**: Configures row selection behavior. "auto" adapts to the environment, while "multi" forces multi-selection mode.
```

--------------------------------

### Configure Column Width Constraints

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Defines the minimum and maximum width constraints for grid columns.

```ts
maxColumnWidth?: number;
minColumnWidth?: number;
```

--------------------------------

### Handle Header Events

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callbacks for clicking or opening the context menu on column headers.

```ts
onHeaderClicked?: (colIndex: number, event: HeaderClickedEventArgs) => void;
```

```ts
onHeaderContextMenu?: (colIndex: number, event: HeaderClickedEventArgs) => void;
```

```ts
onHeaderMenuClick?: (col: number, screenPosition: Rectangle) => void;
```

--------------------------------

### onFillPattern

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when the user uses the fill handle to propagate data.

```APIDOC
## onFillPattern

### Description
Emitted whenever the user uses the fillHandle to fill other cells with data. `event.preventDefault()` may be called to prevent standard fill behavior.

### Signature
`onFillPattern?: ((event: FillPatternEventArgs ) => void);`
```

--------------------------------

### Configure group header details

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Callback function to define group names, icons, actions, and theme overrides for group headers.

```ts
getGroupDetails?: (groupName: string) => ({
    name: string;
    icon?: string;
    overrideTheme?: Partial<Theme>;
    actions?: {
        title: string;
        onClick: (e: GridMouseGroupHeaderEventArgs) => void;
        icon: GridColumnIcon | string;
    }[];
});
```

--------------------------------

### Configure onPaste callback

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Defines the behavior when data is pasted into the grid. Returning false or setting to false ignores the paste, while true enables default tab/newline splitting.

```ts
onPaste?: ((target: Item, values: readonly (readonly string[])[]) => boolean) | boolean;
```

--------------------------------

### Handle Group Header Events

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callbacks for clicking or opening the context menu on group headers.

```ts
onGroupHeaderClicked?: (colIndex: number, event: GroupHeaderClickedEventArgs) => void;
```

```ts
onGroupHeaderContextMenu?: (colIndex: number, event: GroupHeaderClickedEventArgs) => void
```

--------------------------------

### Define provideEditor callback

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Use this callback to construct functional components for cell editing. The editor must handle onChange, onFinishedEditing, and isHighlighted properties.

```ts
export type ProvideEditorComponent<T extends InnerGridCell> = React.FunctionComponent<{
    readonly onChange: (newValue: T) => void;
    readonly onFinishedEditing: (newValue?: T, movement?: readonly [-1 | 0 | 1, -1 | 0 | 1]) => void;
    readonly isHighlighted: boolean;
    readonly value: T;
    readonly initialValue?: string;
    readonly validatedSelection?: SelectionRange;
    readonly imageEditorOverride?: ImageEditorType;
    readonly markdownDivCreateNode?: (content: string) => DocumentFragment;
    readonly target: Rectangle;
    readonly forceEditMode: boolean;
    readonly isValid?: boolean;
}>;

export type ProvideEditorCallbackResult<T extends InnerGridCell> =
    | (ProvideEditorComponent<T> & {
          disablePadding?: boolean;
          disableStyling?: boolean;
      })
    | ObjectEditorCallbackResult<T>
    | undefined;

export type ProvideEditorCallback<T extends InnerGridCell> = (cell: T) => ProvideEditorCallbackResult<T>;

provideEditor?: ProvideEditorCallback<GridCell>;
```

--------------------------------

### provideEditor

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

A callback used to construct functional components for cell editing. The editor must handle onChange and onFinishedEditing events and support the isHighlighted flag for pre-selection.

```APIDOC
## provideEditor

### Description
Provides a constructor for functional components used as cell editors within the data grid. The editor component receives properties including onChange, onFinishedEditing, and isHighlighted.

### Type
`ProvideEditorCallback<GridCell>`

### Parameters
- **cell** (InnerGridCell) - The cell data to be edited.

### Returns
- **ProvideEditorCallbackResult** - A component or object defining the editor behavior, or undefined.
```

--------------------------------

### focus Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Causes the data grid to become focused.

```ts
focus: () => void;
```

--------------------------------

### showSearch

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Property to toggle the visibility of the search box.

```APIDOC
## showSearch

### Description
Controls the visibility of the built-in search box. It is recommended to toggle this via keyboard shortcuts or custom UI buttons.

### Signature
`showSearch?: boolean;`
```

--------------------------------

### emit Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Emits the event into the data grid as if the user had pressed the keyboard shortcut.

```ts
type EmitEvents = "copy" | "paste" | "delete" | "fill-right" | "fill-down";

emit: (eventName: EmitEvents) => Promise<void>;
```

--------------------------------

### headerIcons

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Configuration for custom header icons using a sprite map mechanism.

```APIDOC
## headerIcons
### Description
Maps icon names to functions that return an SVG string, allowing for dynamic foreground and background color interpolation.
```

--------------------------------

### scaleToRem

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Flag to enable automatic scaling based on REM units.

```APIDOC
## scaleToRem
### Description
When true, enables automatic scaling of grid elements to match REM units. Defaults to false.
```

--------------------------------

### Handle Column Resizing Events

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callbacks for column resize lifecycle events; requires manual updates to the GridColumn state.

```ts
onColumnResize?: (column: GridColumn, newSize: number, columnIndex: number) => void;
onColumnResizeEnd?: (column: GridColumn, newSize: number, columnIndex: number) => void;
```

```ts
onColumnResizeStart?: (column: GridColumn, newSize: number, columnIndex: number) => void;
```

```ts
onColumnResizeEnd?: (column: GridColumn, newSize: number, columnIndex: number) => void;
```

--------------------------------

### Handle Cell Interaction Events

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callbacks for cell click and activation events.

```ts
onCellClicked?: (cell: Item) => void;
```

```ts
onCellActivated?: (cell: Item) => void;
```

--------------------------------

### Configure rowMarkerWidth property

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

Sets the width of the marker column. Defaults to an adaptive width based on the number of rows.

```ts
rowMarkerWidth?: number;
```

--------------------------------

### getGroupDetails

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Callback invoked when a group header is rendered to provide name overrides, icons, actions, and theme overrides for the group.

```APIDOC
## getGroupDetails

### Description
Invoked whenever a group header is rendered. Used to provide a name override, icon, list of actions, and theme overrides for child cells and column headers in the group.

### Signature
`getGroupDetails?: (groupName: string) => { name: string; icon?: string; overrideTheme?: Partial<Theme>; actions?: { title: string; onClick: (e: GridMouseGroupHeaderEventArgs) => void; icon: GridColumnIcon | string; }[]; }`
```

--------------------------------

### Define Highlight Regions

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Configures specific grid areas to display with custom background colors and dashed borders.

```ts
interface Highlight {
    readonly color: string;
    readonly range: Rectangle;
}

highlightRegions?: readonly Highlight[];
```

--------------------------------

### showSearch Property

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Boolean flag to toggle the visibility of the built-in search box.

```ts
showSearch?: boolean;
```

--------------------------------

### Configure Row Selection Mode

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Defines the behavior of row selection markers.

```ts
rowSelectionMode?: "auto" | "multi";
```

--------------------------------

### Define Keybindings Configuration

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Use this TypeScript interface to define or override default keybinding behaviors in the data editor.

```typescript
keybindings?: Partial<{
    // Legacy deprecated flags
    readonly pageUp: boolean;
    readonly pageDown: boolean;
    readonly first: boolean;
    readonly last: boolean;

    // Non-rebindable
    readonly copy: boolean;
    readonly cut: boolean;
    readonly paste: boolean;

    readonly downFill: boolean | string;
    readonly rightFill: boolean | string;
    readonly clear: boolean | string;
    readonly closeOverlay: boolean | string;
    readonly acceptOverlayDown: boolean | string;
    readonly acceptOverlayUp: boolean | string;
    readonly acceptOverlayLeft: boolean | string;
    readonly acceptOverlayRight: boolean | string;
    readonly search: boolean | string;
    readonly delete: boolean | string;
    readonly activateCell: boolean | string;
    readonly scrollToSelectedCell: boolean | string;

    // Navigation
    readonly goToFirstColumn: boolean | string;
    readonly goToLastColumn: boolean | string;
    readonly goToFirstCell: boolean | string;
    readonly goToLastCell: boolean | string;
    readonly goToFirstRow: boolean | string;
    readonly goToLastRow: boolean | string;
    readonly goToNextPage: boolean | string;
    readonly goToPreviousPage: boolean | string;

    readonly goUpCell: boolean | string;
    readonly goDownCell: boolean | string;
    readonly goLeftCell: boolean | string;
    readonly goRightCell: boolean | string;

    readonly goUpCellRetainSelection: boolean | string;
    readonly goDownCellRetainSelection: boolean | string;
    readonly goLeftCellRetainSelection: boolean | string;
    readonly goRightCellRetainSelection: boolean | string;

    // Selectiona
    readonly selectToFirstColumn: boolean | string;
    readonly selectToLastColumn: boolean | string;
    readonly selectToFirstCell: boolean | string;
    readonly selectToLastCell: boolean | string;
    readonly selectToFirstRow: boolean | string;
    readonly selectToLastRow: boolean | string;

    readonly selectGrowUp: boolean | string;
    readonly selectGrowDown: boolean | string;
    readonly selectGrowLeft: boolean | string;
    readonly selectGrowRight: boolean | string;

    readonly selectAll: boolean | string;
    readonly selectRow: boolean | string;
    readonly selectColumn: boolean | string;
}>;
```

--------------------------------

### Configure rowMarkers property

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

Determines the type of marker column displayed on the left. Defaults to 'none'.

```ts
rowMarkers?: "checkbox" | "number" | "both" | "none";
```

--------------------------------

### Define custom header icons

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Maps icon names to functions that return SVG strings with dynamic color interpolation.

```ts
headerIcons?: Record<string, (spriteProps: { fgColor: string, bgColor: string }) => string>;
```

--------------------------------

### getBounds Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Returns the current bounding box of a cell or the entire grid if arguments are undefined.

```ts
getBounds: (col?: number, row?: number) => Rectangle | undefined;
```

--------------------------------

### Data Editor Configuration Interface

Source: https://docs.grid.glideapps.com/api/dataeditor.md

A partial TypeScript interface definition showing various configuration options for the Data Editor component.

```typescript
    provideEditor?: ProvideEditorCallback<GridCell>;
    rangeSelect?: "rect" | "none" | "cell" | "multi-cell" | "multi-rect";
    rangeSelectionBlending?: SelectionBlending;
    rightElement?: ReactNode;
    rightElementProps?: {
        fill?: boolean;
        sticky?: boolean;
    };
    rowHeight?: number | ((index) => number);
    rowMarkerStartIndex?: number;
    rowMarkerTheme?: Partial<Theme>;
    rowMarkerWidth?: number;
    rowMarkers?: "number" | "none" | "checkbox" | "both" | "checkbox-visible" | "clickable-number";
    rowSelect?: "none" | "single" | "multi";
    rowSelectionBlending?: SelectionBlending;
    rowSelectionMode?: "auto" | "multi";
    rows: number;
    scaleToRem?: boolean;
    scrollOffsetX?: number;
    scrollOffsetY?: number;
    searchResults?: readonly Item[];
    searchValue?: string;
    showSearch?: boolean;
    smoothScrollX?: boolean;
    smoothScrollY?: boolean;
    spanRangeBehavior?: "default" | "allowPartial";
    theme?: Partial<Theme>;
    trailingRowOptions?: {
        addIcon?: string;
        hint?: string;
        sticky?: boolean;
        targetColumn?: number | GridColumn;
        tint?: boolean;
    };
    validateCell?: ((cell, newValue, prevValue) => boolean | ValidatedGridCell);
    verticalBorder?: boolean | ((col) => boolean);
    width?: string | number;
}
```

--------------------------------

### Insert Portal Div

Source: https://docs.grid.glideapps.com/api/dataeditor.md

Add this div as the last child of the body tag to provide a root-level portal for the grid.

```html
<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />
```

--------------------------------

### Configure Fixed Shadows

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Controls the display of shadows behind fixed columns and header rows.

```ts
fixedShadowX?: boolean;
fixedShadowY?: boolean;
```

--------------------------------

### DataEditorRef Methods

Source: https://docs.grid.glideapps.com/api.md

Methods available on the DataEditorRef instance for controlling the data grid.

```APIDOC
## DataEditorRef Methods

### appendRow
- Description: Append a row to the data grid.

### emit
- Description: Used to emit commands normally emitted by keyboard shortcuts.

### focus
- Description: Focuses the data grid.

### getBounds
- Description: Gets the current screen-space bounds of a desired cell.

### remeasureColumns
- Description: Causes the columns in the selection to have their natural sizes recomputed and re-emitted as a resize event.

### scrollTo
- Description: Tells the data-grid to scroll to a particular location.

### updateCells
- Description: Invalidates the rendering of a list of passed cells.
```

--------------------------------

### getRowThemeOverride

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Callback to fetch theme overrides for a specific row during rendering.

```APIDOC
## getRowThemeOverride

### Description
Fetched whenever a row is rendered to apply theme overrides. This function should be highly performant as it is called frequently.

### Signature
`getRowThemeOverride?: (row: number) => Partial<Theme> | undefined`
```

--------------------------------

### Configure Scrolling Behavior

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Toggle to restrict diagonal scrolling.

```ts
preventDiagonalScrolling?: booling;
```

--------------------------------

### Configure Selection Modes

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Controls the allowed selection types for columns, rows, and ranges.

```ts
rangeSelect?: "none" | "cell" | "rect" | "multi-cell" | "multi-rect"; // default rect
columnSelect?: "none" | "single" | "multi"; // default multi
rowSelect?: "none" | "single" | "multi"; // default multi
```

--------------------------------

### Enable REM scaling

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Boolean flag to enable automatic scaling of grid elements based on REM units.

```ts
readonly scaleToRem?: boolean;
```

--------------------------------

### headerHeight and groupHeaderHeight

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Properties to control the vertical sizing of the grid headers.

```APIDOC
## headerHeight
### Description
The height of the table header. Defaults to 36.

## groupHeaderHeight
### Description
The height of the group headers. Defaults to the `headerHeight` value.
```

--------------------------------

### DataEditor Row Marker Configuration

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

Configuration properties for the DataEditor component to manage row marker display, indexing, styling, and sizing.

```APIDOC
## DataEditor Row Marker Props

### rowMarkers
- **Type**: "checkbox" | "number" | "both" | "none"
- **Description**: Determines whether to display the marker column on the left. Defaults to "none".

### rowMarkerStartIndex
- **Type**: number
- **Description**: Sets the starting index for row markers. Defaults to 1.

### rowMarkerTheme
- **Type**: Partial<Theme>
- **Description**: Overrides the theme used for the row marker column, useful for background tinting.

### rowMarkerWidth
- **Type**: number
- **Description**: Sets the width of the marker column. Defaults to an adaptive width based on the number of rows.
```

--------------------------------

### rightElement

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Configuration for a custom DOM node rendered at the end of the horizontal scroll region.

```APIDOC
## rightElement
### Description
A DOM node inserted at the end of the horizontal scroll region. Use `rightElementProps` to configure `sticky` behavior or `fill` behavior.
```

--------------------------------

### Configure right element

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Adds a DOM node to the end of the horizontal scroll region with optional sticky or fill behavior.

```ts
rightElementProps?: {
    readonly sticky?: boolean;
    readonly fill?: boolean;
};
rightElement?: React.ReactNode;
```

--------------------------------

### Configure rowHeight

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Sets the height of rows, either as a fixed number or a function returning a height based on the row index.

```ts
rowHeight: number | ((index: number) => number);
```

--------------------------------

### Define DataEditor Columns

Source: https://docs.grid.glideapps.com/api/dataeditor/required-props.md

Specifies the column configuration array. Memoize this value to prevent unnecessary component re-renders.

```ts
columns: readonly GridColumn[];
```

--------------------------------

### onFinishedEditing

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when the grid exits edit mode.

```APIDOC
## onFinishedEditing

### Description
Emitted whenever the data grid exits edit mode. The movement indicates the direction the user requested the selection move towards.

### Signature
`onFinishedEditing?: (newValue: GridCell | undefined, movement: Item) => void;`
```

--------------------------------

### LoadingCell Interface

Source: https://docs.grid.glideapps.com/api/cells/loadingcell.md

The LoadingCell interface represents a grid cell in a loading state. It extends BaseGridCell and provides properties to configure the appearance of the loading skeleton.

```APIDOC
## LoadingCell Interface

### Description
Represents a cell that displays a loading skeleton while content is being fetched.

### Properties
- **kind** (GridCellKind.Loading) - Required - The type of the cell.
- **skeletonWidth** (number) - Optional - Determines the width in pixels of the skeleton to be drawn. If set to 0, no skeleton will draw.
- **skeletonHeight** (number) - Optional - Determines the height in pixels of the skeleton to be drawn. If set to 0, no skeleton will draw.
- **skeletonWidthVariability** (number) - Optional - A width in pixels that is multiplied by a random number between 0 and 1 and added to the skeleton width to produce the final skeleton width.
```

--------------------------------

### onPaste

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when data is pasted into the grid. Allows custom handling of paste operations or disabling default behavior.

```APIDOC
## onPaste

### Signature
`onPaste?: ((target: Item, values: readonly (readonly string[])[]) => boolean) | boolean;`

### Description
Called when data is pasted into the grid. If undefined, the grid attempts to paste the text buffer into the current cell. If set to false or the function returns false, the paste is ignored. If true, the grid attempts to split data by tabs and newlines.
```

--------------------------------

### DataEditor Selection Props

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Overview of the available selection-related properties in the DataEditor component.

```typescript
interface DataEditorProps {

    // ...other props

    columnSelect?: "none" | "single" | "multi";
    columnSelectionBlending?: SelectionBlending;
    drawFocusRing?: boolean;
    fillHandle?: boolean;
    gridSelection?: GridSelection;
    highlightRegions?: readonly Highlight[];
    onGridSelectionChange?: ((newSelection) => void);
    onSelectionCleared?: (() => void);
    rangeSelect?: "rect" | "none" | "cell" | "multi-cell" | "multi-rect";
    rangeSelectionBlending?: SelectionBlending;
    rowSelect?: "none" | "single" | "multi";
    rowSelectionBlending?: SelectionBlending;
    spanRangeBehavior?: "default" | "allowPartial";
    
    // ...other props
    
}
```

--------------------------------

### Enable smoothScroll

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Toggles smooth scrolling for the X and Y axes. Defaults to false, which enforces cell alignment.

```ts
smoothScrollX?: boolean;
smoothScrollY?: boolean;
```

--------------------------------

### width/height

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Overrides the default dimensions of the grid component.

```APIDOC
## width / height

### Description
Overrides the default size of the grid. Accepts valid CSS strings or numbers (interpreted as pixels).

### Type
`string | number`
```

--------------------------------

### Set width and height

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Overrides the default grid dimensions using strings or pixel values as numbers.

```typescript
width?: string | number;
height?: string | number;
```

--------------------------------

### Handle Selection Data

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Defines how the grid retrieves data for clipboard operations or range inspections.

```ts
type CellArray = readonly (readonly GridCell[])[];
type GetCellsThunk = () => Promise<CellArray>;

getCellsForSelection?: true | (selection: Rectangle) => CellArray | GetCellsThunk;
```

--------------------------------

### UriCell Interface Definition

Source: https://docs.grid.glideapps.com/api/cells/uricell.md

Defines the structure and properties for a URI-based grid cell.

```typescript
export interface UriCell extends BaseGridCell {
    readonly kind: GridCellKind.Uri;
    readonly data: string;
    readonly displayData?: string;
    readonly readonly?: boolean;
    readonly onClickUri?: (args: BaseGridMouseEventArgs & { readonly preventDefault: () => void }) => void;
    readonly hoverEffect?: boolean;
}
```

--------------------------------

### getBounds

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Retrieves the bounding box of a specific cell or the entire grid.

```APIDOC
## getBounds(col?: number, row?: number)

### Description
Returns the current bounding box of a cell. If called with col and row as undefined, the bounding box of the entire data grid scroll area is returned.

### Parameters
- **col** (number) - Optional - The column index.
- **row** (number) - Optional - The row index.
```

--------------------------------

### scrollTo Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Requests the data grid to scroll to a particular location with optional padding.

```ts
scrollTo: (
        col: number,
        row: number,
        dir?: "horizontal" | "vertical" | "both",
        paddingX?: number,
        paddingY?: number
    ) => void;
```

--------------------------------

### Configure trailingRowOptions and onRowAppended

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Configures the appearance and behavior of the trailing row used for appending new data. The onRowAppended callback is required to trigger the addition of a new row.

```ts
trailingRowOptions?: {
    readonly tint?: boolean; // DataEditor level only
    readonly sticky?: boolean; // DataEditor level only
    readonly hint?: string;
    readonly addIcon?: string;
    readonly targetColumn?: number | GridColumn;
    readonly themeOverride?: Partial<Theme>; // GridColumn only
    readonly disabled?: boolean; // GridColumn only
}
onRowAppended?: () => void;
```

--------------------------------

### Handle finished editing

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Emitted when the grid exits edit mode, providing the new value and the requested movement direction.

```ts
onFinishedEditing?: (newValue: GridCell | undefined, movement: Item) => void;
```

--------------------------------

### Handle fill pattern events

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Emitted when the fill handle is used. Use event.preventDefault() to override standard fill behavior.

```typescript
interface FillPatternEventArgs extends PreventableEvent {
    patternSource: Rectangle;
    fillDestination: Rectangle;
}

onFillPattern?: ((event: FillPatternEventArgs ) => void);
```

--------------------------------

### Configure Selection Blending

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Defines whether different selection types can coexist or if they clear each other.

```ts
rangeSelectionBlending?: "exclusive" | "mixed"; // default exclusive
columnSelectionBlending?: "exclusive" | "mixed"; // default exclusive
rowSelectionBlending?: "exclusive" | "mixed"; // default exclusive
```

--------------------------------

### DataEditor Component Usage

Source: https://docs.grid.glideapps.com/api/dataeditor.md

Basic implementation of the DataEditor component in a React application.

```APIDOC
## DataEditor Component

### Description
The DataEditor component is the primary interface for rendering a data grid. It requires a root-level portal div in the HTML and is configured using the DataEditorProps interface.

### Usage
```jsx
<DataEditor width={500} height={300} {...props} />
```

### HTML Prerequisites
Insert this snippet as the last child of your `<body>` tag:
```html
<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />
```
```

--------------------------------

### Freeze Columns

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Sets the number of columns to freeze on the left side during horizontal scrolling.

```ts
freezeColumns?: number;
```

--------------------------------

### onCellEdited / onCellsEdited

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callbacks triggered when cell values are modified by the user.

```APIDOC
## onCellEdited / onCellsEdited

### Description
`onCellEdited` is called when the user finishes editing a single cell. `onCellsEdited` is called whenever a batch of cells is about to be edited. If `onCellsEdited` returns `true`, `onCellEdited` will not be called for any cells in the event.

### Signatures
`onCellEdited?: (cell: Item, newValue: EditableGridCell) => void;`
`onCellsEdited?: (newValues: readonly { location: Item; value: EditableGridCell }[]) => boolean | void;`
```

--------------------------------

### scrollTo

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Scrolls the grid to a specific location.

```APIDOC
## scrollTo(col: number, row: number, dir?: string, paddingX?: number, paddingY?: number)

### Description
Requests the data grid to scroll to a particular location. Padding can be applied to inset the cell by a certain amount.

### Parameters
- **col** (number) - Required - Target column.
- **row** (number) - Required - Target row.
- **dir** ("horizontal" | "vertical" | "both") - Optional - Scroll direction.
- **paddingX** (number) - Optional - Horizontal padding.
- **paddingY** (number) - Optional - Vertical padding.
```

--------------------------------

### Configure overscroll behavior

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Allows scrolling past the content boundaries by a fixed number of pixels.

```ts
overscrollX?: number;
overscrollY?: number;
```

--------------------------------

### drawHeader

Source: https://docs.grid.glideapps.com/api/dataeditor/custom-cells.md

Overrides the default rendering of a header, allowing for custom header visuals.

```APIDOC
## drawHeader

### Description
`drawHeader` may be specified to override the rendering of a header. The grid will call this for every header it needs to render.

### Signature
`drawHeader?: (args: { ctx: CanvasRenderingContext2D; column: GridColumn; columnIndex: number; theme: Theme; rect: Rectangle; hoverAmount: number; isSelected: boolean; isHovered: boolean; hasSelectedCell: boolean; spriteManager: SpriteManager; menuBounds: Rectangle; }, drawContent: () => void) => void;`
```

--------------------------------

### Handle row deletion with onDelete

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when rows are deleted. Returning false prevents deletion, while returning a GridSelection modifies the selection to be deleted.

```ts
onDelete?: (selection: GridSelection) => GridSelection | boolean;
```

--------------------------------

### Define LoadingCell interface

Source: https://docs.grid.glideapps.com/api/cells/loadingcell.md

The LoadingCell interface extends BaseGridCell and provides properties to customize the appearance of the loading skeleton.

```typescript
export interface LoadingCell extends BaseGridCell {
    readonly kind: GridCellKind.Loading;
    readonly skeletonWidth?: number;
    readonly skeletonHeight?: number;
    readonly skeletonWidthVariability?: number;
}
```

--------------------------------

### overscroll

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Properties to allow scrolling past the logical end of content.

```APIDOC
## overscrollX / overscrollY
### Description
Allows the grid to scroll past the logical end of content by a fixed number of pixels.
```

--------------------------------

### Track Visible Region Changes

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Callback triggered whenever the grid's visible viewport changes.

```ts
onVisibleRegionChanged?: (
    range: Rectangle,
    tx: number,
    ty: number,
    extras: { selected?: Item; freezeRegion?: Rectangle };
) => void;
```

--------------------------------

### onSearchValueChange

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Event handler for changes to the search input string.

```APIDOC
## onSearchValueChange

### Description
This event is emitted whenever the search input value changes. It provides the new string value, allowing for custom search logic or UI updates.

### Signature
`onSearchValueChange?: (newVal: string) => void;`
```

--------------------------------

### Define DataEditor styling props

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Interface definition for styling-related properties in the DataEditor component.

```typescript
interface DataEditorProps {

    // ...other props
    
    getGroupDetails?: GroupDetailsCallback;
    getRowThemeOverride?: GetRowThemeCallback;
    groupHeaderHeight?: number;
    headerHeight?: number;
    headerIcons?: SpriteMap;
    overscrollX?: number;
    overscrollY?: number;
    rightElement?: ReactNode;
    rightElementProps?: {
        fill?: boolean;
        sticky?: boolean;
    };
    scaleToRem?: boolean;
    verticalBorder?: boolean | ((col) => boolean);
    
    // ...other props
    
}
```

--------------------------------

### drawHeader

Source: https://docs.grid.glideapps.com/api/dataeditor.md

A callback function used to override the rendering of any header within the grid.

```APIDOC
## drawHeader

### Description
Callback used to override the rendering of any header.
```

--------------------------------

### GridSelection Interface

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

The primary structure representing the current state of selected cells, rows, and columns.

```ts
interface GridSelection {
    readonly current?: {
        readonly cell: Item;
        readonly range: Readonly<Rectangle>;
        readonly rangeStack: readonly Readonly<Rectangle>[];
    };
    readonly columns: CompactSelection;
    readonly rows: CompactSelection;
}
```

--------------------------------

### Handle row deletion with onDeleteRows

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback providing absolute indexes of deleted rows. The developer is responsible for performing the actual deletion in the data source.

```ts
onDeleteRows?: (rows: readonly number[]) => void;
```

--------------------------------

### DataEditor Input Interaction Interface

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Defines the available props for handling user interactions and input configurations within the DataEditor component.

```typescript
interface DataEditorProps {
    
    // ...other props
    
    keybindings?: Partial<Keybinds>;
    maxColumnAutoWidth?: number;
    maxColumnWidth?: number;
    minColumnWidth?: number;
    onCellActivated?: ((cell) => void);
    onCellClicked?: ((cell, event) => void);
    onCellContextMenu?: ((cell, event) => void);
    onColumnMoved?: ((startIndex, endIndex) => void);
    onColumnResize?: ((column, newSize, colIndex, newSizeWithGrow) => void);
    onColumnResizeEnd?: ((column, newSize, colIndex, newSizeWithGrow) => void);
    onColumnResizeStart?: ((column, newSize, colIndex, newSizeWithGrow) => void);
    onGroupHeaderClicked?: ((colIndex, event) => void);
    onGroupHeaderContextMenu?: ((colIndex, event) => void);
    onGroupHeaderRenamed?: ((groupName, newVal) => void);
    onHeaderClicked?: ((colIndex, event) => void);
    onHeaderContextMenu?: ((colIndex, event) => void);
    onHeaderMenuClick?: ((col, screenPosition) => void);
    onItemHovered?: ((args) => void);
    onKeyDown?: ((event) => void);
    onKeyUp?: ((event) => void);
    onMouseMove?: ((args) => void);
    onRowMoved?: ((startIndex, endIndex) => void);
    preventDiagonalScrolling?: boolean;
    rowSelectionMode?: "auto" | "multi";
    
    // ...other props
    
}
```

--------------------------------

### Handle group header renaming

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Emitted when a user renames a group header. The developer must implement the logic to update the header name.

```ts
onGroupHeaderRenamed?: (groupName: string, newVal: string) => void
```

--------------------------------

### remeasureColumns

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Forces recomputation of column sizes.

```APIDOC
## remeasureColumns(cols: CompactSelection)

### Description
Causes the columns in the selection to have their natural sizes recomputed and re-emitted as a resize event.

### Parameters
- **cols** (CompactSelection) - Required - The selection of columns to remeasure.
```

--------------------------------

### Handle Row Reordering

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callback triggered upon completion of a row re-order operation.

```ts
onRowMoved?: (startIndex: number, endIndex: number) => void;
```

--------------------------------

### Handle Column Movement

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Callback triggered after a column move operation; requires manual state update of the columns property.

```ts
onColumnMoved?: (startIndex: number, endIndex: number) => void;
```

--------------------------------

### remeasureColumns Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Forces auto-columns to recompute their sizes. Note that this is an expensive operation.

```typescript
remeasureColumns: (cols: CompactSelection) => void;
```

--------------------------------

### DataEditorProps Interaction Interface

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

The DataEditor component provides various callback functions and configuration properties to handle user input and interaction events.

```APIDOC
## DataEditorProps Interaction Interface

### Description
Configuration properties and event handlers for managing user interactions in the DataEditor.

### Properties
- **keybindings** (Partial<Keybinds>) - Optional - Custom keybinding configurations.
- **maxColumnAutoWidth** (number) - Optional - Maximum width for auto-sizing columns.
- **maxColumnWidth** (number) - Optional - Maximum allowed width for columns.
- **minColumnWidth** (number) - Optional - Minimum allowed width for columns.
- **onCellActivated** ((cell) => void) - Optional - Callback when a cell is activated.
- **onCellClicked** ((cell, event) => void) - Optional - Callback when a cell is clicked.
- **onCellContextMenu** ((cell, event) => void) - Optional - Callback for cell context menu events.
- **onColumnMoved** ((startIndex, endIndex) => void) - Optional - Callback when a column is moved.
- **onColumnResize** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback during column resize.
- **onColumnResizeEnd** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback when column resize ends.
- **onColumnResizeStart** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback when column resize starts.
- **onGroupHeaderClicked** ((colIndex, event) => void) - Optional - Callback when a group header is clicked.
- **onGroupHeaderContextMenu** ((colIndex, event) => void) - Optional - Callback for group header context menu.
- **onGroupHeaderRenamed** ((groupName, newVal) => void) - Optional - Callback when a group header is renamed.
- **onHeaderClicked** ((colIndex, event) => void) - Optional - Callback when a header is clicked.
- **onHeaderContextMenu** ((colIndex, event) => void) - Optional - Callback for header context menu.
- **onHeaderMenuClick** ((col, screenPosition) => void) - Optional - Callback when header menu is clicked.
- **onItemHovered** ((args) => void) - Optional - Callback when an item is hovered.
- **onKeyDown** ((event) => void) - Optional - Callback for key down events.
- **onKeyUp** ((event) => void) - Optional - Callback for key up events.
- **onMouseMove** ((args) => void) - Optional - Callback for mouse move events.
- **onRowMoved** ((startIndex, endIndex) => void) - Optional - Callback when a row is moved.
- **preventDiagonalScrolling** (boolean) - Optional - Prevents diagonal scrolling if set to true.
- **rowSelectionMode** ("auto" | "multi") - Optional - Defines the row selection behavior.
```

--------------------------------

### Custom Markdown Rendering

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Overrides the default Markdown renderer for security or feature customization.

```ts
markdownDivCreateNode?: (content: string) => DocumentFragment;
```

--------------------------------

### appendRow Method

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Appends a row to the data grid.

```ts
appendRow: (col: number, openOverlay: boolean = true) => Promise<void>;
```

--------------------------------

### Configure rowMarkerTheme property

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

Overrides the theme for the row marker column, useful for background tinting or opacity adjustments.

```typescript
rowMarkerTheme?: Partial<Theme>;
```

--------------------------------

### onDrop

Source: https://docs.grid.glideapps.com/api/dataeditor/drag-and-drop.md

Callback triggered when an external drag event is dropped onto a cell in the grid.

```APIDOC
## onDrop

### Description
Emitted when the external drag is dropped onto a valid target inside of the grid.

### Signature
`onDrop?: ((cell: Item, dataTransfer: DataTransfer | null) => void);`

### Parameters
- **cell** (Item) - The target cell where the drop occurred.
- **dataTransfer** (DataTransfer | null) - The data transfer object associated with the drop event.
```

--------------------------------

### smoothScroll

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Controls smooth scrolling behavior for the X and Y axes.

```APIDOC
## smoothScrollX / smoothScrollY

### Description
Enables or disables smooth scrolling. Defaults to false. When disabled, the grid aligns to cells in the non-smooth axis.

### Type
`boolean`
```

--------------------------------

### Handle Selection Changes

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Callback triggered when the grid selection is modified.

```typescript
onGridSelectionChange?: ((newSelection) => void);
```

--------------------------------

### appendRow

Source: https://docs.grid.glideapps.com/api/dataeditorref.md

Appends a new row to the data grid.

```APIDOC
## appendRow(col: number, openOverlay?: boolean)

### Description
Appends a row to the data grid.

### Parameters
- **col** (number) - Required - The column index.
- **openOverlay** (boolean) - Optional - Whether to open the overlay (default: true).
```

--------------------------------

### onDelete

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when the user attempts to delete selected cells or rows.

```APIDOC
## onDelete

### Description
Called when the user deletes one or more rows. If the callback returns false, deletion will not happen. If it returns true, all cells inside all selected rows, columns and ranges will be deleted. If the callback returns a GridSelection, the newly returned selection will be deleted instead.

### Signature
`onDelete?: (selection: GridSelection) => GridSelection | boolean;`
```

--------------------------------

### searchValue Property

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Property to programmatically set or control the current search string.

```ts
readonly searchValue?: string;
```

--------------------------------

### onSearchClose

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Callback triggered when the search box is closed. Providing this enables the close button in the UI.

```APIDOC
## onSearchClose

### Description
If `onSearchClose` is provided, the search box displays a close button. This callback is emitted when the user clicks that button.

### Signature
`onSearchClose?: () => void;`
```

--------------------------------

### Handle Selection Cleared

Source: https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md

Callback triggered when the user explicitly clears the selection, typically via the Escape key.

```typescript
onSelectionCleared?: () => void;
```

--------------------------------

### Configure validateCell callback

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Validates new cell values during editing. Returning false rejects the change, while returning a GridCell coerces the value.

```ts
readonly validateCell?: (cell: Item, newValue: EditableGridCell) => boolean | EditableGridCell;
```

--------------------------------

### DataEditorProps row marker configuration

Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers.md

The interface definition for row marker properties within the DataEditor component.

```typescript
interface DataEditorProps {
    
    // ...other props
    
    rowMarkers?: "number" | "none" | "checkbox" | "both" | "checkbox-visible" | "clickable-number";
    rowMarkerStartIndex?: number;
    rowMarkerTheme?: Partial<Theme>;
    rowMarkerWidth?: number;
     
    // ...other props
    
}
```

--------------------------------

### onRowAppended

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Callback triggered when a user interacts with the trailing row to append new data.

```APIDOC
## onRowAppended

### Signature
`onRowAppended?: () => void;`

### Description
Controls adding new rows at the bottom of the grid. When defined, an empty row is displayed; clicking this row triggers the callback to handle the append logic.
```

--------------------------------

### TextCell Interface Definition

Source: https://docs.grid.glideapps.com/api/cells/textcell.md

Defines the structure of a TextCell, including its kind, display data, raw data, and configuration flags.

```typescript
export interface TextCell extends BaseGridCell {
    readonly kind: GridCellKind.Text;
    readonly displayData: string;
    readonly data: string;
    readonly readonly?: boolean;
    readonly allowWrapping?: boolean;
}
```

--------------------------------

### Set table header height

Source: https://docs.grid.glideapps.com/api/dataeditor/styling.md

Defines the height of the table header, defaulting to 36.

```ts
headerHeight: number;
```

--------------------------------

### Override default image editor

Source: https://docs.grid.glideapps.com/api/dataeditor/editing.md

Specifies a custom editor to replace the default overlay when double-clicking an image cell.

```ts
imageEditorOverride?: ImageEditorType;
```

--------------------------------

### onSearchResultsChanged

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Event handler for changes in search results.

```APIDOC
## onSearchResultsChanged

### Description
This event handler is called when the search results in the data grid change. It provides the current list of matching items and the index of the currently highlighted result.

### Signature
`onSearchResultsChanged?: (results: readonly Item[], navIndex: number) => void;`
```

--------------------------------

### searchResults

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Property to override or provide custom search results.

```APIDOC
## searchResults

### Description
Allows manual specification of search results. If not provided, the grid uses its internal search provider.

### Signature
`searchResults?: readonly Item[];`
```

--------------------------------

### DataEditorProps Interface

Source: https://docs.grid.glideapps.com/api/dataeditor/required-props.md

The core interface defining the required properties for the DataEditor component.

```APIDOC
## DataEditorProps

### Description
The interface defining the mandatory properties for the DataEditor component.

### Properties
- **columns** (readonly GridColumn[]) - Required - An array of objects describing the column headers. The length determines the number of columns.
- **rows** (number) - Required - The total number of rows to display.
- **getCellContent** ((cell: Item) => GridCell) - Required - A function that returns the content for a cell at given coordinates.
```

--------------------------------

### Set Maximum Auto-Sized Column Width

Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction.md

Specifies the maximum width for auto-sized columns, defaulting to the maxColumnWidth value.

```ts
maxColumnAutoWidth?: number;
```

--------------------------------

### ImageCell Interface Definition

Source: https://docs.grid.glideapps.com/api/cells/imagecell.md

Defines the structure of an ImageCell, including data, display options, and cell behavior.

```typescript
export interface ImageCell extends BaseGridCell {
    readonly kind: GridCellKind.Image;
    readonly data: string[];
    readonly rounding?: number;
    readonly displayData?: string[];
    readonly readonly?: boolean;
}
```

--------------------------------

### drawCell

Source: https://docs.grid.glideapps.com/api/dataeditor/custom-cells.md

Enables custom rendering of cells in the Grid by providing a callback function that executes during the rendering process.

```APIDOC
## drawCell

### Description
The `drawCell` property enables custom rendering of cells in the Grid. This function is called for each cell during the rendering process and provides a `drawContent` method to render default content.

### Signature
`drawCell?: (args: { ctx: CanvasRenderingContext2D; cell: GridCell; theme: Theme; rect: Rectangle; col: number; row: number; hoverAmount: number; hoverX: number | undefined; hoverY: number | undefined; highlighted: boolean; imageLoader: ImageWindowLoader; }, drawContent: () => void) => void;`
```

--------------------------------

### rowHeight

Source: https://docs.grid.glideapps.com/api/dataeditor/important-props.md

Defines the height of rows in the table, either as a fixed number or a function returning a height based on the row index.

```APIDOC
## rowHeight

### Description
Sets the height of rows in the grid. Defaults to 34.

### Type
`number | ((index: number) => number)`

### Parameters
- **index** (number) - The zero-based absolute row index (when using a function).
```

--------------------------------

### Define DataEditor Rows

Source: https://docs.grid.glideapps.com/api/dataeditor/required-props.md

Specifies the total number of rows to be displayed in the grid.

```ts
rows: number;
```

--------------------------------

### DataEditorProps Interface for Drag and Drop

Source: https://docs.grid.glideapps.com/api/dataeditor/drag-and-drop.md

Defines the optional callback properties available for handling drag and drop events in the Data Editor.

```typescript
interface DataEditorProps {
    onDragLeave?: (() => void);
    onDragOverCell?: ((cell: Item, dataTransfer: DataTransfer | null) => void);
    onDrop?: ((cell: Item, dataTransfer: DataTransfer | null) => void);
}
```

--------------------------------

### onSearchResultsChanged Callback

Source: https://docs.grid.glideapps.com/api/dataeditor/search.md

Event handler triggered when search results change, providing the results array and the current navigation index.

```ts
readonly onSearchResultsChanged?: (results: readonly Item[], navIndex: number) => void;
```

--------------------------------

### Define BubbleCell Interface

Source: https://docs.grid.glideapps.com/api/cells/bubblecell.md

The BubbleCell interface extends BaseGridCell and defines the structure for bubble-based data rendering.

```typescript
export interface BubbleCell extends BaseGridCell {
    readonly kind: GridCellKind.Bubble;
    readonly data: string[];
}
```

--------------------------------

### Define MarkdownCell interface

Source: https://docs.grid.glideapps.com/api/cells/markdowncell.md

Defines the structure of a markdown cell, extending the base grid cell with markdown-specific data and readonly status.

```typescript
export interface MarkdownCell extends BaseGridCell {
    readonly kind: GridCellKind.Markdown;
    readonly data: string;
    readonly readonly?: boolean;
}
```
Tokens:
Raw