[data grid] Using <Icon /> as a placeholder in GridColDef[] getActions

[woigl]

Steps to reproduce

I am using as a placeholder in GridColDef[] getActions -> GridActionsColDef.

It is working correctly, but it puts an error message onto the console, which, of course, I wanna prevent.

That is the error message I get in the console:

consoleObservable.ts:40 Warning: React does not recognize the touchRippleRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase touchrippleref instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is an extract of my code of the columns for my datagrid:

const columns: GridColDef[] = [
   {
      field: 'actions',
      type: 'actions',
      width: 100,
      cellClassName: 'actions',
      getActions: (params: GridRowParams<any>) => {
         return [
            <GridActionsCellItem
               icon={<PublishIcon />}
               label="Publish"
               color="primary"
            />,
            [<Icon />],
            <GridActionsCellItem
               icon={<DeleteIcon />}
               label="Delete"
               color="primary"
            />
         ];
      }
   }
];

I am doing something incorrect or what can I do to fix this issue?

Current behavior

No response

Expected behavior

No response

Context

I am using a plain component as a placeholder to align my icons better, as not all icons are shown in each row.

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.4.1 Binaries: Node: 20.11.0 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm pnpm: 9.0.2 - /usr/local/bin/pnpm Browsers: Chrome: 124.0.6367.61 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: ^11.11.0 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.11.16 => 5.15.15 @mui/lab: ^5.0.0-alpha.130 => 5.0.0-alpha.170 @mui/material: ^5.13.1 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^6.5.0 => 6.19.10 @mui/x-date-pickers: ^6.5.0 => 6.19.9 @types/react: ^18.2.6 => 18.2.78 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```

Search keywords: Icon Placeholder GridColDef GridActionsColDef

[michelengelen]

Hey @woigl ... That is because the Icon has no prop touchRippleRef and the GridActionsCell component will clone the elements with a set of predefined props:

https://github.com/mui/mui-x/blob/5899fbb311cc4c1bb953234687389740e835b493/packages/x-data-grid/src/components/cell/GridActionsCell.tsx#L197-L204

You can make this work without the errors if you just wrap the Icon:

const PlaceholderIcon = () => <DeleteIcon />;

[woigl]

@michelengelen thanks, for your feedback.

Your proposal will put a delete icon instead of an empty icon as a placeholder. Can you tell me how to place an empty icon there?

[michelengelen]

@michelengelen thanks, for your feedback.

Your proposal will put a delete icon instead of an empty icon as a placeholder. Can you tell me how to place an empty icon there?

Well for that you would need to add a custom icon there, or some other invisible that has the same dimensions as the icons.

const PlaceholderIcon = () => <Box sx={{ width: 30, height: 30 }} />;

[woigl]

@michelengelen Thanks, that solved my issue.

[github-actions[bot]]

:warning: 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.

@woigl: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.