0
# Column System
1

2
The column system provides flexible configuration for defining how data is displayed, formatted, and interacted with in the data grid. It supports various data types, custom renderers, and advanced formatting options.
3

4
## Capabilities
5

6
### Column Definition
7

8
Core interface for defining column behavior, appearance, and data handling.
9

10
```typescript { .api }
11
/**
12
 * Column definition interface for configuring grid columns
13
 * Supports data binding, formatting, rendering, and interaction customization
14
 */
15
interface ColDef {
16
  /** Unique identifier for mapping to row data properties */
17
  field: string;
18
  /** Display name shown in column header */
19
  headerName?: string;
20
  /** Tooltip description for column header */
21
  description?: string;
22
  /** Column width in pixels (default: 100) */
23
  width?: number;
24
  /** Hide column from display */
25
  hide?: boolean;
26
  /** Enable column sorting (default: true) */
27
  sortable?: boolean;
28
  /** Enable column resizing (default: true) */
29
  resizable?: boolean;
30
  /** Custom sort comparator function */
31
  sortComparator?: ComparatorFn;
32
  /** Initial sort direction */
33
  sortDirection?: SortDirection;
34
  /** Sort priority for multi-column sorting */
35
  sortIndex?: number;
36
  /** Column data type (default: 'string') */
37
  type?: ColType;
38
  /** Cell content alignment */
39
  align?: Alignment;
40
  /** Function to extract cell value from row data */
41
  valueGetter?: (params: ValueGetterParams) => CellValue;
42
  /** Function to format cell value for display */
43
  valueFormatter?: (params: ValueFormatterParams) => CellValue;
44
  /** CSS class name for cells in this column */
45
  cellClassName?: CellClassNamePropType;
46
  /** Dynamic CSS class rules for cells */
47
  cellClassRules?: CellClassRules;
48
  /** Custom React component for rendering cells */
49
  renderCell?: (params: CellParams) => React.ReactElement;
50
  /** CSS class name for column header */
51
  headerClassName?: string | string[];
52
  /** Custom React component for rendering column header */
53
  renderHeader?: (params: ColParams) => React.ReactElement;
54
  /** Header content alignment */
55
  headerAlign?: Alignment;
56
  /** Hide sort icons in header */
57
  hideSortIcons?: boolean;
58
  /** Disable click event bubbling in cells */
59
  disableClickEventBubbling?: boolean;
60
}
61

62
type Columns = ColDef[];
63
type Alignment = "left" | "right" | "center";
64
type ColType = "string" | "number" | "date" | "dateTime" | "boolean";
65
type SortDirection = "asc" | "desc" | null;
66
type ComparatorFn = (v1: CellValue, v2: CellValue) => number;
67
```
68

69
**Usage Examples:**
70

71
```typescript
72
import { ColDef } from "@material-ui/data-grid";
73

74
// Basic column definitions
75
const basicColumns: ColDef[] = [
76
  { field: "id", headerName: "ID", width: 90 },
77
  { field: "firstName", headerName: "First Name", width: 150 },
78
  { field: "lastName", headerName: "Last Name", width: 150 },
79
  { field: "age", headerName: "Age", type: "number", width: 110 },
80
];
81

82
// Advanced column with custom formatting
83
const advancedColumns: ColDef[] = [
84
  {
85
    field: "fullName",
86
    headerName: "Full Name",
87
    width: 200,
88
    valueGetter: (params) => {
89
      return `${params.row.firstName || ""} ${params.row.lastName || ""}`;
90
    },
91
  },
92
  {
93
    field: "salary",
94
    headerName: "Salary",
95
    type: "number",
96
    width: 120,
97
    align: "right",
98
    valueFormatter: (params) => {
99
      return `$${params.value?.toLocaleString()}`;
100
    },
101
  },
102
  {
103
    field: "isActive",
104
    headerName: "Status",
105
    width: 100,
106
    renderCell: (params) => (
107
      <span style={{ 
108
        color: params.value ? "green" : "red",
109
        fontWeight: "bold" 
110
      }}>
111
        {params.value ? "Active" : "Inactive"}
112
      </span>
113
    ),
114
  },
115
];
116
```
117

118
### Column Types
119

120
Built-in column types with default behavior and formatting.
121

122
```typescript { .api }
123
type ColType = "string" | "number" | "date" | "dateTime" | "boolean";
124

125
/** Built-in column type definitions with default configurations */
126
interface ColTypeDef {
127
  /** Column type identifier */
128
  type: ColType;
129
  /** Default width for this column type */
130
  width?: number;
131
  /** Default alignment for this column type */
132
  align?: Alignment;
133
  /** Default sort comparator */
134
  sortComparator?: ComparatorFn;
135
  /** Default value formatter */
136
  valueFormatter?: (params: ValueFormatterParams) => CellValue;
137
}
138
```
139

140
**Usage Examples:**
141

142
```typescript
143
// String columns (default type)
144
const stringColumn: ColDef = {
145
  field: "name",
146
  headerName: "Name",
147
  type: "string", // Optional, this is the default
148
  align: "left",  // Default alignment for strings
149
};
150

151
// Number columns with right alignment
152
const numberColumn: ColDef = {
153
  field: "price",
154
  headerName: "Price",
155
  type: "number",
156
  align: "right", // Numbers typically right-aligned
157
  valueFormatter: (params) => `$${params.value}`,
158
};
159

160
// Date columns with custom formatting
161
const dateColumn: ColDef = {
162
  field: "createdAt",
163
  headerName: "Created",
164
  type: "date",
165
  width: 150,
166
  valueFormatter: (params) => {
167
    return params.value ? new Date(params.value).toLocaleDateString() : "";
168
  },
169
};
170

171
// Boolean columns with custom rendering
172
const booleanColumn: ColDef = {
173
  field: "isPublished",
174
  headerName: "Published",
175
  type: "boolean",
176
  width: 100,
177
  renderCell: (params) => (
178
    <input
179
      type="checkbox"
180
      checked={params.value}
181
      disabled
182
    />
183
  ),
184
};
185
```
186

187
### Value Getters and Formatters
188

189
Functions for extracting and formatting cell values from row data.
190

191
```typescript { .api }
192
interface ValueGetterParams {
193
  /** Row ID */
194
  id: RowId;
195
  /** Column field name */
196
  field: string;
197
  /** Complete row data object */
198
  row: RowData;
199
  /** Column definition */
200
  colDef: ColDef;
201
  /** Grid API reference */
202
  api: GridApi;
203
}
204

205
interface ValueFormatterParams {
206
  /** Raw cell value */
207
  value: CellValue;
208
  /** Row ID */
209
  id: RowId;
210
  /** Column field name */
211
  field: string;
212
  /** Complete row data object */
213
  row: RowData;
214
  /** Column definition */
215
  colDef: ColDef;
216
  /** Grid API reference */
217
  api: GridApi;
218
}
219

220
type CellValue = string | number | boolean | Date | null | undefined | object;
221
```
222

223
**Usage Examples:**
224

225
```typescript
226
// Value getter - compute values from multiple fields
227
const computedColumn: ColDef = {
228
  field: "fullName",
229
  headerName: "Full Name",
230
  width: 200,
231
  valueGetter: (params: ValueGetterParams) => {
232
    const { firstName, lastName } = params.row;
233
    return `${firstName || ""} ${lastName || ""}`.trim();
234
  },
235
};
236

237
// Value formatter - format raw values for display
238
const currencyColumn: ColDef = {
239
  field: "amount",
240
  headerName: "Amount",
241
  type: "number",
242
  valueFormatter: (params: ValueFormatterParams) => {
243
    if (params.value == null) return "";
244
    return new Intl.NumberFormat("en-US", {
245
      style: "currency",
246
      currency: "USD",
247
    }).format(params.value);
248
  },
249
};
250

251
// Combined getter and formatter
252
const statusColumn: ColDef = {
253
  field: "status",
254
  headerName: "Status",
255
  width: 120,
256
  valueGetter: (params: ValueGetterParams) => {
257
    // Compute status from multiple fields
258
    const { isActive, lastLogin } = params.row;
259
    if (!isActive) return "inactive";
260
    
261
    const daysSinceLogin = (Date.now() - new Date(lastLogin).getTime()) / (1000 * 60 * 60 * 24);
262
    return daysSinceLogin > 30 ? "stale" : "active";
263
  },
264
  valueFormatter: (params: ValueFormatterParams) => {
265
    return params.value?.toString().toUpperCase();
266
  },
267
};
268
```
269

270
### Custom Cell Rendering
271

272
React components for custom cell content and interactions.
273

274
```typescript { .api }
275
interface CellParams {
276
  /** The HTMLElement that triggered the event */
277
  element?: HTMLElement;
278
  /** The column field of the cell that triggered the event */
279
  field: string;
280
  /** The cell value */
281
  value: CellValue;
282
  /** A function that lets you get data from other columns */
283
  getValue: (field: string) => CellValue;
284
  /** The full set of data of the row that the current cell belongs to */
285
  data: RowData;
286
  /** The row model of the row that the current cell belongs to */
287
  rowModel: RowModel;
288
  /** The column of the row that the current cell belongs to */
289
  colDef: any;
290
  /** The row index of the row that the current cell belongs to */
291
  rowIndex: number;
292
  /** ApiRef that lets you manipulate the grid */
293
  api: any;
294
}
295

296
type RenderCellFunction = (params: CellParams) => React.ReactElement;
297
```
298

299
**Usage Examples:**
300

301
```typescript
302
import React from "react";
303
import { Button, Chip } from "@material-ui/core";
304

305
// Button cell renderer
306
const actionColumn: ColDef = {
307
  field: "actions",
308
  headerName: "Actions",
309
  width: 150,
310
  sortable: false,
311
  renderCell: (params: CellParams) => (
312
    <Button
313
      variant="contained"
314
      color="primary"
315
      size="small"
316
      onClick={() => {
317
        console.log("Edit row:", params.row);
318
      }}
319
    >
320
      Edit
321
    </Button>
322
  ),
323
};
324

325
// Status chip renderer
326
const statusColumn: ColDef = {
327
  field: "status",
328
  headerName: "Status",
329
  width: 120,
330
  renderCell: (params: CellParams) => {
331
    const getColor = (status: string) => {
332
      switch (status) {
333
        case "active": return "primary";
334
        case "pending": return "default";
335
        case "inactive": return "secondary";
336
        default: return "default";
337
      }
338
    };
339

340
    return (
341
      <Chip
342
        label={params.value}
343
        color={getColor(params.value as string)}
344
        size="small"
345
      />
346
    );
347
  },
348
};
349

350
// Image cell renderer
351
const avatarColumn: ColDef = {
352
  field: "avatar",
353
  headerName: "Avatar",
354
  width: 80,
355
  sortable: false,
356
  renderCell: (params: CellParams) => (
357
    <img
358
      src={params.value}
359
      alt={`Avatar for ${params.row.name}`}
360
      style={{
361
        width: 40,
362
        height: 40,
363
        borderRadius: "50%",
364
        objectFit: "cover",
365
      }}
366
    />
367
  ),
368
};
369
```
370

371
### Custom Header Rendering
372

373
React components for custom column header content.
374

375
```typescript { .api }
376
interface ColParams {
377
  /** Column field name */
378
  field: string;
379
  /** Column definition */
380
  colDef: ColDef;
381
  /** Grid API reference */
382
  api: GridApi;
383
}
384

385
type RenderHeaderFunction = (params: ColParams) => React.ReactElement;
386
```
387

388
**Usage Examples:**
389

390
```typescript
391
import React from "react";
392
import { IconButton, Tooltip } from "@material-ui/core";
393
import { InfoIcon } from "@material-ui/icons";
394

395
// Header with tooltip
396
const tooltipHeaderColumn: ColDef = {
397
  field: "complexData",
398
  headerName: "Complex Data",
399
  width: 150,
400
  renderHeader: (params: ColParams) => (
401
    <div style={{ display: "flex", alignItems: "center" }}>
402
      <span>{params.colDef.headerName}</span>
403
      <Tooltip title="This column contains complex calculated data">
404
        <IconButton size="small">
405
          <InfoIcon fontSize="small" />
406
        </IconButton>
407
      </Tooltip>
408
    </div>
409
  ),
410
};
411

412
// Header with custom styling
413
const styledHeaderColumn: ColDef = {
414
  field: "priority",
415
  headerName: "Priority",
416
  width: 100,
417
  renderHeader: (params: ColParams) => (
418
    <div style={{
419
      fontWeight: "bold",
420
      color: "#ff6b35",
421
      textTransform: "uppercase",
422
    }}>
423
      {params.colDef.headerName}
424
    </div>
425
  ),
426
};
427
```
428

429
### Column Styling
430

431
CSS class application and dynamic styling for columns and cells.
432

433
```typescript { .api }
434
type CellClassNamePropType = string | string[] | ((params: CellParams) => string | string[]);
435

436
interface CellClassRules {
437
  [className: string]: (params: CellParams) => boolean;
438
}
439
```
440

441
**Usage Examples:**
442

443
```typescript
444
// Static cell class names
445
const styledColumn: ColDef = {
446
  field: "amount",
447
  headerName: "Amount",
448
  cellClassName: "currency-cell",
449
  headerClassName: ["header-bold", "header-right-align"],
450
};
451

452
// Dynamic cell class names
453
const conditionalStyleColumn: ColDef = {
454
  field: "status",
455
  headerName: "Status",
456
  cellClassName: (params: CellParams) => {
457
    return params.value === "active" ? "status-active" : "status-inactive";
458
  },
459
};
460

461
// Cell class rules
462
const ruleBasedColumn: ColDef = {
463
  field: "score",
464
  headerName: "Score",
465
  type: "number",
466
  cellClassRules: {
467
    "score-high": (params) => params.value > 80,
468
    "score-medium": (params) => params.value >= 50 && params.value <= 80,
469
    "score-low": (params) => params.value < 50,
470
  },
471
};
472
```