diff --git a/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.js b/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.js
new file mode 100644
index 0000000000000..fcb6a9e4e9977
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.js
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import Box from '@mui/material/Box';
+import Badge from '@mui/material/Badge';
+import {
+ getDataGridUtilityClass,
+ useGridSelector,
+ useGridRootProps,
+} from '@mui/x-data-grid-pro';
+import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { useGridSelectorV8, createSelectorV8 } from '@mui/x-data-grid/internals';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export const gridDataSourceStateSelector = (state) => state.dataSource;
+
+export const gridDataSourceLoadingIdSelector = createSelectorV8(
+ gridDataSourceStateSelector,
+ (dataSource, id) => dataSource.loading[id] ?? false,
+);
+
+export const gridDataSourceErrorSelector = createSelectorV8(
+ gridDataSourceStateSelector,
+ (dataSource, id) => dataSource.errors[id],
+);
+
+const useUtilityClasses = (ownerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['treeDataGroupingCell'],
+ toggle: ['treeDataGroupingCellToggle'],
+ loadingContainer: ['treeDataGroupingCellLoadingContainer'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridTreeDataGroupingCellIcon(props) {
+ const apiRef = useGridPrivateApiContext();
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ const { rowNode, id, field, descendantCount, row, nestedLevelRef } = props;
+
+ const isDataLoading = useGridSelectorV8(
+ apiRef,
+ gridDataSourceLoadingIdSelector,
+ id,
+ );
+ const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
+
+ const expanded = rowNode.childrenExpanded || row.expanded;
+
+ const handleClick = (event) => {
+ if (!expanded) {
+ props.setExpandedRows((prev) => [
+ ...prev,
+ {
+ ...row,
+ groupingKey: rowNode.groupingKey,
+ expanded: true,
+ depth: nestedLevelRef.current,
+ },
+ ]);
+ if (apiRef.current.state.pagination.paginationModel.page > 0) {
+ apiRef.current.setPage(0);
+ }
+ } else if (row.expanded) {
+ props.setExpandedRows((prev) => {
+ const index = prev.findIndex((r) => r.id === id);
+ return prev.slice(0, index);
+ });
+ if (apiRef.current.state.pagination.paginationModel.page > 0) {
+ apiRef.current.setPage(0);
+ }
+ } else {
+ apiRef.current.setRowChildrenExpansion(id, !expanded);
+ }
+ apiRef.current.setCellFocus(id, field);
+ event.stopPropagation(); // TODO remove event.stopPropagation
+ };
+
+ const Icon = expanded
+ ? rootProps.slots.treeDataCollapseIcon
+ : rootProps.slots.treeDataExpandIcon;
+
+ if (isDataLoading) {
+ return (
+
+
+
+ );
+ }
+ return descendantCount > 0 ? (
+
+
+
+
+
+
+
+ ) : null;
+}
+
+export function NestedPaginationGroupingCell(props) {
+ const {
+ id,
+ field,
+ formattedValue,
+ rowNode,
+ hideDescendantCount,
+ offsetMultiplier = 2,
+ setExpandedRows,
+ nestedLevelRef,
+ } = props;
+
+ const rootProps = useGridRootProps();
+ const apiRef = useGridPrivateApiContext();
+ const rowSelector = (state) => state.rows.dataRowIdToModelLookup[id];
+ const row = useGridSelector(apiRef, rowSelector);
+ const classes = useUtilityClasses(rootProps);
+
+ let descendantCount = 0;
+ if (row) {
+ descendantCount = Math.max(
+ rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0,
+ 0,
+ );
+ }
+
+ let depth = row.depth ? row.depth : rowNode.depth;
+ if (!row.expanded && nestedLevelRef.current > 0) {
+ depth = nestedLevelRef.current;
+ }
+
+ return (
+
+
+
+
+
+ {formattedValue === undefined
+ ? (rowNode.groupingKey ?? row.groupingKey)
+ : formattedValue}
+ {!hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : ''}
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.tsx b/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.tsx
new file mode 100644
index 0000000000000..a1f68a3b81e3b
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.tsx
@@ -0,0 +1,199 @@
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import Box from '@mui/material/Box';
+import Badge from '@mui/material/Badge';
+import {
+ getDataGridUtilityClass,
+ GridRenderCellParams,
+ GridDataSourceGroupNode,
+ useGridSelector,
+ useGridRootProps,
+ DataGridProProcessedProps,
+ GridPrivateApiPro,
+ GridStatePro,
+} from '@mui/x-data-grid-pro';
+import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { useGridSelectorV8, createSelectorV8 } from '@mui/x-data-grid/internals';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export const gridDataSourceStateSelector = (state: GridStatePro) => state.dataSource;
+
+export const gridDataSourceLoadingIdSelector = createSelectorV8(
+ gridDataSourceStateSelector,
+ (dataSource, id: GridRowId) => dataSource.loading[id] ?? false,
+);
+
+export const gridDataSourceErrorSelector = createSelectorV8(
+ gridDataSourceStateSelector,
+ (dataSource, id: GridRowId) => dataSource.errors[id],
+);
+
+type OwnerState = DataGridProProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['treeDataGroupingCell'],
+ toggle: ['treeDataGroupingCellToggle'],
+ loadingContainer: ['treeDataGroupingCellLoadingContainer'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+interface GridTreeDataGroupingCellProps
+ extends GridRenderCellParams {
+ hideDescendantCount?: boolean;
+ /**
+ * The cell offset multiplier used for calculating cell offset (`rowNode.depth * offsetMultiplier` px).
+ * @default 2
+ */
+ offsetMultiplier?: number;
+}
+
+interface GridTreeDataGroupingCellIconProps
+ extends Pick {
+ descendantCount: number;
+}
+
+function GridTreeDataGroupingCellIcon(
+ props: GridTreeDataGroupingCellIconProps & {
+ setExpandedRows: (rows: GridValidRowModel[]) => void;
+ nestedLevelRef: React.RefObject;
+ },
+) {
+ const apiRef =
+ useGridPrivateApiContext() as React.MutableRefObject;
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ const { rowNode, id, field, descendantCount, row, nestedLevelRef } = props;
+
+ const isDataLoading = useGridSelectorV8(
+ apiRef,
+ gridDataSourceLoadingIdSelector,
+ id,
+ );
+ const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
+
+ const expanded = rowNode.childrenExpanded || row.expanded;
+
+ const handleClick = (event: React.MouseEvent) => {
+ if (!expanded) {
+ props.setExpandedRows((prev) => [
+ ...prev,
+ {
+ ...row,
+ groupingKey: rowNode.groupingKey,
+ expanded: true,
+ depth: nestedLevelRef.current,
+ },
+ ]);
+ if (apiRef.current.state.pagination.paginationModel.page > 0) {
+ apiRef.current.setPage(0);
+ }
+ } else if (row.expanded) {
+ props.setExpandedRows((prev) => {
+ const index = prev.findIndex((r) => r.id === id);
+ return prev.slice(0, index);
+ });
+ if (apiRef.current.state.pagination.paginationModel.page > 0) {
+ apiRef.current.setPage(0);
+ }
+ } else {
+ apiRef.current.setRowChildrenExpansion(id, !expanded);
+ }
+ apiRef.current.setCellFocus(id, field);
+ event.stopPropagation(); // TODO remove event.stopPropagation
+ };
+
+ const Icon = expanded
+ ? rootProps.slots.treeDataCollapseIcon
+ : rootProps.slots.treeDataExpandIcon;
+
+ if (isDataLoading) {
+ return (
+
+
+
+ );
+ }
+ return descendantCount > 0 ? (
+
+
+
+
+
+
+
+ ) : null;
+}
+
+export function NestedPaginationGroupingCell(
+ props: GridTreeDataGroupingCellProps & {
+ setExpandedRows: (rows: GridValidRowModel[]) => void;
+ nestedLevelRef: React.RefObject;
+ },
+) {
+ const {
+ id,
+ field,
+ formattedValue,
+ rowNode,
+ hideDescendantCount,
+ offsetMultiplier = 2,
+ setExpandedRows,
+ nestedLevelRef,
+ } = props;
+
+ const rootProps = useGridRootProps();
+ const apiRef = useGridPrivateApiContext();
+ const rowSelector = (state: GridStatePro) => state.rows.dataRowIdToModelLookup[id];
+ const row = useGridSelector(apiRef, rowSelector);
+ const classes = useUtilityClasses(rootProps);
+
+ let descendantCount = 0;
+ if (row) {
+ descendantCount = Math.max(
+ rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0,
+ 0,
+ );
+ }
+
+ let depth = row.depth ? row.depth : rowNode.depth;
+ if (!row.expanded && nestedLevelRef.current > 0) {
+ depth = nestedLevelRef.current;
+ }
+
+ return (
+
+
+
+
+
+ {formattedValue === undefined
+ ? (rowNode.groupingKey ?? row.groupingKey)
+ : formattedValue}
+ {!hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : ''}
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataNestedPagination.js b/docs/data/data-grid/server-side-data/ServerSideTreeDataNestedPagination.js
new file mode 100644
index 0000000000000..9d8511f94d01b
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataNestedPagination.js
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef, GridToolbar } from '@mui/x-data-grid-pro';
+import Button from '@mui/material/Button';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import { NestedPaginationGroupingCell } from './NestedPaginationGroupingCell';
+
+const pageSizeOptions = [5, 10, 50];
+const dataSetOptions = {
+ dataSet: 'Employee',
+ rowLength: 1000,
+ treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 20 },
+};
+
+export default function ServerSideTreeDataNestedPagination() {
+ const apiRef = useGridApiRef();
+ const [expandedRows, setExpandedRows] = React.useState([]);
+ const nestedLevelRef = React.useRef(0);
+
+ React.useEffect(() => {
+ nestedLevelRef.current = expandedRows.length;
+ }, [expandedRows]);
+
+ const { fetchRows, columns, initialState } = useMockServer(
+ dataSetOptions,
+ {},
+ false,
+ true,
+ );
+
+ const renderGroupingCell = React.useCallback(
+ (params) => (
+
+ ),
+ [setExpandedRows],
+ );
+
+ const initialStateWithPagination = React.useMemo(
+ () => ({
+ ...initialState,
+ pagination: {
+ paginationModel: {
+ pageSize: 5,
+ },
+ rowCount: 0,
+ },
+ }),
+ [initialState],
+ );
+
+ const dataSource = React.useMemo(
+ () => ({
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(
+ expandedRows?.map((row) => row.groupingKey) ?? [],
+ ),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row[dataSetOptions.treeData.groupingField],
+ getChildrenCount: (row) => row.descendantCount,
+ }),
+ [fetchRows, expandedRows],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+