[data grid] Show detail panel on onRowClick

[dennisobel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently MUI DataGridPro only supports showing details when a specific column is clicked on. Is it possible to have getDetailPanelContent fired onRowClick especially on mobile views where we don't have much realestate.

Examples 🌈

No response

Motivation 🔦

I would like to save on space on mobile view by making it possible to click on row rather than on specific column to display details.

[cherniavskii]

Hey @dennisobel
You can toggle the detail panel on row click using apiRef:

const onRowClick = React.useCallback<GridEventListener<"rowClick">>(
  (params) => {
    apiRef.current.toggleDetailPanel(params.id);
  },
  [apiRef]
);

<DataGridPro
  onRowClick={onRowClick}
/>

Here's a demo: https://codesandbox.io/s/patient-leaf-vz5vqr?file=/demo.tsx

[cherniavskii]

We can add a recipe with this demo to the docs

[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.

Note

@dennisobel 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.