'auto'} getEstimatedRowHeight={() => 200} />
+```
+
+{{"demo": "ExpandableCells.js", "bg": "inline", "defaultCodeOpen": false}}
+
+:::warning
+When the height of a row is set to `"auto"`, the final height will follow exactly the content size and ignore the density.
+Add padding to the cells to increase the space between the content and the cell borders.
+
+```tsx
+
+```
+
+:::
+
+## Row density
+
+Give your users the option to change the default row density to match their preferencesβcompact, standard, or comfortable.
+Density is calculated based on the `rowHeight` and/or `headerHeight` props, when present.
+See [Density](https://mui.com/x/react-data-grid/accessibility/#density) for details.
+
+## Row spacing
+
+You can use the `getRowSpacing` prop to increase the spacing between rows.
+This prop is called with a [`GridRowSpacingParams`](/x/api/data-grid/grid-row-spacing-params/) object.
+
+```tsx
+const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
+ return {
+ top: params.isFirstVisible ? 0 : 5,
+ bottom: params.isLastVisible ? 0 : 5,
+ };
+}, []);
+```
+
+{{"demo": "RowMarginGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
+By default, setting `getRowSpacing` will change the `marginXXX` CSS properties of each row.
+To add a border instead, set `rowSpacingType` to `"border"` and customize the color and style.
+
+```tsx
+
+```
+
+:::info
+β Adding a bottom margin or border to rows that also have a [detail panel](/x/react-data-grid/master-detail/) is not recommended because the detail panel relies on the bottom margin to work.
+
+As an alternative, you can use the top spacing to define the space between rows.
+It's easier to always increase the next row spacing no matter if the detail panel is expanded or not, but you can use `gridDetailPanelExpandedRowIdsSelector` to apply a spacing depending on the open state.
+:::
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/data-grid/rows/RowOrderingGrid.js b/docs/data/data-grid/row-ordering/RowOrderingGrid.js
similarity index 100%
rename from docs/data/data-grid/rows/RowOrderingGrid.js
rename to docs/data/data-grid/row-ordering/RowOrderingGrid.js
diff --git a/docs/data/data-grid/rows/RowOrderingGrid.tsx b/docs/data/data-grid/row-ordering/RowOrderingGrid.tsx
similarity index 100%
rename from docs/data/data-grid/rows/RowOrderingGrid.tsx
rename to docs/data/data-grid/row-ordering/RowOrderingGrid.tsx
diff --git a/docs/data/data-grid/rows/RowOrderingGrid.tsx.preview b/docs/data/data-grid/row-ordering/RowOrderingGrid.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/RowOrderingGrid.tsx.preview
rename to docs/data/data-grid/row-ordering/RowOrderingGrid.tsx.preview
diff --git a/docs/data/data-grid/row-ordering/row-ordering.md b/docs/data/data-grid/row-ordering/row-ordering.md
new file mode 100644
index 000000000000..d5950d62bed9
--- /dev/null
+++ b/docs/data/data-grid/row-ordering/row-ordering.md
@@ -0,0 +1,100 @@
+---
+title: Data Grid - Row ordering
+---
+
+# Data grid - Row ordering [](https://mui.com/store/items/mui-x-pro/)
+
+Drag and drop your rows to reorder them.
+
+Row reordering lets users rearrange rows by dragging the special reordering cell.
+
+By default, row reordering is disabled.
+To enable it, you need to add the `rowReordering` prop.
+
+```tsx
+
+```
+
+{{"demo": "RowOrderingGrid.js", "disableAd": true, "bg": "inline"}}
+
+To capture changes in the order of the dragged row, you can pass a callback to the `onRowOrderChange` prop. This callback is called with a `GridRowOrderChangeParams` object.
+
+In addition, you can import the following events to customize the row reordering experience:
+
+- `rowDragStart`: emitted when dragging of a row starts.
+- `rowDragOver`: emitted when dragging a row over another row.
+- `rowDragEnd`: emitted when dragging of a row stops.
+
+## Customizing the reorder value
+
+By default, when you start dragging a row, the `id` is displayed in the draggable box.
+To change this, you can give a value to the `__reorder__` field for each row.
+
+```tsx
+const columns: GridColumns = [{ field: 'brand' }];
+
+const rows: GridRowsProp = [
+ { id: 0, brand: 'Nike', __reorder__: 'Nike' },
+ { id: 1, brand: 'Adidas', __reorder__: 'Adidas' },
+ { id: 2, brand: 'Puma', __reorder__: 'Puma' },
+];
+
+;
+```
+
+## Customizing the row reordering icon
+
+To change the icon used for the row reordering, you can provide a different component for the [icon slot](/x/react-data-grid/components/#icons) as follow:
+
+```tsx
+
+```
+
+Another way to customize is to add a column with `field: __reorder__` to your set of columns.
+That way, you can overwrite any of the properties from the `GRID_REORDER_COL_DEF` column.
+The grid will detect that there is already a reorder column defined and it will not add another one in the default position.
+If you only set the `field`, then it is up to you to configure the remaining options (e.g. disable the column menu, filtering, sorting).
+To start with our suggested configuration, spread `GRID_REORDER_COL_DEF` when defining the column.
+
+```tsx
+
+```
+
+This approach can also be used to change the location of the toggle column.
+
+:::warning
+For now, row reordering is disabled if sorting is applied to the grid.
+:::
+
+## Reordering rows with row grouping π§
+
+:::warning
+This feature isn't implemented yet. It's coming.
+
+π Upvote [issue #4821](https://github.com/mui/mui-x/issues/4821) if you want to see it land faster.
+:::
+
+## Reordering rows with tree data π§
+
+:::warning
+This feature isn't implemented yet. It's coming.
+
+π Upvote [issue #4821](https://github.com/mui/mui-x/issues/4821) if you want to see it land faster.
+:::
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/data-grid/rows/RowPinning.js b/docs/data/data-grid/row-pinning/RowPinning.js
similarity index 100%
rename from docs/data/data-grid/rows/RowPinning.js
rename to docs/data/data-grid/row-pinning/RowPinning.js
diff --git a/docs/data/data-grid/rows/RowPinning.tsx b/docs/data/data-grid/row-pinning/RowPinning.tsx
similarity index 100%
rename from docs/data/data-grid/rows/RowPinning.tsx
rename to docs/data/data-grid/row-pinning/RowPinning.tsx
diff --git a/docs/data/data-grid/rows/RowPinning.tsx.preview b/docs/data/data-grid/row-pinning/RowPinning.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/RowPinning.tsx.preview
rename to docs/data/data-grid/row-pinning/RowPinning.tsx.preview
diff --git a/docs/data/data-grid/rows/RowPinningWithActions.js b/docs/data/data-grid/row-pinning/RowPinningWithActions.js
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithActions.js
rename to docs/data/data-grid/row-pinning/RowPinningWithActions.js
diff --git a/docs/data/data-grid/rows/RowPinningWithActions.tsx b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithActions.tsx
rename to docs/data/data-grid/row-pinning/RowPinningWithActions.tsx
diff --git a/docs/data/data-grid/rows/RowPinningWithActions.tsx.preview b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithActions.tsx.preview
rename to docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview
diff --git a/docs/data/data-grid/rows/RowPinningWithPagination.js b/docs/data/data-grid/row-pinning/RowPinningWithPagination.js
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithPagination.js
rename to docs/data/data-grid/row-pinning/RowPinningWithPagination.js
diff --git a/docs/data/data-grid/rows/RowPinningWithPagination.tsx b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithPagination.tsx
rename to docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx
diff --git a/docs/data/data-grid/rows/RowPinningWithPagination.tsx.preview b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/RowPinningWithPagination.tsx.preview
rename to docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview
diff --git a/docs/data/data-grid/row-pinning/row-pinning.md b/docs/data/data-grid/row-pinning/row-pinning.md
new file mode 100644
index 000000000000..c41d79b90f4c
--- /dev/null
+++ b/docs/data/data-grid/row-pinning/row-pinning.md
@@ -0,0 +1,76 @@
+---
+title: Data Grid - Row pinning
+---
+
+# Data grid - Row pinning [](https://mui.com/store/items/mui-x-pro/)
+
+Pin rows to keep them visible at all times.
+
+Pinned (or frozen, locked or floating) rows are those visible at all times while the user scrolls the grid vertically.
+
+:::warning
+This feature is experimental, it needs to be explicitly activated using the `rowPinning` experimental feature flag.
+
+```tsx
+
+```
+
+:::
+
+You can pin rows at the top or bottom of the grid by passing pinned rows data through the `pinnedRows` prop:
+
+```tsx
+const pinnedRows: GridPinnedRowsProp = {
+ top: [{ id: 0, brand: 'Nike' }],
+ bottom: [
+ { id: 1, brand: 'Adidas' },
+ { id: 2, brand: 'Puma' },
+ ],
+};
+
+;
+```
+
+The data format for pinned rows is the same as for the `rows` prop (see [Feeding data](/x/react-data-grid/row-definition/#feeding-data)).
+
+Pinned rows data should also meet [Row identifier](/x/react-data-grid/row-definition/#row-identifier) requirements.
+
+{{"demo": "RowPinning.js", "disableAd": true, "bg": "inline"}}
+
+:::warning
+Just like the `rows` prop, `pinnedRows` prop should keep the same reference between two renders.
+Otherwise, the grid will re-apply heavy work like sorting and filtering.
+:::
+
+## Controlling pinned rows
+
+You can control which rows are pinned by changing `pinnedRows`.
+
+In the demo below we use `actions` column type to add buttons to pin a row either at the top or bottom and change `pinnedRows` prop dynamically.
+
+{{"demo": "RowPinningWithActions.js", "disableAd": true, "bg": "inline", "defaultCodeOpen": false}}
+
+## Usage with other features
+
+Pinned rows are not affected by sorting and filtering.
+
+Pagination does not impact pinned rows as well - they stay pinned regardless the page number or page size.
+
+{{"demo": "RowPinningWithPagination.js", "disableAd": true, "bg": "inline", "defaultCodeOpen": false}}
+
+:::info
+Pinned rows do not support the following features:
+
+- editing ([issue #5591](https://github.com/mui/mui-x/issues/5591))
+- selection
+- row grouping
+- tree data
+- row reordering
+- master detail
+ :::
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/data-grid/row-spanning/row-spanning.md b/docs/data/data-grid/row-spanning/row-spanning.md
new file mode 100644
index 000000000000..cf8aa37ace76
--- /dev/null
+++ b/docs/data/data-grid/row-spanning/row-spanning.md
@@ -0,0 +1,23 @@
+---
+title: Data Grid - Row spanning
+---
+
+# Data grid - Row spanning
+
+Span cells across several columns.
+
+:::warning
+This feature isn't implemented yet. It's coming.
+
+π Upvote [issue #207](https://github.com/mui/mui-x/issues/207) if you want to see it land faster.
+:::
+
+Each cell takes up the width of one row.
+Row spanning lets you change this default behavior, so cells can span multiple rows.
+This is very close to the "row spanning" in an HTML ``.
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.js b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.js
similarity index 100%
rename from docs/data/data-grid/rows/InfiniteLoadingGrid.js
rename to docs/data/data-grid/row-updates/InfiniteLoadingGrid.js
diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx
similarity index 100%
rename from docs/data/data-grid/rows/InfiniteLoadingGrid.tsx
rename to docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx
diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/InfiniteLoadingGrid.tsx.preview
rename to docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview
diff --git a/docs/data/data-grid/rows/ThrottledRowsGrid.js b/docs/data/data-grid/row-updates/ThrottledRowsGrid.js
similarity index 100%
rename from docs/data/data-grid/rows/ThrottledRowsGrid.js
rename to docs/data/data-grid/row-updates/ThrottledRowsGrid.js
diff --git a/docs/data/data-grid/rows/ThrottledRowsGrid.tsx b/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx
similarity index 100%
rename from docs/data/data-grid/rows/ThrottledRowsGrid.tsx
rename to docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx
diff --git a/docs/data/data-grid/rows/ThrottledRowsGrid.tsx.preview b/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx.preview
similarity index 100%
rename from docs/data/data-grid/rows/ThrottledRowsGrid.tsx.preview
rename to docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx.preview
diff --git a/docs/data/data-grid/rows/UpdateRowsApiRef.js b/docs/data/data-grid/row-updates/UpdateRowsApiRef.js
similarity index 100%
rename from docs/data/data-grid/rows/UpdateRowsApiRef.js
rename to docs/data/data-grid/row-updates/UpdateRowsApiRef.js
diff --git a/docs/data/data-grid/rows/UpdateRowsApiRef.tsx b/docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx
similarity index 100%
rename from docs/data/data-grid/rows/UpdateRowsApiRef.tsx
rename to docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx
diff --git a/docs/data/data-grid/rows/UpdateRowsProp.js b/docs/data/data-grid/row-updates/UpdateRowsProp.js
similarity index 100%
rename from docs/data/data-grid/rows/UpdateRowsProp.js
rename to docs/data/data-grid/row-updates/UpdateRowsProp.js
diff --git a/docs/data/data-grid/rows/UpdateRowsProp.tsx b/docs/data/data-grid/row-updates/UpdateRowsProp.tsx
similarity index 100%
rename from docs/data/data-grid/rows/UpdateRowsProp.tsx
rename to docs/data/data-grid/row-updates/UpdateRowsProp.tsx
diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md
new file mode 100644
index 000000000000..ad7a5e014435
--- /dev/null
+++ b/docs/data/data-grid/row-updates/row-updates.md
@@ -0,0 +1,56 @@
+---
+title: Data Grid - Row updates
+---
+
+# Data grid - Row updates
+
+Always keep your rows up to date.
+
+## The `rows` prop
+
+The simplest way to update the rows is to provide the new rows using the `rows` prop.
+It replaces the previous values. This approach has some drawbacks:
+
+- You need to provide all the rows.
+- You might create a performance bottleneck when preparing the rows array to provide to the grid.
+
+{{"demo": "UpdateRowsProp.js", "bg": "inline", "disableAd": true}}
+
+## The `updateRows` method [](https://mui.com/store/items/mui-x-pro/)
+
+If you want to only update part of the rows, you can use the `apiRef.current.updateRows` method.
+
+{{"demo": "UpdateRowsApiRef.js", "bg": "inline", "disableAd": true}}
+
+The default behavior of `updateRows` API is to upsert rows.
+So if a row has an id that is not in the current list of rows then it will be added to the grid.
+
+Alternatively, if you would like to delete a row, you would need to pass an extra `_action` property in the update object as below.
+
+```ts
+apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
+```
+
+## Infinite loading [](https://mui.com/store/items/mui-x-pro/)
+
+The grid provides a `onRowsScrollEnd` prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
+
+In addition, the area in which `onRowsScrollEnd` is called can be changed using `scrollEndThreshold`.
+
+{{"demo": "InfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}}
+
+## High frequency [](https://mui.com/store/items/mui-x-pro/)
+
+Whenever the rows are updated, the grid has to apply the sorting and filters. This can be a problem if you have high frequency updates. To maintain good performances, the grid allows to batch the updates and only apply them after a period of time. The `throttleRowsMs` prop can be used to define the frequency (in milliseconds) at which rows updates are applied.
+
+When receiving updates more frequently than this threshold, the grid will wait before updating the rows.
+
+The following demo updates the rows every 10ms, but they are only applied every 2 seconds.
+
+{{"demo": "ThrottledRowsGrid.js", "bg": "inline"}}
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/data-grid/rows/rows.md b/docs/data/data-grid/rows/rows.md
deleted file mode 100644
index ef9abd5bf801..000000000000
--- a/docs/data/data-grid/rows/rows.md
+++ /dev/null
@@ -1,364 +0,0 @@
----
-title: Data Grid - Rows
----
-
-# Data grid - Rows
-
-This section goes in details on the aspects of the rows you need to know.
-
-## Feeding data
-
-The rows can be defined with the `rows` prop, which expects an array of objects.
-
-:::warning
-The `rows` prop should keep the same reference between two renders except when you want to apply new rows.
-Otherwise, the grid will re-apply heavy work like sorting and filtering.
-:::
-
-{{"demo": "RowsGrid.js", "bg": "inline"}}
-
-## Row identifier
-
-Each row must have a unique identifier.
-
-This identifier is used internally to identify the row in the various modelsβfor instance, the row selection modelβand to track the row across updates.
-
-By default, the data grid looks for a property named `id` in the data set to get that identifier.
-
-If the row's identifier is not called `id`, then you need to use the `getRowId` prop to tell the grid where it's located.
-
-The following demo shows how to use `getRowId` to grab the unique identifier from a property named `internalId`:
-
-```tsx
- row.internalId} />
-```
-
-{{"demo": "RowsGridWithGetRowId.js", "bg": "inline", "defaultCodeOpen": false}}
-
-If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the grid.
-
-Note that it is not necessary to create a column to display the unique identifier data.
-The data grid pulls this information directly from the data set itself, not from anything that is displayed on the screen.
-
-:::warning
-Just like the `rows` prop, the `getRowId` prop should keep the same reference between two renders.
-Otherwise, the grid will re-apply heavy work like sorting and filtering.
-:::
-
-## Updating rows
-
-### The `rows` prop
-
-The simplest way to update the rows is to provide the new rows using the `rows` prop.
-It replaces the previous values. This approach has some drawbacks:
-
-- You need to provide all the rows.
-- You might create a performance bottleneck when preparing the rows array to provide to the grid.
-
-{{"demo": "UpdateRowsProp.js", "bg": "inline", "disableAd": true}}
-
-### The `updateRows` method [](https://mui.com/store/items/mui-x-pro/)
-
-If you want to only update part of the rows, you can use the `apiRef.current.updateRows` method.
-
-{{"demo": "UpdateRowsApiRef.js", "bg": "inline", "disableAd": true}}
-
-The default behavior of `updateRows` API is to upsert rows.
-So if a row has an id that is not in the current list of rows then it will be added to the grid.
-
-Alternatively, if you would like to delete a row, you would need to pass an extra `_action` property in the update object as below.
-
-```ts
-apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
-```
-
-### Infinite loading [](https://mui.com/store/items/mui-x-pro/)
-
-The grid provides a `onRowsScrollEnd` prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
-
-In addition, the area in which `onRowsScrollEnd` is called can be changed using `scrollEndThreshold`.
-
-{{"demo": "InfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}}
-
-### High frequency [](https://mui.com/store/items/mui-x-pro/)
-
-Whenever the rows are updated, the grid has to apply the sorting and filters. This can be a problem if you have high frequency updates. To maintain good performances, the grid allows to batch the updates and only apply them after a period of time. The `throttleRowsMs` prop can be used to define the frequency (in milliseconds) at which rows updates are applied.
-
-When receiving updates more frequently than this threshold, the grid will wait before updating the rows.
-
-The following demo updates the rows every 10ms, but they are only applied every 2 seconds.
-
-{{"demo": "ThrottledRowsGrid.js", "bg": "inline"}}
-
-## Row height
-
-By default, the rows have a height of 52 pixels.
-This matches the normal height in the [Material Design guidelines](https://material.io/components/data-tables).
-
-If you want to create a more / less compact grid and not only set the row height, take a look at our [Density documentation](/x/react-data-grid/accessibility/#density-selector)
-
-To change the row height for the whole grid, set the `rowHeight` prop:
-
-{{"demo": "DenseHeightGrid.js", "bg": "inline"}}
-
-### Variable row height
-
-If you need some rows to have different row heights this can be achieved using the `getRowHeight` prop. This function is called for each visible row and if the return value is a `number` then that `number` will be set as that row's `rowHeight`. If the return value is `null` or `undefined` then the `rowHeight` prop will take effect for the given row.
-
-{{"demo": "VariableRowHeightGrid.js", "bg": "inline"}}
-
-:::warning
-Changing the `DataGrid` density does not affect the rows with variable row height.
-You can access the density factor from the params provided to the `getRowHeight` prop
-:::
-
-:::warning
-Always memoize the function provided to `getRowHeight`.
-The grid bases on the referential value of these props to cache their values and optimize the rendering.
-:::
-
-```tsx
-const getRowHeight = React.useCallback(() => { ... }, []);
-
-
-```
-
-### Dynamic row height
-
-Instead of a fixed row height, you can let the grid calculate the height of each row based on its content.
-To do so, return `"auto"` on the function passed to the `getRowHeight` prop.
-
-```tsx
- 'auto'} />
-```
-
-The following demo shows this feature in action:
-
-{{"demo": "DynamicRowHeightGrid.js", "bg": "inline", "defaultCodeOpen": false}}
-
-The dynamic row height implementaion is based on a lazy approach, which means that the rows are measured as they are rendered.
-Because of this, you may see the size of the scrollbar thumb changing during scroll.
-This side effect happens because a row height estimation is used while a row is not rendered, then this value is replaced once the true measurement is obtained.
-You can configure the estimated value used by passing a function to the `getEstimatedRowHeight` prop.
-If not provided, the default row height of `52px` is used as estimation.
-It's recommended to pass this prop if the content deviates too much from the default value.
-Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time.
-
-```tsx
- 'auto'} getEstimatedRowHeight={() => 200} />
-```
-
-{{"demo": "ExpandableCells.js", "bg": "inline", "defaultCodeOpen": false}}
-
-:::warning
-When the height of a row is set to `"auto"`, the final height will follow exactly the content size and ignore the density.
-Add padding to the cells to increase the space between the content and the cell borders.
-
-```tsx
-
-```
-
-:::
-
-## Row spacing
-
-You can use the `getRowSpacing` prop to increase the spacing between rows.
-This prop is called with a [`GridRowSpacingParams`](/x/api/data-grid/grid-row-spacing-params/) object.
-
-```tsx
-const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
- return {
- top: params.isFirstVisible ? 0 : 5,
- bottom: params.isLastVisible ? 0 : 5,
- };
-}, []);
-```
-
-{{"demo": "RowMarginGrid.js", "bg": "inline", "defaultCodeOpen": false}}
-
-By default, setting `getRowSpacing` will change the `marginXXX` CSS properties of each row.
-To add a border instead, set `rowSpacingType` to `"border"` and customize the color and style.
-
-```tsx
-
-```
-
-:::info
-β Adding a bottom margin or border to rows that also have a [detail panel](/x/react-data-grid/master-detail/) is not recommended because the detail panel relies on the bottom margin to work.
-
-As an alternative, you can use the top spacing to define the space between rows.
-It's easier to always increase the next row spacing no matter if the detail panel is expanded or not, but you can use `gridDetailPanelExpandedRowIdsSelector` to apply a spacing depending on the open state.
-:::
-
-## Styling rows
-
-You can check the [styling rows](/x/react-data-grid/style/#styling-rows) section for more information.
-
-## Row reorder [](https://mui.com/store/items/mui-x-pro/)
-
-Row reordering allows to rearrange rows by dragging the special reordering cell.
-
-By default, row reordering is disabled.
-To enable it, you need to add the `rowReordering` prop.
-
-```tsx
-
-```
-
-{{"demo": "RowOrderingGrid.js", "disableAd": true, "bg": "inline"}}
-
-To capture changes in the order of the dragged row, you can pass a callback to the `onRowOrderChange` prop. This callback is called with a `GridRowOrderChangeParams` object.
-
-In addition, you can import the following events to customize the row reordering experience:
-
-- `rowDragStart`: emitted when dragging of a row starts.
-- `rowDragOver`: emitted when dragging a row over another row.
-- `rowDragEnd`: emitted when dragging of a row stops.
-
-### Customizing the reorder value
-
-By default, when you start dragging a row, the `id` is displayed in the draggable box.
-To change this, you can give a value to the `__reorder__` field for each row.
-
-```tsx
-const columns: GridColumns = [{ field: 'brand' }];
-
-const rows: GridRowsProp = [
- { id: 0, brand: 'Nike', __reorder__: 'Nike' },
- { id: 1, brand: 'Adidas', __reorder__: 'Adidas' },
- { id: 2, brand: 'Puma', __reorder__: 'Puma' },
-];
-
-;
-```
-
-### Customizing the row reordering icon
-
-To change the icon used for the row reordering, you can provide a different component for the [icon slot](/x/react-data-grid/components/#icons) as follow:
-
-```tsx
-
-```
-
-Another way to customize is to add a column with `field: __reorder__` to your set of columns.
-That way, you can overwrite any of the properties from the `GRID_REORDER_COL_DEF` column.
-The grid will detect that there is already a reorder column defined and it will not add another one in the default position.
-By only setting the `field`, is up to you to configure the remaining options (e.g. disable the column menu, filtering, sorting).
-To already start with a few suggested options configured, spread `GRID_REORDER_COL_DEF` when defining the column.
-
-```tsx
-
-```
-
-This approach can also be used to change the location of the toggle column.
-
-:::warning
-For now, row reordering is disabled if sorting is applied to the grid.
-
-In addition, if row grouping or tree data is being used, the row reordering is also disabled.
-:::
-
-## Row pinning [](https://mui.com/store/items/material-ui-pro/)
-
-Pinned (or frozen, locked or floating) rows are those visible at all times while the user scrolls the grid vertically.
-
-:::warning
-This feature is experimental, it needs to be explicitly activated using the `rowPinning` experimental feature flag.
-
-```tsx
-
-```
-
-:::
-
-You can pin rows at the top or bottom of the grid by passing pinned rows data through the `pinnedRows` prop:
-
-```tsx
-const pinnedRows: GridPinnedRowsProp = {
- top: [{ id: 0, brand: 'Nike' }],
- bottom: [
- { id: 1, brand: 'Adidas' },
- { id: 2, brand: 'Puma' },
- ],
-};
-
-;
-```
-
-The data format for pinned rows is the same as for the `rows` prop (see [Feeding data](/x/react-data-grid/rows/#feeding-data)).
-
-Pinned rows data should also meet [Row identifier](/x/react-data-grid/rows/#row-identifier) requirements.
-
-{{"demo": "RowPinning.js", "disableAd": true, "bg": "inline"}}
-
-:::warning
-Just like the `rows` prop, `pinnedRows` prop should keep the same reference between two renders.
-Otherwise, the grid will re-apply heavy work like sorting and filtering.
-:::
-
-### Controlling pinned rows
-
-You can control which rows are pinned by changing `pinnedRows`.
-
-In the demo below we use `actions` column type to add buttons to pin a row either at the top or bottom and change `pinnedRows` prop dynamically.
-
-{{"demo": "RowPinningWithActions.js", "disableAd": true, "bg": "inline", "defaultCodeOpen": false}}
-
-### Usage with other features
-
-Pinned rows are not affected by sorting and filtering.
-
-Pagination does not impact pinned rows as well - they stay pinned regardless the page number or page size.
-
-{{"demo": "RowPinningWithPagination.js", "disableAd": true, "bg": "inline", "defaultCodeOpen": false}}
-
-:::info
-Pinned rows do not support the following features:
-
-- editing ([issue #5591](https://github.com/mui/mui-x/issues/5591))
-- selection
-- row grouping
-- tree data
-- row reordering
-- master detail
- :::
-
-## π§ Row spanning
-
-:::warning
-This feature isn't implemented yet. It's coming.
-
-π Upvote [issue #207](https://github.com/mui/mui-x/issues/207) if you want to see it land faster.
-:::
-
-Each cell takes up the width of one row.
-Row spanning allows to change this default behavior.
-It allows cells to span multiple rows.
-This is very close to the "row spanning" in an HTML ``.
-
-## API
-
-- [DataGrid](/x/api/data-grid/data-grid/)
-- [DataGridPro](/x/api/data-grid/data-grid-pro/)
-- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 37020207bdd3..bd75b5919ccb 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -38,7 +38,19 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-data-grid/column-groups', title: 'Column groups π§' },
],
},
- { pathname: '/x/react-data-grid/rows' },
+ {
+ pathname: '/x/react-data-grid/rows',
+ scopePathnames: ['/x/react-data-grid/row-', '/x/react-data-grid/master-detail'],
+ children: [
+ { pathname: '/x/react-data-grid/row-definition' },
+ { pathname: '/x/react-data-grid/row-updates' },
+ { pathname: '/x/react-data-grid/row-height' },
+ { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-spanning', title: 'Row spanning π§' },
+ ],
+ },
{ pathname: '/x/react-data-grid/editing' },
{ pathname: '/x/react-data-grid/sorting' },
{ pathname: '/x/react-data-grid/filtering' },
@@ -57,14 +69,12 @@ const pages: MuiPage[] = [
scopePathnames: [
'/x/react-data-grid/row-grouping',
'/x/react-data-grid/tree-data',
- '/x/react-data-grid/master-detail',
'/x/react-data-grid/aggregation',
'/x/react-data-grid/pivoting',
],
children: [
{ pathname: '/x/react-data-grid/row-grouping', plan: 'premium' },
{ pathname: '/x/react-data-grid/tree-data', plan: 'pro' },
- { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
{ pathname: '/x/react-data-grid/aggregation', title: 'Aggregation', plan: 'premium' },
{ pathname: '/x/react-data-grid/pivoting', title: 'Pivoting π§', plan: 'premium' },
],
diff --git a/docs/pages/x/react-data-grid/row-definition.js b/docs/pages/x/react-data-grid/row-definition.js
new file mode 100644
index 000000000000..4a758c984f2c
--- /dev/null
+++ b/docs/pages/x/react-data-grid/row-definition.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-definition/row-definition.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/react-data-grid/rows.js b/docs/pages/x/react-data-grid/row-height.js
similarity index 66%
rename from docs/pages/x/react-data-grid/rows.js
rename to docs/pages/x/react-data-grid/row-height.js
index 9c68738d0fd7..374d9344636e 100644
--- a/docs/pages/x/react-data-grid/rows.js
+++ b/docs/pages/x/react-data-grid/row-height.js
@@ -1,6 +1,10 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from 'docsx/data/data-grid/rows/rows.md?@mui/markdown';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-height/row-height.md?@mui/markdown';
export default function Page() {
return ;
diff --git a/docs/pages/x/react-data-grid/row-ordering.js b/docs/pages/x/react-data-grid/row-ordering.js
new file mode 100644
index 000000000000..9861a974884c
--- /dev/null
+++ b/docs/pages/x/react-data-grid/row-ordering.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-ordering/row-ordering.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/react-data-grid/row-pinning.js b/docs/pages/x/react-data-grid/row-pinning.js
new file mode 100644
index 000000000000..cb277c841d8c
--- /dev/null
+++ b/docs/pages/x/react-data-grid/row-pinning.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-pinning/row-pinning.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/react-data-grid/row-spanning.js b/docs/pages/x/react-data-grid/row-spanning.js
new file mode 100644
index 000000000000..d60e9fe337d5
--- /dev/null
+++ b/docs/pages/x/react-data-grid/row-spanning.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-spanning/row-spanning.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/react-data-grid/row-updates.js b/docs/pages/x/react-data-grid/row-updates.js
new file mode 100644
index 000000000000..115cb8452c93
--- /dev/null
+++ b/docs/pages/x/react-data-grid/row-updates.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/data-grid/row-updates/row-updates.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/public/_redirects b/docs/public/_redirects
index c143b754f7d0..7b51ac7bf7cc 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -1,7 +1,9 @@
/ /x/introduction/ 301
# For links that we can't edit later on, e.g. hosted in the code published on npm or sent by email
+
# should all be prefixed with x-
+
/r/x-get-license scope=pro https://mui.com/store/items/mui-x-pro/ 302
/r/x-get-license scope=premium https://mui.com/store/items/mui-x-premium/ 302
/r/x-get-license https://mui.com/pricing/ 302
@@ -12,11 +14,13 @@
/r/x-issue-template https://codesandbox.io/s/mui-x-issue-template-qtf00h 302
# Legacy redirection
+
# 2021
/fr/* /:splat 200
/de/* /:splat 200
/ja/* /:splat 200
# 2022
+
/x/license/ https://mui.com/store/legal/mui-x-eula/ 301
/x/react-data-grid/group-pivot/ /x/react-data-grid/tree-data/ 301
/:lang/x/react-data-grid/group-pivot/ /:lang/x/react-data-grid/tree-data/ 301
@@ -24,6 +28,9 @@
/:lang/x/react-data-grid/columns/ /:lang/x/react-data-grid/column-definition/ 301
/x/advanced-components/ /x/introduction/ 301
/:lang/x/advanced-components/ /:lang/x/introduction/ 301
+/x/react-data-grid/rows/ /x/react-data-grid/row-definition/ 301
+/:lang/x/react-data-grid/rows/ /:lang/x/react-data-grid/row-definition/ 301
+
# 2023
# Proxies
@@ -623,7 +623,7 @@ _Apr 25, 2022_
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
-- π Introduce [Row reorder](https://mui.com/x/react-data-grid/rows/#row-reorder) (#4034) @DanailH
+- π Introduce [Row reorder](https://mui.com/x/react-data-grid/row-ordering/) (#4034) @DanailH
@@ -887,7 +887,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss