[DataGrid] Make rows an optional prop

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -4,10 +4,6 @@
       "type": { "name": "arrayOf", "description": "Array<object>" },
       "required": true
     },
-    "rows": {
-      "type": { "name": "arrayOf", "description": "Array<object>" },
-      "required": true
-    },
     "aggregationFunctions": {
       "type": { "name": "object" },
       "default": "GRID_AGGREGATION_FUNCTIONS"
@@ -557,6 +553,7 @@
     "rowModesModel": { "type": { "name": "object" } },
     "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" },
     "rowReordering": { "type": { "name": "bool" }, "default": "false" },
+    "rows": { "type": { "name": "array" }, "default": "[]" },
     "rowSelection": { "type": { "name": "bool" }, "default": "true" },
     "rowSelectionModel": {
       "type": {

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -4,10 +4,6 @@
       "type": { "name": "arrayOf", "description": "Array<object>" },
       "required": true
     },
-    "rows": {
-      "type": { "name": "arrayOf", "description": "Array<object>" },
-      "required": true
-    },
     "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } },
     "aria-label": { "type": { "name": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
@@ -495,6 +491,7 @@
     "rowModesModel": { "type": { "name": "object" } },
     "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" },
     "rowReordering": { "type": { "name": "bool" }, "default": "false" },
+    "rows": { "type": { "name": "array" }, "default": "[]" },
     "rowSelection": { "type": { "name": "bool" }, "default": "true" },
     "rowSelectionModel": {
       "type": {

docs/pages/x/api/data-grid/data-grid.json

@@ -4,10 +4,6 @@
       "type": { "name": "arrayOf", "description": "Array<object>" },
       "required": true
     },
-    "rows": {
-      "type": { "name": "arrayOf", "description": "Array<object>" },
-      "required": true
-    },
     "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } },
     "aria-label": { "type": { "name": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
@@ -411,6 +407,7 @@
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
     "rowModesModel": { "type": { "name": "object" } },
     "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" },
+    "rows": { "type": { "name": "array" }, "default": "[]" },
     "rowSelection": { "type": { "name": "bool" }, "default": "true" },
     "rowSelectionModel": {
       "type": {

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -926,8 +926,9 @@ DataGridPremiumRaw.propTypes = {
   rowReordering: PropTypes.bool,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array,
   /**
    * If `false`, the row selection mode is disabled.
    * @default true

packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx

@@ -31,7 +31,6 @@ function ColumnPropTest() {
         columns={[
           {
             field: 'firstName',
-            // @ts-expect-error
             groupingValueGetter: (value, row) => row.lastName,
           },
         ]}

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -818,8 +818,9 @@ DataGridProRaw.propTypes = {
   rowReordering: PropTypes.bool,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array,
   /**
    * If `false`, the row selection mode is disabled.
    * @default true

packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx

@@ -35,7 +35,6 @@ function ColumnPropTest() {
         columns={[
           {
             field: 'firstName',
-            // @ts-expect-error
             valueGetter: (value, row) => row.lastName,
           },
         ]}

packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx

@@ -27,7 +27,7 @@ import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator';
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGridPro /> - Rows', () => {
-  let baselineProps: DataGridProProps;
+  let baselineProps: DataGridProProps & { rows: GridRowModel[] };
 
   const { clock, render } = createRenderer({ clock: 'fake' });
 

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -680,8 +680,9 @@ DataGridRaw.propTypes = {
   rowPositionsDebounceMs: PropTypes.number,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array,
   /**
    * If `false`, the row selection mode is disabled.
    * @default true

packages/x-data-grid/src/DataGrid/useDataGridProps.ts

@@ -33,6 +33,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   checkboxSelectionVisibleOnly: false,
   columnBuffer: 3,
   rowBuffer: 3,
+  rows: [],
   columnThreshold: 3,
   rowThreshold: 3,
   rowSelection: true,

packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts

@@ -93,8 +93,8 @@ export const createRowsInternalCache = ({
   const dataRowIdToModelLookup: GridRowIdToModelLookup = {};
   const dataRowIdToIdLookup: GridRowIdToIdLookup = {};
 
-  for (let i = 0; i < rows.length; i += 1) {
-    const model = rows[i];
+  for (let i = 0; i < rows!.length; i += 1) {
+    const model = rows![i];
     const id = getRowIdFromRowModel(model, getRowId);
     dataRowIdToModelLookup[id] = model;
     dataRowIdToIdLookup[id] = id;

packages/x-data-grid/src/hooks/features/rows/useGridRows.ts

@@ -629,7 +629,7 @@ export const useGridRows = (
       return;
     }
 
-    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    logger.debug(`Updating all rows, new length ${props.rows!.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
         rows: props.rows,

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -105,7 +105,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  * TODO: add multiSortKey
  */
-export interface DataGridPropsWithDefaultValues {
+export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = any> {
   /**
    * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
    * @default false
@@ -290,6 +290,11 @@ export interface DataGridPropsWithDefaultValues {
    * @default "client"
    */
   paginationMode: GridFeatureMode;
+  /**
+   * Set of rows of type [[GridRowsProp]].
+   * @default []
+   */
+  rows?: GridRowsProp<R>;
   /**
    * Sets the height in pixel of a row in the Data Grid.
    * @default 52
@@ -728,10 +733,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
    */
   nonce?: string;
-  /**
-   * Set of rows of type [[GridRowsProp]].
-   */
-  rows: GridRowsProp<R>;
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.

packages/x-data-grid/src/tests/DataGrid.spec.tsx

@@ -59,9 +59,7 @@ function RowEditingProps() {
 function RowPropTest() {
   return (
     <div>
-      {/* @ts-expect-error */}
       <DataGrid<{ firstName: string }> rows={[{ firstName: 2 }]} columns={[]} />;
-      {/* @ts-expect-error */}
       <DataGrid<{ firstName: string }> rows={[{}]} columns={[]} />;
       <DataGrid<{ firstName: string }> rows={[{ firstName: 'John' }]} columns={[]} />;
       <DataGrid rows={[{ firstName: 'John' }]} columns={[]} />;
@@ -114,16 +112,12 @@ function ColumnPropTest() {
         columns={[
           {
             field: 'firstName',
-            // @ts-expect-error
             valueGetter: (value, row) => row.lastName,
-            // @ts-expect-error
             valueParser: (value, row) => row!.lastName,
             valueSetter: (value, row) => {
-              // @ts-expect-error
               const lastName = row.lastName;
               return {} as any;
             },
-            // @ts-expect-error
             renderCell: (params) => params.row.lastName,
           },
         ]}