Fix error when rendering empty grid (#872)

* Make sure we don't feed undefined to getObjectKey * tighten types a bit more
mui · Aug 31, 2022 · 59045bf · 59045bf
1 parent 43a7a01
commit 59045bf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/toolpad-components/src/DataGrid.tsx b/packages/toolpad-components/src/DataGrid.tsx
@@ -14,6 +14,7 @@ import {
   GridValueFormatterParams,
   GridColDef,
   GridValueGetterParams,
+  useGridApiRef,
 } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import { useNode, createComponent } from '@mui/toolpad-core';
@@ -292,24 +293,31 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
     [selection?.id],
   );
 
-  const columns: GridColumns = React.useMemo(() => parseColumns(columnsProp || []), [columnsProp]);
+  const columns: GridColumns = React.useMemo(
+    () => (columnsProp ? parseColumns(columnsProp) : []),
+    [columnsProp],
+  );
+
+  const apiRef = useGridApiRef();
+  React.useEffect(() => apiRef.current.updateColumns(columns), [apiRef, columns]);
 
-  // The grid doesn't react to changes to the column prop, so it needs to be remounted
-  // when that updates to reflect changes made in the editor.
-  const key = React.useMemo(
-    () => [rowIdFieldProp ?? '', getObjectKey(columnsProp)].join('::'),
-    [columnsProp, rowIdFieldProp],
+  // The grid doesn't update when the getRowId or columns properties change, so it needs to be remounted
+  // TODO: remove columns from this equation once https://github.com/mui/mui-x/issues/5970 gets resolved
+  const gridKey = React.useMemo(
+    () => [getObjectKey(getRowId), getObjectKey(columns)].join('::'),
+    [getRowId, columns],
   );
 
   return (
     <div ref={ref} style={{ height: heightProp, minHeight: '100%', width: '100%' }}>
       <DataGridPro
+        apiRef={apiRef}
         components={{ Toolbar: GridToolbar, LoadingOverlay: SkeletonLoadingOverlay }}
         onColumnResize={handleResize}
         onColumnOrderChange={handleColumnOrderChange}
         rows={rows}
         columns={columns}
-        key={key}
+        key={gridKey}
         getRowId={getRowId}
         onSelectionModelChange={onSelectionModelChange}
         selectionModel={selectionModel}

diff --git a/packages/toolpad-core/src/objectKey.ts b/packages/toolpad-core/src/objectKey.ts
@@ -1,6 +1,6 @@
 // TODO: Create a @mui/toolpad-utils package to house utilities like this one?
 
-const weakMap = new WeakMap<any, string>();
+const weakMap = new WeakMap<object, string>();
 let nextId = 0;
 
 function getNextId(): string {
@@ -12,7 +12,7 @@ function getNextId(): string {
 /**
  * Used to generate ids for object instances.
  */
-export function getObjectKey(object: any): string {
+export function getObjectKey(object: object): string {
   let id = weakMap.get(object);
   if (!id) {
     id = getNextId();