diff --git a/docs/data/data-grid/master-detail/master-detail.md b/docs/data/data-grid/master-detail/master-detail.md
index 679a57852f155..0af556b2bd039 100644
--- a/docs/data/data-grid/master-detail/master-detail.md
+++ b/docs/data/data-grid/master-detail/master-detail.md
@@ -135,6 +135,31 @@ This approach can also be used to change the location of the toggle column, as s
As any ordinary cell renderer, the `value` prop is also available, and it corresponds to the state of the row: `true` when expanded and `false` when collapsed.
:::
+## Custom header for detail panel column
+
+To render a custom header for the detail panel column, use the [`renderHeader`](/x/react-data-grid/column-header/#custom-header-renderer) property in the column definition.
+This property receives a `GridRenderHeaderParams` object that contains `colDef` (the column definition) and `field`.
+The following example demonstrates how to render a custom header for the detail panel column:
+
+```tsx
+const columns = [
+ {
+ ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
+ renderHeader: (params) => (
+
+ {params.colDef.headerName}
+
+
+ ),
+ },
+ //... other columns
+];
+```
+
+:::info
+For a more advanced example check out the [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels) recipe.
+:::
+
## Disable detail panel content scroll
By default, the detail panel has a width that is the sum of the widths of all columns.
@@ -153,6 +178,7 @@ Notice that the toggle column is pinned to make sure that it will always be visi
More examples of how to customize the detail panel:
- [One expanded detail panel at a time](/x/react-data-grid/row-recipes/#one-expanded-detail-panel-at-a-time)
+- [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels)
## apiRef
diff --git a/docs/data/data-grid/row-recipes/DetailPanelCollapseAll.tsx.preview b/docs/data/data-grid/row-recipes/DetailPanelCollapseAll.tsx.preview
new file mode 100644
index 0000000000000..d89161b50e8d3
--- /dev/null
+++ b/docs/data/data-grid/row-recipes/DetailPanelCollapseAll.tsx.preview
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.js b/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.js
new file mode 100644
index 0000000000000..cd48306cf1ba8
--- /dev/null
+++ b/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.js
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import {
+ DataGridPro,
+ useGridApiContext,
+ useGridSelector,
+ gridRowsLookupSelector,
+ gridDetailPanelExpandedRowIdsSelector,
+ gridDetailPanelExpandedRowsContentCacheSelector,
+ GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
+} from '@mui/x-data-grid-pro';
+import {
+ randomCreatedDate,
+ randomCurrency,
+ randomEmail,
+ randomPrice,
+} from '@mui/x-data-grid-generator';
+
+export default function DetailPanelExpandCollapseAll() {
+ const getDetailPanelContent = React.useCallback(
+ ({ row }) => {`Order #${row.id}`},
+ [],
+ );
+
+ const getDetailPanelHeight = React.useCallback(() => 50, []);
+
+ return (
+