[DataGrid] Add recipe showing how to toggle detail panels on row click

docs/data/data-grid/master-detail/master-detail.md

@@ -189,6 +189,7 @@ 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)
+- [Toggling detail panels on row click](/x/react-data-grid/row-recipes/#toggling-detail-panels-on-row-click)
 
 ## apiRef
 

docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import {
+  randomCreatedDate,
+  randomPrice,
+  randomCurrency,
+  randomCountry,
+  randomCity,
+  randomEmail,
+  randomInt,
+  randomAddress,
+  randomCommodity,
+} from '@mui/x-data-grid-generator';
+
+function DetailPanelContent({ row: rowProp }) {
+  return (
+    <Stack
+      sx={{ py: 2, height: '100%', boxSizing: 'border-box' }}
+      direction="column"
+    >
+      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
+        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
+          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
+          <Grid container>
+            <Grid item md={6}>
+              <Typography variant="body2" color="textSecondary">
+                Customer information
+              </Typography>
+              <Typography variant="body1">{rowProp.customer}</Typography>
+              <Typography variant="body1">{rowProp.email}</Typography>
+            </Grid>
+            <Grid item md={6}>
+              <Typography variant="body2" align="right" color="textSecondary">
+                Shipping address
+              </Typography>
+              <Typography variant="body1" align="right">
+                {rowProp.address}
+              </Typography>
+              <Typography variant="body1" align="right">
+                {`${rowProp.city}, ${rowProp.country.label}`}
+              </Typography>
+            </Grid>
+          </Grid>
+          <DataGridPro
+            density="compact"
+            columns={[
+              { field: 'name', headerName: 'Product', flex: 1 },
+              {
+                field: 'quantity',
+                headerName: 'Quantity',
+                align: 'center',
+                type: 'number',
+              },
+              { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
+              {
+                field: 'total',
+                headerName: 'Total',
+                type: 'number',
+                valueGetter: (value, row) => row.quantity * row.unitPrice,
+              },
+            ]}
+            rows={rowProp.products}
+            sx={{ flex: 1 }}
+            hideFooter
+          />
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+}
+
+const columns = [
+  { field: 'id', headerName: 'Order ID' },
+  { field: 'customer', headerName: 'Customer', width: 200 },
+  { field: 'date', type: 'date', headerName: 'Placed at' },
+  { field: 'currency', headerName: 'Currency' },
+  {
+    field: 'total',
+    type: 'number',
+    headerName: 'Total',
+    valueGetter: (value, row) => {
+      const subtotal = row.products.reduce(
+        (acc, product) => product.unitPrice * product.quantity,
+        0,
+      );
+      const taxes = subtotal * 0.05;
+      return subtotal + taxes;
+    },
+  },
+];
+
+function generateProducts() {
+  const quantity = randomInt(1, 5);
+  return [...Array(quantity)].map((_, index) => ({
+    id: index,
+    name: randomCommodity(),
+    quantity: randomInt(1, 5),
+    unitPrice: randomPrice(1, 1000),
+  }));
+}
+
+const rows = [
+  {
+    id: 1,
+    customer: 'Matheus',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    address: randomAddress(),
+    country: randomCountry(),
+    city: randomCity(),
+    currency: randomCurrency(),
+    products: generateProducts(),
+  },
+  {
+    id: 2,
+    customer: 'Olivier',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    address: randomAddress(),
+    country: randomCountry(),
+    city: randomCity(),
+    currency: randomCurrency(),
+    products: generateProducts(),
+  },
+  {
+    id: 3,
+    customer: 'Flavien',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    address: randomAddress(),
+    country: randomCountry(),
+    city: randomCity(),
+    currency: randomCurrency(),
+    products: generateProducts(),
+  },
+  {
+    id: 4,
+    customer: 'Danail',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    address: randomAddress(),
+    country: randomCountry(),
+    city: randomCity(),
+    currency: randomCurrency(),
+    products: generateProducts(),
+  },
+  {
+    id: 5,
+    customer: 'Alexandre',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    address: randomAddress(),
+    country: randomCountry(),
+    city: randomCity(),
+    currency: randomCurrency(),
+    products: generateProducts(),
+  },
+];
+
+export default function DetailPanelExpandOnRowClick() {
+  const getDetailPanelContent = React.useCallback(
+    ({ row }) => <DetailPanelContent row={row} />,
+    [],
+  );
+
+  const getDetailPanelHeight = React.useCallback(() => 400, []);
+
+  const apiRef = useGridApiRef();
+
+  const onRowClick = React.useCallback(
+    (params) => {
+      apiRef.current.toggleDetailPanel(params.id);
+    },
+    [apiRef],
+  );
+
+  return (
+    <Box sx={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        apiRef={apiRef}
+        columns={columns}
+        onRowClick={onRowClick}
+        rows={rows}
+        getDetailPanelHeight={getDetailPanelHeight}
+        getDetailPanelContent={getDetailPanelContent}
+      />
+    </Box>
+  );
+}