[DataGrid] Throw if rows id is missing (#349)

* remove the need for a row id

* fix prettier

* Rename createRow to createRowModel

* throw error when row has no id

* fix error message and added test

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) => createRowModel(r)), [rows]);
   const [rowModelsState, setRowModelsState] = React.useState<RowModel[]>(rowModels);
   const [, forceUpdate] = React.useState();
   const [rafUpdate] = useRafUpdate(() => forceUpdate((p: any) => !p));
@@ -119,14 +119,24 @@ 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: The data grid component requires all rows to have a unique id property.',
+              'A row was provided without when calling updateRowData():',
+              JSON.stringify(update),
+            ].join('\n'),
+          );
+        }
+
         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);
         }
         return { ...oldRow, data: { ...oldRow.data, ...partialRow } };
       });

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

@@ -0,0 +1,15 @@
+import { createRowModel, RowData } from '../rows';
+
+describe('Row: createRowModel', () => {
+  it('should have an id', () => {
+    const row = {
+      name: 'damien',
+    };
+    const expectedError = [
+      'Material-UI: The data grid component requires all rows to have a unique id property.',
+      'A row was provided without in the rows prop:',
+      JSON.stringify(row),
+    ].join('\n');
+    expect(() => createRowModel(<RowData>(<unknown>row))).toThrow(expectedError);
+  });
+});

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

@@ -44,7 +44,17 @@ export interface RowModel {
  * @param rowData Row as [[RowData]].
  * @returns A row as [[RowModel]].
  */
-export function createRow(rowData: RowData): RowModel {
+export function createRowModel(rowData: RowData): RowModel {
+  if (rowData.id == null) {
+    throw new Error(
+      [
+        'Material-UI: The data grid component requires all rows to have a unique id property.',
+        'A row was provided without in the rows prop:',
+        JSON.stringify(rowData),
+      ].join('\n'),
+    );
+  }
+
   const row: RowModel = {
     id: rowData.id,
     data: rowData,

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

@@ -248,6 +248,7 @@ export const SortingWithFormatter = () => {
     </div>
   );
 };
+
 export const SortModelOptionsMultiple = () => {
   const sortModel: SortModel = React.useMemo(
     () => [