0
# DataGrid Component
1

2
The DataGrid component is the main React component that renders a data grid with Material-UI styling. It provides the community edition functionality with some limitations compared to the full x-grid package.
3

4
## Capabilities
5

6
### DataGrid Component
7

8
Main React component for rendering data grids with restricted community features.
9

10
```typescript { .api }
11
/**
12
 * Community edition data grid component with Material-UI integration
13
 * Supports up to 100 rows per page with single column sorting and single row selection
14
 */
15
declare const DataGrid: React.ForwardRefExoticComponent<
16
  DataGridProps & React.RefAttributes<HTMLDivElement>
17
>;
18

19
interface DataGridProps extends DataGridOptionsProp {
20
  /** Array of row data objects with required id field */
21
  rows: RowsProp;
22
  /** Array of column definition objects */
23
  columns: Columns;
24
  /** Custom component overrides for UI elements */
25
  components?: GridComponentOverridesProp;
26
  /** Boolean flag to show loading overlay */
27
  loading?: boolean;
28
  /** CSS class name to apply to root element */
29
  className?: string;
30
  /** Error object to display in error state */
31
  error?: any;
32
}
33

34
type DataGridOptionsProp = Partial<
35
  Exclude<GridOptions, 'pagination' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection'>
36
>;
37

38
type RowsProp = RowData[];
39
type Columns = ColDef[];
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import React from "react";
46
import { DataGrid } from "@material-ui/data-grid";
47

48
// Basic usage
49
function BasicGrid() {
50
  const columns = [
51
    { field: "id", headerName: "ID", width: 90 },
52
    { field: "name", headerName: "Name", width: 150 },
53
    { field: "age", headerName: "Age", type: "number", width: 110 },
54
  ];
55

56
  const rows = [
57
    { id: 1, name: "Alice", age: 25 },
58
    { id: 2, name: "Bob", age: 30 },
59
  ];
60

61
  return (
62
    <div style={{ height: 400, width: "100%" }}>
63
      <DataGrid rows={rows} columns={columns} />
64
    </div>
65
  );
66
}
67

68
// With pagination and selection
69
function AdvancedGrid() {
70
  const [pageSize, setPageSize] = React.useState(25);
71
  
72
  return (
73
    <div style={{ height: 600, width: "100%" }}>
74
      <DataGrid
75
        rows={rows}
76
        columns={columns}
77
        pageSize={pageSize}
78
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
79
        rowsPerPageOptions={[25, 50, 100]}
80
        checkboxSelection
81
        onSelectionChange={(params) => {
82
          console.log("Selected rows:", params.selectionModel);
83
        }}
84
      />
85
    </div>
86
  );
87
}
88

89
// With loading state
90
function LoadingGrid() {
91
  const [loading, setLoading] = React.useState(true);
92
  const [rows, setRows] = React.useState([]);
93

94
  React.useEffect(() => {
95
    // Simulate data fetching
96
    setTimeout(() => {
97
      setRows([
98
        { id: 1, name: "Alice", age: 25 },
99
        { id: 2, name: "Bob", age: 30 },
100
      ]);
101
      setLoading(false);
102
    }, 2000);
103
  }, []);
104

105
  return (
106
    <div style={{ height: 400, width: "100%" }}>
107
      <DataGrid
108
        rows={rows}
109
        columns={columns}
110
        loading={loading}
111
      />
112
    </div>
113
  );
114
}
115
```
116

117
### Community Edition Restrictions
118

119
The DataGrid component has several built-in restrictions compared to the full x-grid package:
120

121
```typescript { .api }
122
// These options are automatically set and cannot be overridden
123
const OPTIONS_OVERRIDES: Partial<GridOptions> = {
124
  /** Pagination is always enabled */
125
  pagination: true,
126
  /** Only single column sorting allowed */
127
  disableMultipleColumnsSorting: true,
128
  /** Only single row selection allowed */
129
  disableMultipleSelection: true,
130
};
131

132
// Maximum page size validation
133
const MAX_PAGE_SIZE = 100;
134
```
135

136
**Usage Notes:**
137

138
- Maximum page size is limited to 100 rows
139
- Multiple column sorting is disabled
140
- Multiple row selection is disabled  
141
- Pagination is always enabled
142
- Attempting to set pageSize > 100 will throw an error
143

144
### Component Forwarding
145

146
The DataGrid component forwards refs to the underlying HTML div element:
147

148
```typescript { .api }
149
/**
150
 * Forward ref type for DataGrid component
151
 * Provides access to the root HTML div element
152
 */
153
type DataGridRef = HTMLDivElement;
154
```
155

156
**Usage Example:**
157

158
```typescript
159
import React from "react";
160
import { DataGrid } from "@material-ui/data-grid";
161

162
function GridWithRef() {
163
  const gridRef = React.useRef<HTMLDivElement>(null);
164

165
  const focusGrid = () => {
166
    if (gridRef.current) {
167
      gridRef.current.focus();
168
    }
169
  };
170

171
  return (
172
    <div>
173
      <button onClick={focusGrid}>Focus Grid</button>
174
      <div style={{ height: 400, width: "100%" }}>
175
        <DataGrid
176
          ref={gridRef}
177
          rows={rows}
178
          columns={columns}
179
        />
180
      </div>
181
    </div>
182
  );
183
}
184
```
185

186
### Error Handling
187

188
The DataGrid component supports error states through the error prop:
189

190
```typescript { .api }
191
interface DataGridProps {
192
  /** Error object to display in error state */
193
  error?: any;
194
}
195
```
196

197
**Usage Example:**
198

199
```typescript
200
function GridWithErrorHandling() {
201
  const [error, setError] = React.useState(null);
202
  const [rows, setRows] = React.useState([]);
203

204
  const fetchData = async () => {
205
    try {
206
      const response = await fetch("/api/data");
207
      const data = await response.json();
208
      setRows(data);
209
      setError(null);
210
    } catch (err) {
211
      setError(err);
212
    }
213
  };
214

215
  return (
216
    <div style={{ height: 400, width: "100%" }}>
217
      <DataGrid
218
        rows={rows}
219
        columns={columns}
220
        error={error}
221
        onError={(args) => {
222
          console.error("Grid error:", args);
223
          setError(args);
224
        }}
225
      />
226
    </div>
227
  );
228
}
229
```