[data grid] Column definition undefined value

[oliviertassinari]

Steps to reproduce

Link to live example:

import * as React from "react";
import { DataGridPro } from "@mui/x-data-grid-pro";

export default function HeaderFilteringDataGridPro() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPro
        columns={[
          {
            field: "actions",
            headerName: "Actions",
            type: "actions",
            width: 80,
            filterOperators: undefined, // <- the issue is here
            getActions: (params) => [<>action</>],
          },
        ]}
        headerFilters
      />
    </div>
  );
}

https://codesandbox.io/p/sandbox/wispy-paper-mfjzqs?file=%2Fsrc%2FDemo.tsx%3A1%2C1-23%2C1

Current behavior

It crashes

filterOperators: undefined overrides the default values of the column type. It likely does the same with a bunch of other properties.

Expected behavior

It can be solved in two different ways. TypeScript flags filterOperators: undefined, as invalid. It's this issue: microsoft/TypeScript#13195 and this Stack Overflow question: https://stackoverflow.com/questions/67840542/object-with-optional-keys-but-with-a-mandatory-value-in-typescript. It can be enabled with https://www.typescriptlang.org/tsconfig/#exactOptionalPropertyTypes, but I suspect most projects are not using it, e.g. TypeScript maintainers consider it too much of a pain to have it in strict: microsoft/TypeScript#44421 (comment). So our only option seems to be ⬇️

Or the grid sets the default value for undefined values, like components do e.g.

function test(props) {
  const {
    open = true,
  } = props;
  console.log(open);
}
test({ open : true });
test({ open : false });
test({ open : null });
test({ open : undefined });

diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
index cd3c0d8d4..e9b3185cf 100644
--- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
+++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import resolveProps from '@mui/utils/resolveProps';
 import {
   GridColumnLookup,
   GridColumnsState,
@@ -379,11 +380,12 @@ export const createColumnsState = ({
       }
     });

-    columnsState.lookup[field] = {
-      ...existingState,
-      ...newColumn,
-      hasBeenResized,
-    };
+    columnsState.lookup[field] = resolveProps(existingState, { ...newColumn, hasBeenResized });
   });

Context

I saw this in https://mui.zendesk.com/agent/tickets/19977.

Your environment

"@mui/x-data-grid-pro": "7.15.0",

Search keywords: -

[michelengelen]

Thanks for opening a PR @sai6855 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.