0
# Configuration Options
1

2
Grid configuration options control appearance, behavior, and functionality. The community edition provides most configuration options with some restrictions on pagination and selection features.
3

4
## Capabilities
5

6
### Grid Options Interface
7

8
Complete configuration interface for customizing grid behavior and appearance.
9

10
```typescript { .api }
11
/**
12
 * Comprehensive grid configuration options
13
 * Community edition excludes pagination, disableMultipleColumnsSorting, and disableMultipleSelection
14
 */
15
interface GridOptions {
16
  /** Dynamic height that adjusts to content (default: false) */
17
  autoHeight?: boolean;
18
  /** Height of each row in pixels (default: 52) */
19
  rowHeight: number;
20
  /** Height of column headers in pixels (default: 56) */
21
  headerHeight: number;
22
  /** Width/height of scrollbars in pixels (default: 15) */
23
  scrollbarSize: number;
24
  /** Number of columns rendered outside viewport for performance (default: 2) */
25
  columnBuffer: number;
26
  /** Disable multiple row selection - not available in community edition */
27
  disableMultipleSelection?: boolean;
28
  /** Disable multiple column sorting - not available in community edition */
29
  disableMultipleColumnsSorting?: boolean;
30
  /** Show right border on cells (default: false) */
31
  showCellRightBorder?: boolean;
32
  /** Show right border on column headers (default: false) */
33
  showColumnRightBorder?: boolean;
34
  /** Prevent rows from extending full width (default: false) */
35
  disableExtendRowFullWidth?: boolean;
36
  /** Sort direction sequence (default: ['asc', 'desc', null]) */
37
  sortingOrder: SortDirection[];
38
  /** Enable pagination - always true in community edition */
39
  pagination?: boolean;
40
  /** Number of rows per page (default: 100, max: 100) */
41
  pageSize?: number;
42
  /** Calculate page size automatically based on container height (default: false) */
43
  autoPageSize?: boolean;
44
  /** Available page size options (default: [25, 50, 100]) */
45
  rowsPerPageOptions?: number[];
46
  /** Pagination processing mode: 'client' or 'server' */
47
  paginationMode?: FeatureMode;
48
  /** Total row count when different from rows array length */
49
  rowCount?: number;
50
  /** Current page number (default: 1) */
51
  page?: number;
52
  /** Sorting processing mode: 'client' or 'server' */
53
  sortingMode?: FeatureMode;
54
  /** Hide entire footer (default: false) */
55
  hideFooter?: boolean;
56
  /** Hide row count in footer (default: false) */
57
  hideFooterRowCount?: boolean;
58
  /** Hide selected row count in footer (default: false) */
59
  hideFooterSelectedRowCount?: boolean;
60
  /** Hide pagination controls in footer (default: false) */
61
  hideFooterPagination?: boolean;
62
  /** Add checkbox column for row selection (default: false) */
63
  checkboxSelection?: boolean;
64
  /** Disable row selection on click (default: false) */
65
  disableSelectionOnClick?: boolean;
66
  /** Custom logger implementation */
67
  logger?: Logger;
68
  /** Logging level or false to disable (default: 'warn') */
69
  logLevel?: string | false;
70
  /** Initial sort configuration */
71
  sortModel?: SortModel;
72
  /** Icon set configuration */
73
  icons: IconsOptions;
74
  /** Custom column type definitions */
75
  columnTypes: ColumnTypesRecord;
76
}
77

78
type FeatureMode = "client" | "server";
79
type SortDirection = "asc" | "desc" | null;
80
```
81

82
**Usage Examples:**
83

84
```typescript
85
import React from "react";
86
import { DataGrid, GridOptions } from "@material-ui/data-grid";
87

88
// Basic configuration
89
function BasicConfigGrid() {
90
  const gridOptions: Partial<GridOptions> = {
91
    rowHeight: 60,
92
    headerHeight: 70,
93
    checkboxSelection: true,
94
    pageSize: 25,
95
    rowsPerPageOptions: [25, 50, 100],
96
  };
97

98
  return (
99
    <div style={{ height: 600, width: "100%" }}>
100
      <DataGrid
101
        rows={rows}
102
        columns={columns}
103
        {...gridOptions}
104
      />
105
    </div>
106
  );
107
}
108

109
// Advanced configuration
110
function AdvancedConfigGrid() {
111
  const [pageSize, setPageSize] = React.useState(50);
112
  
113
  return (
114
    <div style={{ height: 600, width: "100%" }}>
115
      <DataGrid
116
        rows={rows}
117
        columns={columns}
118
        autoHeight={false}
119
        rowHeight={48}
120
        headerHeight={64}
121
        showCellRightBorder={true}
122
        showColumnRightBorder={true}
123
        pageSize={pageSize}
124
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
125
        rowsPerPageOptions={[25, 50, 100]}
126
        sortingOrder={['desc', 'asc', null]}
127
        checkboxSelection
128
        disableSelectionOnClick={false}
129
        hideFooterSelectedRowCount={false}
130
      />
131
    </div>
132
  );
133
}
134
```
135

136
### Height and Sizing Options
137

138
Configuration for grid dimensions and row sizing.
139

140
```typescript { .api }
141
interface SizingOptions {
142
  /** Dynamic height that adjusts to content */
143
  autoHeight?: boolean;
144
  /** Fixed height of each row in pixels */
145
  rowHeight: number;
146
  /** Height of column header row in pixels */
147
  headerHeight: number;
148
  /** Size of scrollbars in pixels */
149
  scrollbarSize: number;
150
  /** Number of off-screen columns to render for smooth scrolling */
151
  columnBuffer: number;
152
}
153
```
154

155
**Usage Examples:**
156

157
```typescript
158
// Auto-height grid that grows with content
159
function AutoHeightGrid() {
160
  return (
161
    <div style={{ width: "100%" }}>
162
      <DataGrid
163
        rows={rows}
164
        columns={columns}
165
        autoHeight={true}
166
        rowHeight={40}
167
        headerHeight={50}
168
      />
169
    </div>
170
  );
171
}
172

173
// Fixed height with custom row sizing
174
function CustomSizedGrid() {
175
  return (
176
    <div style={{ height: 500, width: "100%" }}>
177
      <DataGrid
178
        rows={rows}
179
        columns={columns}
180
        autoHeight={false}
181
        rowHeight={72} // Taller rows for more content
182
        headerHeight={80} // Taller headers
183
        scrollbarSize={12} // Thinner scrollbars
184
        columnBuffer={3} // Render more off-screen columns
185
      />
186
    </div>
187
  );
188
}
189
```
190

191
### Pagination Configuration
192

193
Settings for pagination behavior and appearance.
194

195
```typescript { .api }
196
interface PaginationOptions {
197
  /** Enable pagination (always true in community edition) */
198
  pagination?: boolean;
199
  /** Rows per page (max 100 in community edition) */  
200
  pageSize?: number;
201
  /** Auto-calculate page size based on container height */
202
  autoPageSize?: boolean;
203
  /** Available page size options for user selection */
204
  rowsPerPageOptions?: number[];
205
  /** Processing mode: client-side or server-side */
206
  paginationMode?: FeatureMode;
207
  /** Total row count for server-side pagination */
208
  rowCount?: number;
209
  /** Current page number (1-based) */
210
  page?: number;
211
}
212

213
const MAX_PAGE_SIZE = 100; // Community edition limit
214
```
215

216
**Usage Examples:**
217

218
```typescript
219
import React from "react";
220
import { DataGrid } from "@material-ui/data-grid";
221

222
// Client-side pagination
223
function ClientPaginationGrid() {
224
  const [page, setPage] = React.useState(1);
225
  const [pageSize, setPageSize] = React.useState(25);
226

227
  return (
228
    <div style={{ height: 600, width: "100%" }}>
229
      <DataGrid
230
        rows={rows}
231
        columns={columns}
232
        pagination={true}
233
        pageSize={pageSize}
234
        page={page}
235
        rowsPerPageOptions={[10, 25, 50, 100]}
236
        paginationMode="client"
237
        onPageChange={(params) => setPage(params.page)}
238
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
239
      />
240
    </div>
241
  );
242
}
243

244
// Server-side pagination
245
function ServerPaginationGrid() {
246
  const [loading, setLoading] = React.useState(false);
247
  const [rows, setRows] = React.useState([]);
248
  const [rowCount, setRowCount] = React.useState(0);
249
  const [page, setPage] = React.useState(1);
250
  const [pageSize, setPageSize] = React.useState(25);
251

252
  const fetchData = React.useCallback(async () => {
253
    setLoading(true);
254
    try {
255
      const response = await fetch(`/api/data?page=${page}&pageSize=${pageSize}`);
256
      const data = await response.json();
257
      setRows(data.rows);
258
      setRowCount(data.total);
259
    } finally {
260
      setLoading(false);
261
    }
262
  }, [page, pageSize]);
263

264
  React.useEffect(() => {
265
    fetchData();
266
  }, [fetchData]);
267

268
  return (
269
    <div style={{ height: 600, width: "100%" }}>
270
      <DataGrid
271
        rows={rows}
272
        columns={columns}
273
        loading={loading}
274
        pagination={true}
275
        pageSize={pageSize}
276
        page={page}
277
        rowCount={rowCount}
278
        paginationMode="server"
279
        onPageChange={(params) => setPage(params.page)}
280
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
281
      />
282
    </div>
283
  );
284
}
285
```
286

287
### Sorting Configuration
288

289
Settings for column sorting behavior and appearance.
290

291
```typescript { .api }
292
interface SortingOptions {
293
  /** Sort direction sequence when clicking column headers */
294
  sortingOrder: SortDirection[];
295
  /** Processing mode: client-side or server-side */
296
  sortingMode?: FeatureMode;
297
  /** Initial sort configuration */
298
  sortModel?: SortModel;
299
  /** Disable multiple column sorting (always true in community edition) */
300
  disableMultipleColumnsSorting?: boolean;
301
}
302

303
interface SortModel {
304
  /** Column field to sort by */
305
  field: string;
306
  /** Sort direction */
307
  sort: SortDirection;
308
}
309

310
type SortDirection = "asc" | "desc" | null;
311
```
312

313
**Usage Examples:**
314

315
```typescript
316
import React from "react";
317
import { DataGrid, SortModel } from "@material-ui/data-grid";
318

319
// Client-side sorting with custom order
320
function ClientSortingGrid() {
321
  const [sortModel, setSortModel] = React.useState<SortModel[]>([
322
    { field: "name", sort: "asc" }
323
  ]);
324

325
  return (
326
    <div style={{ height: 600, width: "100%" }}>
327
      <DataGrid
328
        rows={rows}
329
        columns={columns}
330
        sortingOrder={['asc', 'desc', null]} // Default order
331
        sortingMode="client"
332
        sortModel={sortModel}
333
        onSortModelChange={(params) => {
334
          setSortModel(params.sortModel);
335
          console.log("New sort model:", params.sortModel);
336
        }}
337
      />
338
    </div>
339
  );
340
}
341

342
// Server-side sorting
343
function ServerSortingGrid() {
344
  const [loading, setLoading] = React.useState(false);
345
  const [rows, setRows] = React.useState([]);
346
  const [sortModel, setSortModel] = React.useState<SortModel[]>([]);
347

348
  const fetchSortedData = React.useCallback(async () => {
349
    setLoading(true);
350
    try {
351
      const sortParam = sortModel.length > 0 
352
        ? `&sortBy=${sortModel[0].field}&sortOrder=${sortModel[0].sort}`
353
        : '';
354
      
355
      const response = await fetch(`/api/data?${sortParam}`);
356
      const data = await response.json();
357
      setRows(data);
358
    } finally {
359
      setLoading(false);
360
    }
361
  }, [sortModel]);
362

363
  React.useEffect(() => {
364
    fetchSortedData();
365
  }, [fetchSortedData]);
366

367
  return (
368
    <div style={{ height: 600, width: "100%" }}>
369
      <DataGrid
370
        rows={rows}
371
        columns={columns}
372
        loading={loading}
373
        sortingMode="server"
374
        sortModel={sortModel}
375
        onSortModelChange={(params) => setSortModel(params.sortModel)}
376
      />
377
    </div>
378
  );
379
}
380
```
381

382
### Selection Configuration
383

384
Settings for row selection behavior and appearance.
385

386
```typescript { .api }
387
interface SelectionOptions {
388
  /** Add checkbox column for row selection */
389
  checkboxSelection?: boolean;
390
  /** Disable row selection on row/cell click */
391
  disableSelectionOnClick?: boolean;
392
  /** Disable multiple row selection (always true in community edition) */
393
  disableMultipleSelection?: boolean;
394
}
395
```
396

397
**Usage Examples:**
398

399
```typescript
400
// Selection with checkboxes
401
function CheckboxSelectionGrid() {
402
  const [selectedRows, setSelectedRows] = React.useState([]);
403

404
  return (
405
    <div style={{ height: 600, width: "100%" }}>
406
      <DataGrid
407
        rows={rows}
408
        columns={columns}
409
        checkboxSelection={true}
410
        disableSelectionOnClick={false}
411
        onSelectionChange={(params) => {
412
          setSelectedRows(params.selectionModel);
413
        }}
414
      />
415
      <div>Selected: {selectedRows.length} rows</div>
416
    </div>
417
  );
418
}
419

420
// Selection disabled on click
421
function ClickDisabledGrid() {
422
  return (
423
    <div style={{ height: 600, width: "100%" }}>
424
      <DataGrid
425
        rows={rows}
426
        columns={columns}
427
        checkboxSelection={true}
428
        disableSelectionOnClick={true} // Only checkbox selection
429
      />
430
    </div>
431
  );
432
}
433
```
434

435
### Appearance Options
436

437
Visual customization settings for borders, styling, and layout.
438

439
```typescript { .api }
440
interface AppearanceOptions {
441
  /** Show right border on data cells */
442
  showCellRightBorder?: boolean;
443
  /** Show right border on column headers */
444
  showColumnRightBorder?: boolean;
445
  /** Prevent rows from extending to full container width */
446
  disableExtendRowFullWidth?: boolean;
447
}
448
```
449

450
**Usage Examples:**
451

452
```typescript
453
// Grid with borders
454
function BorderedGrid() {
455
  return (
456
    <div style={{ height: 600, width: "100%" }}>
457
      <DataGrid
458
        rows={rows}
459
        columns={columns}
460
        showCellRightBorder={true}
461
        showColumnRightBorder={true}
462
        disableExtendRowFullWidth={false}
463
      />
464
    </div>
465
  );
466
}
467
```
468

469
### Footer Configuration
470

471
Settings for footer visibility and content.
472

473
```typescript { .api }
474
interface FooterOptions {
475
  /** Hide entire footer section */
476
  hideFooter?: boolean;
477
  /** Hide total row count display */
478
  hideFooterRowCount?: boolean;
479
  /** Hide selected row count display */
480
  hideFooterSelectedRowCount?: boolean;
481
  /** Hide pagination controls */
482
  hideFooterPagination?: boolean;
483
}
484
```
485

486
**Usage Examples:**
487

488
```typescript
489
// Minimal footer
490
function MinimalFooterGrid() {
491
  return (
492
    <div style={{ height: 600, width: "100%" }}>
493
      <DataGrid
494
        rows={rows}
495
        columns={columns}
496
        hideFooterSelectedRowCount={true}
497
        hideFooterRowCount={false}
498
        hideFooterPagination={false}
499
      />
500
    </div>
501
  );
502
}
503

504
// No footer
505
function NoFooterGrid() {
506
  return (
507
    <div style={{ height: 600, width: "100%" }}>
508
      <DataGrid
509
        rows={rows}
510
        columns={columns}
511
        hideFooter={true}
512
      />
513
    </div>
514
  );
515
}
516
```
517

518
### Default Configuration
519

520
The default configuration object used by the grid.
521

522
```typescript { .api }
523
/**
524
 * Default grid options applied when not specified
525
 * These values are used as fallbacks for undefined options
526
 */
527
const DEFAULT_GRID_OPTIONS: GridOptions = {
528
  rowHeight: 52,
529
  headerHeight: 56,
530
  scrollbarSize: 15,
531
  columnBuffer: 2,
532
  rowsPerPageOptions: [25, 50, 100],
533
  pageSize: 100,
534
  paginationMode: "client",
535
  sortingMode: "client",
536
  sortingOrder: ['asc', 'desc', null],
537
  logLevel: 'warn',
538
  columnTypes: DEFAULT_COLUMN_TYPES,
539
  icons: {
540
    columnSortedAscending: ArrowUpwardIcon,
541
    columnSortedDescending: ArrowDownwardIcon,
542
    columnResize: SeparatorIcon,
543
  },
544
};
545
```