0
# Editors and Editing
1

2
Cell editing functionality providing built-in editors and infrastructure for custom cell editing components with keyboard navigation support.
3

4
## Capabilities
5

6
### Built-in Editors
7

8
Pre-built editor components for common cell editing scenarios.
9

10
```javascript { .api }
11
const editors = {
12
  /** Simple text input editor for string values */
13
  SimpleTextEditor: React.ComponentType<EditorProps>;
14
  /** Checkbox editor for boolean values */
15
  CheckboxEditor: React.ComponentType<EditorProps>;
16
  /** Base class for creating custom editors */
17
  EditorBase: React.ComponentType<EditorProps>;
18
};
19

20
interface EditorProps {
21
  /** Current cell value to edit */
22
  value: any;
23
  /** Function to handle key down events */
24
  onKeyDown: (event: KeyboardEvent) => void;
25
  /** Function called when editor loses focus */
26
  onBlur: () => void;
27
  /** Function to commit the edited value */
28
  commit: () => void;
29
  /** Column definition for the cell being edited */
30
  column: Column;
31
  /** Complete row data object */
32
  row?: any;
33
  /** DOM element where editor should be rendered */
34
  editorPortalTarget?: Element;
35
}
36
```
37

38
### SimpleTextEditor
39

40
Basic text input editor for editing string values with Enter/Escape key support.
41

42
```javascript { .api }
43
/**
44
 * Simple text input editor for string cell values
45
 * Commits on Enter key, cancels on Escape key
46
 */
47
const SimpleTextEditor: React.ComponentType<EditorProps>;
48
```
49

50
**Usage Example:**
51

52
```javascript
53
import ReactDataGrid, { editors } from 'react-data-grid';
54

55
const columns = [
56
  { key: 'id', name: 'ID' },
57
  { 
58
    key: 'name', 
59
    name: 'Name', 
60
    editor: <editors.SimpleTextEditor />,
61
    editable: true 
62
  },
63
  { 
64
    key: 'description', 
65
    name: 'Description', 
66
    editor: <editors.SimpleTextEditor />,
67
    editable: true 
68
  }
69
];
70

71
// The editor will automatically be used when editable: true is set
72
<ReactDataGrid
73
  columns={columns}
74
  rowGetter={i => rows[i]}
75
  rowsCount={rows.length}
76
  minHeight={400}
77
  enableCellSelect={true}
78
  onGridRowsUpdated={handleRowUpdate}
79
/>
80
```
81

82
### CheckboxEditor
83

84
Checkbox editor for boolean values with immediate commit on click.
85

86
```javascript { .api }
87
/**
88
 * Checkbox editor for boolean cell values
89
 * Commits immediately when checkbox state changes
90
 */
91
const CheckboxEditor: React.ComponentType<EditorProps>;
92
```
93

94
**Usage Example:**
95

96
```javascript
97
import ReactDataGrid, { editors } from 'react-data-grid';
98

99
const columns = [
100
  { key: 'id', name: 'ID' },
101
  { key: 'name', name: 'Name' },
102
  { 
103
    key: 'active', 
104
    name: 'Active', 
105
    editor: <editors.CheckboxEditor />,
106
    editable: true 
107
  },
108
  { 
109
    key: 'verified', 
110
    name: 'Verified', 
111
    editor: <editors.CheckboxEditor />,
112
    editable: true 
113
  }
114
];
115
```
116

117
### EditorBase
118

119
Base class providing common editor functionality for creating custom editors.
120

121
```javascript { .api }
122
/**
123
 * Base class for custom cell editors
124
 * Provides common editor lifecycle and keyboard handling
125
 */
126
class EditorBase extends React.Component<EditorProps> {
127
  /** Get the current input value */
128
  getValue(): any;
129
  /** Get the input node for focus management */
130
  getInputNode(): HTMLElement;
131
  /** Check if the current value is valid */
132
  isSelectAllWhenEditingEnabled(): boolean;
133
  /** Handle keyboard events (Enter, Escape, Tab) */
134
  onKeyDown(event: KeyboardEvent): void;
135
}
136
```
137

138
### Custom Editor Creation
139

140
Creating custom editors by extending EditorBase or implementing the EditorProps interface.
141

142
```javascript { .api }
143
/**
144
 * Interface for custom editor components
145
 * Must implement these methods for proper grid integration
146
 */
147
interface CustomEditor extends React.Component<EditorProps> {
148
  /** Return the current editor value */
149
  getValue(): any;
150
  /** Return the DOM node to focus */
151
  getInputNode(): HTMLElement;
152
  /** Handle special key combinations */
153
  onKeyDown?(event: KeyboardEvent): void;
154
}
155
```
156

157
**Custom Editor Example:**
158

159
```javascript
160
import React from 'react';
161
import { editors } from 'react-data-grid';
162

163
// Custom dropdown editor
164
class DropdownEditor extends editors.EditorBase {
165
  constructor(props) {
166
    super(props);
167
    this.state = { value: props.value };
168
  }
169
  
170
  getValue() {
171
    return this.state.value;
172
  }
173
  
174
  getInputNode() {
175
    return this.select;
176
  }
177
  
178
  render() {
179
    const options = this.props.column.options || [];
180
    
181
    return (
182
      <select
183
        ref={node => this.select = node}
184
        value={this.state.value}
185
        onChange={e => this.setState({ value: e.target.value })}
186
        onBlur={() => this.props.onCommit(this.state.value)}
187
        autoFocus
188
      >
189
        {options.map(option => (
190
          <option key={option.value} value={option.value}>
191
            {option.label}
192
          </option>
193
        ))}
194
      </select>
195
    );
196
  }
197
}
198

199
// Usage in column definition
200
const columns = [
201
  { key: 'id', name: 'ID' },
202
  { key: 'name', name: 'Name' },
203
  { 
204
    key: 'status', 
205
    name: 'Status',
206
    editor: <DropdownEditor />,
207
    editable: true,
208
    options: [
209
      { value: 'active', label: 'Active' },
210
      { value: 'inactive', label: 'Inactive' },
211
      { value: 'pending', label: 'Pending' }
212
    ]
213
  }
214
];
215
```
216

217
### Editor Configuration
218

219
Column-level configuration for enabling and customizing cell editing.
220

221
```javascript { .api }
222
interface EditableColumn extends Column {
223
  /** Enable editing for this column */
224
  editable: boolean;
225
  /** Custom editor component (optional, defaults to SimpleTextEditor) */
226
  editor?: React.ComponentType<EditorProps>;
227
  /** Additional options passed to custom editors */
228
  [key: string]: any;
229
}
230
```
231

232
### Grid Editing Events
233

234
Events related to cell editing lifecycle and data updates.
235

236
```javascript { .api }
237
interface EditingEvents {
238
  /** Called when cell editing results in data updates */
239
  onGridRowsUpdated?: (event: GridRowsUpdatedEvent) => void;
240
  /** Called before a cell becomes editable */
241
  onCheckCellIsEditable?: (event: CheckCellEditableEvent) => boolean;
242
  /** Called just before editing begins */
243
  onBeforeEdit?: (event: BeforeEditEvent) => void;
244
}
245

246
interface GridRowsUpdatedEvent {
247
  /** Starting row index for the update */
248
  fromRow: number;
249
  /** Ending row index for the update */
250
  toRow: number;
251
  /** Object containing the updated values */
252
  updated: { [columnKey: string]: any };
253
  /** Type of update action that occurred */
254
  action: 'CELL_UPDATE' | 'COLUMN_FILL' | 'COPY_PASTE' | 'CELL_DRAG';
255
}
256

257
interface CheckCellEditableEvent {
258
  /** Row data object */
259
  row: any;
260
  /** Column being edited */
261
  column: Column;
262
  /** Row index */
263
  rowIdx: number;
264
}
265

266
interface BeforeEditEvent {
267
  /** Row index being edited */
268
  rowIdx: number;
269
  /** Column being edited */
270
  column: Column;
271
  /** Row data object */
272
  row: any;
273
}
274
```
275

276
**Advanced Editing Example:**
277

278
```javascript
279
import ReactDataGrid, { editors } from 'react-data-grid';
280

281
const EditableGrid = () => {
282
  const [rows, setRows] = useState(initialData);
283
  
284
  const handleGridRowsUpdated = ({ fromRow, toRow, updated, action }) => {
285
    console.log('Update action:', action);
286
    
287
    const newRows = rows.slice();
288
    for (let i = fromRow; i <= toRow; i++) {
289
      newRows[i] = { ...newRows[i], ...updated };
290
    }
291
    setRows(newRows);
292
  };
293
  
294
  const checkCellEditable = ({ row, column, rowIdx }) => {
295
    // Only allow editing if row is not locked
296
    return !row.locked;
297
  };
298
  
299
  const beforeEdit = ({ rowIdx, column, row }) => {
300
    console.log(`Starting to edit ${column.key} in row ${rowIdx}`);
301
  };
302
  
303
  const columns = [
304
    { key: 'id', name: 'ID' },
305
    { 
306
      key: 'name', 
307
      name: 'Name', 
308
      editable: true,
309
      editor: <editors.SimpleTextEditor />
310
    },
311
    { 
312
      key: 'active', 
313
      name: 'Active', 
314
      editable: true,
315
      editor: <editors.CheckboxEditor />
316
    },
317
    { 
318
      key: 'category', 
319
      name: 'Category', 
320
      editable: true,
321
      editor: <CustomDropdownEditor />
322
    }
323
  ];
324
  
325
  return (
326
    <ReactDataGrid
327
      columns={columns}
328
      rowGetter={i => rows[i]}
329
      rowsCount={rows.length}
330
      minHeight={500}
331
      enableCellSelect={true}
332
      onGridRowsUpdated={handleGridRowsUpdated}
333
      onCheckCellIsEditable={checkCellEditable}
334
      onBeforeEdit={beforeEdit}
335
    />
336
  );
337
};
338
```
339

340
### Keyboard Navigation
341

342
Built-in keyboard shortcuts for editing and navigation.
343

344
- **Enter**: Start editing selected cell or commit current edit
345
- **Escape**: Cancel current edit and revert to original value
346
- **Tab**: Commit edit and move to next editable cell
347
- **Shift+Tab**: Commit edit and move to previous editable cell
348
- **Arrow Keys**: Navigate between cells (when not editing)
349

350
### Editor Portal
351

352
Editors are rendered in DOM portals to avoid z-index and overflow issues.
353

354
```javascript { .api }
355
interface EditorPortalConfig {
356
  /** DOM element where editor portals should be mounted */
357
  editorPortalTarget?: Element;
358
}
359
```
360

361
**Usage Example:**
362

363
```javascript
364
// Custom portal target
365
const customPortalTarget = document.getElementById('editor-container');
366

367
<ReactDataGrid
368
  columns={columns}
369
  rowGetter={i => rows[i]}
370
  rowsCount={rows.length}
371
  minHeight={400}
372
  editorPortalTarget={customPortalTarget}
373
/>
374
```