0
# React Data Grid
1

2
React Data Grid is a comprehensive Excel-like data grid component built with React, featuring virtual rendering, inline editing, keyboard navigation, copy & paste operations, sorting, filtering, and extensive customization options. It provides lightning-fast performance capable of handling hundreds of thousands of rows without performance degradation.
3

4
## Package Information
5

6
- **Package Name**: react-data-grid
7
- **Package Type**: npm
8
- **Language**: JavaScript (with TypeScript definitions)
9
- **Installation**: 
10
  - Core package: `npm install react-data-grid`
11
  - Addons package: `npm install react-data-grid-addons`
12
  - Both packages: `npm install react-data-grid react-data-grid-addons`
13

14
## Core Imports
15

16
**Core Package:**
17

18
```javascript
19
import ReactDataGrid from 'react-data-grid';
20
```
21

22
For named imports:
23

24
```javascript
25
import ReactDataGrid, { 
26
  Row, 
27
  Cell, 
28
  HeaderCell,
29
  EmptyChildRow,
30
  RowComparer,
31
  editors, 
32
  formatters,
33
  shapes,
34
  _constants,
35
  _helpers
36
} from 'react-data-grid';
37
```
38

39
**Addons Package:**
40

41
```javascript
42
import { 
43
  Editors, 
44
  Formatters, 
45
  Toolbar, 
46
  Menu, 
47
  Data, 
48
  ToolsPanel, 
49
  Draggable, 
50
  DraggableHeader, 
51
  Filters, 
52
  Utils 
53
} from 'react-data-grid-addons';
54
```
55

56
**CommonJS:**
57

58
```javascript
59
const ReactDataGrid = require('react-data-grid');
60
const { 
61
  Row, 
62
  Cell, 
63
  HeaderCell, 
64
  EmptyChildRow,
65
  RowComparer,
66
  editors, 
67
  formatters,
68
  shapes,
69
  _constants,
70
  _helpers 
71
} = ReactDataGrid;
72

73
const { 
74
  Editors, 
75
  Formatters, 
76
  Toolbar, 
77
  Menu, 
78
  Data, 
79
  ToolsPanel, 
80
  Draggable, 
81
  DraggableHeader, 
82
  Filters, 
83
  Utils 
84
} = require('react-data-grid-addons');
85
```
86

87
## Basic Usage
88

89
```javascript
90
import ReactDataGrid from 'react-data-grid';
91

92
const columns = [
93
  { key: 'id', name: 'ID' },
94
  { key: 'title', name: 'Title' },
95
  { key: 'complete', name: 'Complete' }
96
];
97

98
const rows = [
99
  { id: 1, title: 'Task 1', complete: true },
100
  { id: 2, title: 'Task 2', complete: false },
101
  { id: 3, title: 'Task 3', complete: false }
102
];
103

104
function Grid() {
105
  return (
106
    <ReactDataGrid
107
      columns={columns}
108
      rowGetter={i => rows[i]}
109
      rowsCount={rows.length}
110
      minHeight={500}
111
    />
112
  );
113
}
114
```
115

116
## Architecture
117

118
React Data Grid is built around several key components:
119

120
- **ReactDataGrid**: Main grid component that orchestrates all functionality
121
- **Virtual Rendering**: Uses viewport-based rendering to handle large datasets efficiently
122
- **Component System**: Modular architecture with separate components for rows, cells, headers, and editors
123
- **Event System**: Comprehensive event handling for user interactions, editing, and data updates
124
- **Column Definition**: Flexible column configuration supporting custom renderers, editors, and behaviors
125

126
## Capabilities
127

128
### Core Grid Component
129

130
The main ReactDataGrid component providing Excel-like data grid functionality with virtual rendering, editing, sorting, and filtering capabilities.
131

132
```javascript { .api }
133
function ReactDataGrid(props: ReactDataGridProps): JSX.Element;
134

135
interface ReactDataGridProps {
136
  // Required props
137
  columns: Column[];
138
  rowGetter: (index: number) => any;
139
  rowsCount: number;
140
  minHeight: number;
141
  
142
  // Optional configuration
143
  rowHeight?: number;
144
  headerRowHeight?: number;
145
  enableCellSelect?: boolean;
146
  cellNavigationMode?: 'none' | 'loopOverRow' | 'changeRow';
147
  
148
  // Event handlers
149
  onGridRowsUpdated?: (updates: GridRowsUpdatedEvent) => void;
150
  onRowSelect?: (rowIdx: number, row: any) => void;
151
  onCellSelected?: (position: Position) => void;
152
  onGridSort?: (sortColumn: string, sortDirection: string) => void;
153
}
154

155
interface Column {
156
  key: string;
157
  name: string;
158
  width?: number;
159
  resizable?: boolean;
160
  sortable?: boolean;
161
  filterable?: boolean;
162
  editable?: boolean;
163
  formatter?: React.ComponentType<any>;
164
  editor?: React.ComponentType<any>;
165
  frozen?: boolean;
166
}
167
```
168

169
[Core Grid API](./core-grid.md)
170

171
### Cell Editing and Editors
172

173
Built-in and customizable cell editors for inline data editing with keyboard navigation support.
174

175
```javascript { .api }
176
const editors = {
177
  CheckboxEditor: React.ComponentType<EditorProps>;
178
  SimpleTextEditor: React.ComponentType<EditorProps>;
179
  EditorBase: React.ComponentType<EditorProps>;
180
};
181

182
interface EditorProps {
183
  value: any;
184
  onKeyDown: (event: KeyboardEvent) => void;
185
  onBlur: () => void;
186
  commit: () => void;
187
  column: Column;
188
}
189
```
190

191
[Editors and Editing](./editors.md)
192

193
### Cell Formatting and Display
194

195
Customizable cell formatters for controlling how data is displayed in grid cells.
196

197
```javascript { .api }
198
const formatters = {
199
  SimpleCellFormatter: React.ComponentType<FormatterProps>;
200
  SelectAll: React.ComponentType<FormatterProps>;
201
};
202

203
interface FormatterProps {
204
  value: any;
205
  row: any;
206
  column: Column;
207
  rowIdx: number;
208
}
209
```
210

211
[Formatters and Display](./formatters.md)
212

213
### Row and Cell Components
214

215
Core building blocks for custom grid rendering and advanced customization scenarios.
216

217
```javascript { .api }
218
const Row: React.ComponentType<RowProps>;
219
const Cell: React.ComponentType<CellProps>;
220
const HeaderCell: React.ComponentType<HeaderCellProps>;
221
const EmptyChildRow: React.ComponentType<EmptyChildRowProps>;
222

223
interface RowProps {
224
  idx: number;
225
  visibleStart: number;
226
  visibleEnd: number;
227
  row: any;
228
  height: number;
229
  columns: Column[];
230
}
231

232
interface EmptyChildRowProps {
233
  height: number;
234
  columns: Column[];
235
}
236
```
237

238
[Components and Customization](./components.md)
239

240
### Selection and Interaction
241

242
Comprehensive selection system supporting single cells, multiple rows, and range selection with keyboard shortcuts.
243

244
```javascript { .api }
245
interface RowSelection {
246
  enableShiftSelect?: boolean;
247
  onRowsSelected?: (rows: SelectedRow[]) => void;
248
  onRowsDeselected?: (rows: SelectedRow[]) => void;
249
  showCheckbox?: boolean;
250
  selectBy: SelectionMethod;
251
}
252

253
interface CellRangeSelection {
254
  onStart?: (selectedRange: SelectionRange) => void;
255
  onUpdate?: (selectedRange: SelectionRange) => void;
256
  onComplete?: (selectedRange: SelectionRange) => void;
257
}
258
```
259

260
[Selection and Events](./selection.md)
261

262
### Constants and Utilities
263

264
Helper constants, utilities, and configuration options for advanced grid customization.
265

266
```javascript { .api }
267
const _constants = {
268
  CellNavigationMode: {
269
    NONE: 'none';
270
    CHANGE_ROW: 'changeRow';
271
    LOOP_OVER_ROW: 'loopOverRow';
272
  };
273
  UpdateActions: {
274
    CELL_UPDATE: 'CELL_UPDATE';
275
    COLUMN_FILL: 'COLUMN_FILL';
276
    COPY_PASTE: 'COPY_PASTE';
277
    CELL_DRAG: 'CELL_DRAG';
278
  };
279
};
280

281
const RowComparer: (nextProps: any, currentProps: any) => boolean;
282
```
283

284
[Utilities and Constants](./utilities.md)
285

286
## Addons Package Capabilities
287

288
The react-data-grid-addons package provides extended functionality including advanced editors, filtering, drag & drop, toolbar components, and data management utilities.
289

290
### Advanced Editors
291

292
Extended editor components including dropdowns, auto-complete, and date pickers for rich data input experiences.
293

294
```javascript { .api }
295
const Editors = {
296
  AutoComplete: React.ComponentType<AutoCompleteEditorProps>;
297
  DropDownEditor: React.ComponentType<DropDownEditorProps>;
298
  DateEditor: React.ComponentType<DateEditorProps>;
299
  CheckboxEditor: React.ComponentType<CheckboxEditorProps>;
300
  EditorContainer: React.ComponentType<EditorContainerProps>;
301
};
302
```
303

304
[Advanced Editors](./addons-editors.md)
305

306
### Advanced Filters
307

308
Sophisticated filtering system with support for text, numeric, dropdown, and custom filter types.
309

310
```javascript { .api }
311
const Filters = {
312
  NumericFilter: React.ComponentType<NumericFilterProps>;
313
  SingleSelectFilter: React.ComponentType<SingleSelectFilterProps>;
314
  MultiSelectFilter: React.ComponentType<MultiSelectFilterProps>;
315
  AutoCompleteFilter: React.ComponentType<AutoCompleteFilterProps>;
316
};
317
```
318

319
[Advanced Filters](./addons-filters.md)
320

321
### Toolbar and UI Components
322

323
Ready-to-use toolbar components and panels for common grid operations and data manipulation.
324

325
```javascript { .api }
326
const Toolbar: React.ComponentType<ToolbarProps>;
327
const ToolsPanel: React.ComponentType<ToolsPanelProps>;
328

329
interface ToolbarProps {
330
  children?: React.ReactNode;
331
  onToggleFilter?: () => void;
332
  enableFilter?: boolean;
333
  numberOfRows?: number;
334
}
335
```
336

337
[Toolbar and UI](./addons-toolbar.md)
338

339
### Drag and Drop
340

341
Complete drag and drop system for row and column reordering with visual feedback.
342

343
```javascript { .api }
344
const Draggable: {
345
  Container: React.ComponentType<DraggableContainerProps>;
346
  RowActionsCell: React.ComponentType<RowActionsCellProps>;
347
};
348

349
const DraggableHeader: {
350
  DraggableHeaderCell: React.ComponentType<DraggableHeaderCellProps>;
351
};
352
```
353

354
[Drag and Drop](./addons-drag-drop.md)
355

356
### Data Management
357

358
Redux integration utilities and selectors for efficient state management with large datasets.
359

360
```javascript { .api }
361
const Data = {
362
  Selectors: {
363
    getRows: (state: any) => any[];
364
    getSelectedRowsByKey: (state: any, key: string) => any[];
365
  };
366
  
367
  groupBy: (rows: any[], groupKeys: string[]) => any[];
368
  createGroupedData: (data: any[], groupBy: string[]) => any[];
369
};
370
```
371

372
[Data Management](./addons-data.md)
373

374
### Context Menu
375

376
Right-click context menu system for row and cell-level actions.
377

378
```javascript { .api }
379
const Menu = {
380
  ContextMenu: React.ComponentType<ContextMenuProps>;
381
  MenuHeader: React.ComponentType<MenuHeaderProps>;
382
  MenuItem: React.ComponentType<MenuItemProps>;
383
  SubMenu: React.ComponentType<SubMenuProps>;
384
};
385
```
386

387
[Context Menu](./addons-menu.md)