0
# Row Management
1

2
Row management handles data structure, state management, and selection for grid rows. The system provides efficient handling of large datasets with built-in selection state and row identification.
3

4
## Capabilities
5

6
### Row Data Structure
7

8
Core data structures for representing rows and their associated metadata.
9

10
```typescript { .api }
11
/**
12
 * Base interface for row data objects
13
 * All row data must include a unique identifier
14
 */
15
interface RowData extends ObjectWithId {
16
  /** Unique identifier for the row */
17
  id: RowId;
18
  /** Additional data fields as key-value pairs */
19
  [key: string]: any;
20
}
21

22
interface ObjectWithId {
23
  id: RowId;
24
}
25

26
/**
27
 * Internal row model containing data and state
28
 * Used internally by the grid for state management
29
 */
30
interface RowModel {
31
  /** Unique row identifier */
32
  id: RowId;
33
  /** Original row data */
34
  data: RowData;
35
  /** Selection state */
36
  selected: boolean;
37
}
38

39
type RowId = string | number;
40
type RowsProp = RowData[];
41
type Rows = RowModel[];
42
type CellValue = string | number | boolean | Date | null | undefined | object;
43
```
44

45
**Usage Examples:**
46

47
```typescript
48
import { RowData, RowId } from "@material-ui/data-grid";
49

50
// Basic row data
51
const basicRows: RowData[] = [
52
  { id: 1, name: "Alice", age: 25, email: "alice@example.com" },
53
  { id: 2, name: "Bob", age: 30, email: "bob@example.com" },
54
  { id: "user-3", name: "Charlie", age: 35, email: "charlie@example.com" },
55
];
56

57
// Complex row data with nested objects
58
const complexRows: RowData[] = [
59
  {
60
    id: "order-1",
61
    orderNumber: "ORD-001",
62
    customer: {
63
      name: "John Doe",
64
      email: "john@example.com",
65
    },
66
    items: [
67
      { product: "Laptop", quantity: 1, price: 999.99 },
68
      { product: "Mouse", quantity: 2, price: 29.99 },
69
    ],
70
    total: 1059.97,
71
    status: "shipped",
72
    createdAt: new Date("2023-01-15"),
73
  },
74
  {
75
    id: "order-2",
76
    orderNumber: "ORD-002",
77
    customer: {
78
      name: "Jane Smith",
79
      email: "jane@example.com",
80
    },
81
    items: [
82
      { product: "Keyboard", quantity: 1, price: 149.99 },
83
    ],
84
    total: 149.99,
85
    status: "pending",
86
    createdAt: new Date("2023-01-16"),
87
  },
88
];
89
```
90

91
### Row Creation and Management
92

93
Utility functions for creating and managing row models.
94

95
```typescript { .api }
96
/**
97
 * Creates a RowModel from RowData
98
 * Initializes selection state and wraps data
99
 * @param rowData - Raw row data with id field
100
 * @returns RowModel with initialized state
101
 */
102
function createRow(rowData: RowData): RowModel;
103
```
104

105
**Usage Examples:**
106

107
```typescript
108
import { createRow, RowData, RowModel } from "@material-ui/data-grid";
109

110
// Create row models from data
111
const rowData: RowData = { id: 1, name: "Alice", age: 25 };
112
const rowModel: RowModel = createRow(rowData);
113

114
console.log(rowModel);
115
// Output: { id: 1, data: { id: 1, name: "Alice", age: 25 }, selected: false }
116

117
// Batch create rows
118
const rawData: RowData[] = [
119
  { id: 1, name: "Alice", age: 25 },
120
  { id: 2, name: "Bob", age: 30 },
121
];
122

123
const rowModels: RowModel[] = rawData.map(createRow);
124
```
125

126
### Row Selection
127

128
Row selection management in the community edition (single selection only).
129

130
```typescript { .api }
131
interface RowSelectedParams {
132
  /** ID of the selected/deselected row */
133
  id: RowId;
134
  /** Complete row data */
135
  row: RowData;
136
  /** Current selection state */
137
  isSelected: boolean;
138
  /** Grid API reference */
139
  api: GridApi;
140
}
141

142
interface SelectionChangeParams {
143
  /** Array of currently selected row IDs (max 1 in community edition) */
144
  selectionModel: RowId[];
145
  /** Grid API reference */
146
  api: GridApi;
147
}
148
```
149

150
**Usage Examples:**
151

152
```typescript
153
import React from "react";
154
import { DataGrid, RowSelectedParams, SelectionChangeParams } from "@material-ui/data-grid";
155

156
function SelectionExample() {
157
  const [selectedRows, setSelectedRows] = React.useState<RowId[]>([]);
158

159
  const handleRowSelected = (params: RowSelectedParams) => {
160
    console.log(`Row ${params.id} ${params.isSelected ? "selected" : "deselected"}`);
161
    console.log("Row data:", params.row);
162
  };
163

164
  const handleSelectionChange = (params: SelectionChangeParams) => {
165
    setSelectedRows(params.selectionModel);
166
    console.log("Current selection:", params.selectionModel);
167
    
168
    // In community edition, maximum 1 row can be selected
169
    if (params.selectionModel.length > 0) {
170
      console.log("Selected row ID:", params.selectionModel[0]);
171
    }
172
  };
173

174
  return (
175
    <div style={{ height: 400, width: "100%" }}>
176
      <DataGrid
177
        rows={rows}
178
        columns={columns}
179
        checkboxSelection
180
        onRowSelected={handleRowSelected}
181
        onSelectionChange={handleSelectionChange}
182
      />
183
      <div>
184
        Selected rows: {selectedRows.join(", ")}
185
      </div>
186
    </div>
187
  );
188
}
189
```
190

191
### Row Interaction Events
192

193
Event handlers for row-level user interactions.
194

195
```typescript { .api }
196
interface RowParams {
197
  /** Row identifier */
198
  id: RowId;
199
  /** Array of all columns */
200
  columns: Columns;
201
  /** Complete row data */
202
  row: RowData;
203
  /** Grid API reference */
204
  api: GridApi;
205
}
206
```
207

208
**Usage Examples:**
209

210
```typescript
211
import React from "react";
212
import { DataGrid, RowParams } from "@material-ui/data-grid";
213

214
function RowInteractionExample() {
215
  const handleRowClick = (params: RowParams) => {
216
    console.log("Row clicked:", params.id);
217
    console.log("Row data:", params.row);
218
    
219
    // Access specific field values
220
    console.log("Name:", params.row.name);
221
    console.log("Age:", params.row.age);
222
  };
223

224
  const handleRowHover = (params: RowParams) => {
225
    console.log("Row hovered:", params.id);
226
  };
227

228
  return (
229
    <div style={{ height: 400, width: "100%" }}>
230
      <DataGrid
231
        rows={rows}
232
        columns={columns}
233
        onRowClick={handleRowClick}
234
        onRowHover={handleRowHover}
235
      />
236
    </div>
237
  );
238
}
239
```
240

241
### Cell Coordinates and Navigation
242

243
System for identifying and navigating between cells within rows.
244

245
```typescript { .api }
246
/**
247
 * Coordinates of a cell in the grid
248
 * Used for navigation and focus management
249
 */
250
interface CellIndexCoordinates {
251
  /** Column index (0-based) */
252
  colIndex: number;
253
  /** Row index (0-based) */
254
  rowIndex: number;
255
}
256
```
257

258
**Usage Examples:**
259

260
```typescript
261
import { CellIndexCoordinates } from "@material-ui/data-grid";
262

263
// Cell coordinate examples
264
const topLeftCell: CellIndexCoordinates = { colIndex: 0, rowIndex: 0 };
265
const specificCell: CellIndexCoordinates = { colIndex: 2, rowIndex: 5 };
266

267
// Using coordinates for programmatic navigation
268
function navigateToCell(coordinates: CellIndexCoordinates) {
269
  console.log(`Navigating to row ${coordinates.rowIndex}, column ${coordinates.colIndex}`);
270
}
271
```
272

273
### Row State Management
274

275
Internal state management for rows including selection and data synchronization.
276

277
```typescript { .api }
278
interface InternalColumns {
279
  /** All column definitions */
280
  all: Columns;
281
  /** Visible column definitions */
282
  visible: Columns;
283
  /** Column metadata including positions and total width */
284
  meta: ColumnsMeta;
285
  /** Whether any columns are defined */
286
  hasColumns: boolean;
287
  /** Whether any visible columns exist */
288
  hasVisibleColumns: boolean;
289
  /** Fast lookup for columns by field name */
290
  lookup: ColumnLookup;
291
}
292

293
interface ColumnsMeta {
294
  /** Total width of all visible columns */
295
  totalWidth: number;
296
  /** Array of column positions for positioning calculations */
297
  positions: number[];
298
}
299

300
type ColumnLookup = { [field: string]: ColDef };
301
```
302

303
**Usage Notes:**
304

305
- Row IDs must be unique across the entire dataset
306
- Row IDs can be strings or numbers
307
- Selection state is managed internally by the grid
308
- Community edition supports only single row selection
309
- Row data is immutable - create new objects for updates
310

311
### Performance Considerations
312

313
```typescript { .api }
314
// Row data best practices for performance
315

316
// ✅ Good: Stable row IDs
317
const goodRows: RowData[] = [
318
  { id: "user-123", name: "Alice", lastModified: Date.now() },
319
  { id: "user-456", name: "Bob", lastModified: Date.now() },
320
];
321

322
// ❌ Bad: Changing row IDs will cause unnecessary re-renders
323
const badRows: RowData[] = [
324
  { id: Math.random(), name: "Alice" }, // Don't use random IDs
325
  { id: Date.now(), name: "Bob" },     // Don't use timestamps as IDs
326
];
327

328
// ✅ Good: Memoize row data to prevent unnecessary re-renders
329
const MemoizedGrid = React.memo(() => {
330
  const rows = React.useMemo(() => [
331
    { id: 1, name: "Alice", age: 25 },
332
    { id: 2, name: "Bob", age: 30 },
333
  ], []); // Dependencies array controls when rows are recreated
334

335
  return <DataGrid rows={rows} columns={columns} />;
336
});
337
```