Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Comcast/react-data-grid/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The renderTextEditor function provides a basic text input editor for editable cells in the DataGrid. It renders an input field that auto-focuses and selects the text when editing begins.

​
Signature

function renderTextEditor<TRow, TSummaryRow>(
  props: RenderEditCellProps<TRow, TSummaryRow>
): React.ReactElement

​
Parameters

​
props
RenderEditCellProps<TRow, TSummaryRow>
required
The edit cell renderer props.

​
RenderEditCellProps

​
props.row
TRow
required
The row object being edited.
​
props.column
CalculatedColumn<TRow, TSummaryRow>
required
The column object for the cell being edited.
​
props.rowIdx
number
required
The index of the row being edited.
​
props.onRowChange
(row: TRow, commitChanges?: boolean) => void
required
Callback to update the row. Call with the updated row object.
​
props.onClose
(commitChanges?: boolean, shouldFocusCell?: boolean) => void
required
Callback to close the editor. Pass true to commit changes, false to discard.

​
Return Value

​
return
React.ReactElement
A text input element configured for editing the cell value.

​
Usage

Assign this function to the renderEditCell property of a column to make it editable: 
import { renderTextEditor, type Column } from 'react-data-grid';

const columns: readonly Column<Row>[] = [
  {
    key: 'title',
    name: 'Title',
    renderEditCell: renderTextEditor
  }
];

​
Features

  • Auto-focus: The input automatically receives focus when editing begins
  • Auto-select: The existing text is automatically selected for easy replacement
  • Blur handling: Changes are automatically committed when the input loses focus
  • Styled: Includes default styling with border, padding, and focus states

​
Example

Basic editable grid with text editor: 
import 'react-data-grid/lib/styles.css';
import { DataGrid, renderTextEditor, type Column } from 'react-data-grid';
import { useState } from 'react';

interface Row {
  id: number;
  title: string;
  description: string;
}

const columns: readonly Column<Row>[] = [
  { key: 'id', name: 'ID' },
  {
    key: 'title',
    name: 'Title',
    renderEditCell: renderTextEditor
  },
  {
    key: 'description',
    name: 'Description',
    renderEditCell: renderTextEditor
  }
];

function App() {
  const [rows, setRows] = useState<Row[]>([
    { id: 0, title: 'Example', description: 'Example description' },
    { id: 1, title: 'Demo', description: 'Demo description' }
  ]);

  return <DataGrid columns={columns} rows={rows} onRowsChange={setRows} />;
}

​
Custom Editors

For more complex editing requirements, you can create a custom editor: 
import type { RenderEditCellProps } from 'react-data-grid';

function CustomEditor({ row, column, onRowChange, onClose }: RenderEditCellProps<MyRow>) {
  return (
    <input
      autoFocus
      value={row[column.key]}
      onChange={(event) => onRowChange({ ...row, [column.key]: event.target.value })}
      onBlur={() => onClose(true)}
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us