Row displaying aggregates. How to hide row actions in aggregates row?

[AnastasiaEvgenia]

Order ID or Support key 💳 (optional)

67465

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Hi,

While using the data grid with a row displaying aggregation results and with an actions column, the action buttons are also being displayed in the aggregation row. I found a way to hide them by using renderCell in the actions column and checking the rowNode.id property, but I am not sure if this the most efficient way. Is there any other way to achieve this or in general to display actions on a row parametrically while using the getActions property?

I have attached a zip, with a grid that I managed to hide the actions and one with the original implementation. There is also a screenshot with the wanted and wrong behavior.

Thank you. gridExample.zip

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. CHROME Output from `npx @mui/envinfo` goes here. System: OS: Windows 10 10.0.19045 Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.57) npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.112 @mui/core-downloads-tracker: 5.11.2 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/lab: ^5.0.0-alpha.114 => 5.0.0-alpha.114 @mui/material: ^5.11.2 => 5.11.2 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.2 @mui/types: 7.2.3 @mui/utils: 5.11.2 @types/react: 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.6 => 5.3.6 ```

[cherniavskii]

Hi @AnastasiaEvgenia You can check the row id in getActions:

getActions: (params) => {
  if (params.id === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID) {
    return [];
  }

  return [<GridActionsCellItem label="Delete" showInMenu />]
}

Working demo: https://codesandbox.io/s/priceless-swanson-ftvrko?file=/demo.tsx

[cherniavskii]

Keeping this issue open so we can cover this in the docs

[AnastasiaEvgenia]

Thank you for your reply and the Demo! I will try your solution too. Just out of curiosity. Wouldn't it be preferable if the row displaying the aggregates, did not display actions by default?

[blakewatkin-purple]

This feels like a bug in functionality to be honest - the aggregation row also renders any column with a custom renderCell function in the column definition, ignoring whether an aggregation has been applied or even if the field is aggregable. As default, I would expect the aggregate row to only render columns that have been provided in the aggregation model.

Currently, anywhere I have a custom render function in a column + an aggregate row, it has to be manually omitted:

...
      renderCell: params =>
        params.id === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID ? null : (
          <MyCustomComponent />
        ),
...

[jdavidferreira]

This is my solution:

import { GRID_ID_AUTOGENERATED } from '@mui/x-data-grid/internals'

function isFooterRow(row: GridValidRowModel): boolean {
  const footerRowSymbol = Object.getOwnPropertySymbols(row).find(
    (symbol) => symbol.description === GRID_ID_AUTOGENERATED.description,
  )

  return !!footerRowSymbol && row[footerRowSymbol] === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID
}

// value formatter for the grid column definition
const valueFormatter: GridValueFormatter = (value, row) => {
  if (isFooterRow(row) && value == null) {
    return null
  }

  return valueFormatter(value)
}

MUI DataGrid v7

[peluprvi]

The isAutogeneratedRow might help. https://mui.com/x/react-data-grid/column-definition/#autogenerated-rows

{
  field: 'title',
  valueGetter: (value, row) => {
    if (isAutogeneratedRow(row)) {
      return '[this is an autogenerated row]';
    }
    return `title: ${value}`;
  },
}