Data Grid Premium: Cannot read properties of null (reading 'type') at getCellAggregationResult

[jon-spover]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
Minimal reproduction: https://codesandbox.io/s/recursing-cherry-9zyyjn?file=/Demo.tsx

Steps:

1. Apply a rowGrouping, aggregation and filter to the initial state of a DataGridPremium
2. The filter and aggregation are declared on the same column ('gross' in the example)
3. The row grouping is declared on a separate column ('company')

Current behavior 😯

The browser throws an unhandled error: Cannot read properties of null (reading 'type') with the following stack trace:

 at getCellAggregationResult (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/hooks/features/aggregation/wrapColumnWithAggregation.js:127:17
    at eval (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/hooks/features/aggregation/wrapColumnWithAggregation.js:95:11
    at Object.fn (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/gridFilterUtils.js:101:16
filterItem4
unknown
    at isRowMatchingFilters (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/gridFilterUtils.js:222:103
    at filterTreeNode (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/hooks/features/rowGrouping/gridRowGroupingUtils.js:52:7
    at filterRowTreeFromGroupingColumns (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/hooks/features/rowGrouping/gridRowGroupingUtils.js:86:7
    at eval (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js:121:71
    at Object.eval [as applyStrategyProcessor] (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/core/strategyProcessing/useGridStrategyProcessing.js:54:12
    at eval (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/useGridFilter.js:66:46
    at Object.eval [as setState] (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/core/useGridStateInitialization.js:22:18
    at eval (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/useGridFilter.js:63:20
    at Object.eval [as unstable_applyFilters] (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/useGridFilter.js:87:5
    at eval (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/useGridFilter.js:320:20
    at useFirstRender (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/utils/useFirstRender.js:12:5
    at useGridFilter (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid/hooks/features/filter/useGridFilter.js:319:44
    at useDataGridPremiumComponent (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/DataGridPremium/useDataGridPremiumComponent.js:67:34
    at DataGridPremium (https://9zyyjn.csb.app/node_modules/
mui/x-data-grid-premium/DataGridPremium/DataGridPremium.js:24:72
renderWithHooks
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16305:18
updateForwardRef
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19226:20
beginWork
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21636:16
HTMLUnknownElement.callCallback
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4164:14
Object.invokeGuardedCallbackDev
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4277:31
beginWork$1
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27451:7
performUnitOfWork
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26557:12
workLoopSync
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26466:5
renderRootSync
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26434:7
recoverFromConcurrentError
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25850:20
performConcurrentWorkOnRoot
https://9zyyjn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25750:22
workLoop
https://9zyyjn.csb.app/node_modules/scheduler/cjs/scheduler.development.js:266:34
flushWork
https://9zyyjn.csb.app/node_modules/scheduler/cjs/scheduler.development.js:239:14
performWorkUntilDeadline
https://9zyyjn.csb.app/node_modules/scheduler/cjs/scheduler.development.js:533:21

Expected behavior 🤔

1. The filter should be applied first, removing any rows that do not meet the criteria.
2. The filtered rows should be grouped by the column in the rowGrouping
3. The aggregation should be applied on the filtered rows, and rolled up in the rowGrouping.

Context 🔦

Our rows are "deals", i.e. open sales for our SaaS customers.

We are trying to give our users the ability to see revenue for a group (i.e. Enterprise Deals) aggregated while also filtering out irrelevant deals. However when I try to use these 3 features in combination (filtering, grouping, aggregation) I see this error.

We are a MUI premium user and would appreciate getting this issue addressed as soon as possible as it has customer impact for our small startup and is blocking future product development.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Edge: Not Found
    Safari: 15.6.1
  npmPackages:
    @emotion/react: 11.10.5 => 11.10.5
    @emotion/styled: 11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.117
    @mui/core-downloads-tracker:  5.11.14
    @mui/icons-material: 5.11.0 => 5.11.0
    @mui/lab: 5.0.0-alpha.119 => 5.0.0-alpha.119
    @mui/material: 5.11.8 => 5.11.8
    @mui/private-theming:  5.11.13
    @mui/styled-engine:  5.11.11
    @mui/system: 5.11.8 => 5.11.8
    @mui/types:  7.2.3
    @mui/utils:  5.14.1
    @mui/x-data-grid:  6.10.2
    @mui/x-data-grid-premium: ^6.10.2 => 6.10.2
    @mui/x-data-grid-pro:  6.10.2
    @mui/x-date-pickers: 5.0.18 => 5.0.18
    @mui/x-license-pro: ^6.6.0 => 6.10.2
    @types/react: 18.0.27 => 18.0.27
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.8.4 => 4.8.4

Order ID or Support key 💳 (optional)

71131

[DanailH]

Hey, @jon-spover thanks for reporting this. I may have missed something but looking at the reproduction you have provided your filter model is not correct. Instead of key the object key required is field. If you change that then your filter will be applied correctly. You can check the updated reproduction here -> https://codesandbox.io/s/peaceful-bird-4p86cy

Regarding the error - I'm not seeing it in the example. Maybe you are using an older version?

[jon-spover]

Hi @DanailH thanks for looking into this and fixing the confounding bug in my minimal reproduction.

However, in your example I noticed the aggregation model is commented out. When I uncomment it (see fork here: https://codesandbox.io/s/long-snow-n4tphc), I again see the error: Cannot read properties of null (reading 'type') with the same stack trace. I've verified this sandbox is using the latest of all the packages in the @mui namespace.

It seems there is an issue when the following 3 criteria are present:

1. There is an aggregation and filter on the same column ("gross" in the example)
2. There is a rowGrouping declared on a different column ("company") in the example

[DanailH]

Ah ok, I see the issue now. It does look like a valid bug. It looks like even if you don't set the filterModel in the initial state but try and filter on the aggregated column it throws that error.

[jon-spover]

Yes I experimented with trying to add a controlled filter and grouping model in the DataGrid and still ran into the same bug. Thanks for looking into this and let me know if there's anything I can do to help resolve!

[romgrk]

Same as #9876, I'll keep that one, you can subscribe to that issue to follow.