[DataGrid] Throw if rows id is missing

packages/grid/_modules_/grid/hooks/root/useRows.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  createRow,
+  createRowModel,
   GridOptions,
   RowData,
   RowId,
@@ -30,7 +30,7 @@ export const useRows = (
   apiRef: ApiRef,
 ): RowModel[] => {
   const logger = useLogger('useRows');
-  const rowModels = React.useMemo(() => rows.map((r) => createRow(r)), [rows]);
+  const rowModels = React.useMemo(() => rows.map((r, idx) => createRowModel(r, idx)), [rows]);
   const [rowModelsState, setRowModelsState] = React.useState<RowModel[]>(rowModels);
   const [, forceUpdate] = React.useState();
   const [rafUpdate] = useRafUpdate(() => forceUpdate((p: any) => !p));
@@ -119,14 +119,18 @@ export const useRows = (
 
       // we removes duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
       const uniqUpdates = updates.reduce((uniq, update) => {
+        if (update.id == null) {
+          throw new Error('Material-UI: Missing row Id in row data update.');
+        }
+
         uniq[update.id] = uniq[update.id] != null ? { ...uniq[update.id], ...update } : update;
         return uniq;
       }, {} as { [id: string]: any });
 
       const rowModelUpdates = Object.values<RowData>(uniqUpdates).map((partialRow) => {
         const oldRow = getRowFromId(partialRow.id!);
         if (!oldRow) {
-          return createRow(partialRow);
+          return createRowModel(partialRow, partialRow.id!);
         }
         return { ...oldRow, data: { ...oldRow.data, ...partialRow } };
       });

packages/grid/_modules_/grid/models/rows.ts

@@ -44,9 +44,9 @@ export interface RowModel {
  * @param rowData Row as [[RowData]].
  * @returns A row as [[RowModel]].
  */
-export function createRow(rowData: RowData): RowModel {
+export function createRowModel(rowData: RowData, index: RowId): RowModel {
   const row: RowModel = {
-    id: rowData.id,
+    id: rowData.id == null ? index : rowData.id,
     data: rowData,
     selected: false,
   };

packages/storybook/src/stories/grid-sorting.stories.tsx

@@ -248,6 +248,18 @@ export const SortingWithFormatter = () => {
     </div>
   );
 };
+export const SortingNoId = () => {
+  const columns = [...getColumns()];
+  columns.shift();
+  columns[0] = { ...columns[0], sortDirection: 'asc' };
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={getRows()} columns={columns} />
+    </div>
+  );
+};
+
 export const SortModelOptionsMultiple = () => {
   const sortModel: SortModel = React.useMemo(
     () => [