Heatmap charts allow to highlight correlation between categories.
+
Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions.
:::warning
-The Heatmap Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7926) to see it arrive sooner.
-
-Don't hesitate to leave a comment there to influence what gets built.
-Especially if you already have a use case for this component, or if you're facing a pain point with your current solution.
+The Heatmap Chart component isn't stable. Don't hesitate to open issues to give feedback.
:::
+
+## Basics
+
+The Heatmap requires two axes with `data` properties.
+Those data defined the x and y categories.
+
+The series `data` is an array of 3-tuples.
+The 2 first numbers are respectively the x and y indexes of the cell.
+And the third is its value.
+
+{{"demo": "BasicHeatmap.js"}}
+
+## Customization
+
+### Color mapping
+
+To customize the color mapping, use the `zAxis` configuration.
+You can either use the piecewise or continuous [color mapping](https://mui.com/x/react-charts/styling/#values-color).
+
+{{"demo": "ColorConfig.js"}}
+
+### Highlight
+
+You can chose to highlight the hovered element by setting `highlightScope.highlight` to `'item'`.
+To fade the other item, set `highlightScope.fade` to `'global'`.
+
+{{"demo": "HighlightHeatmap.js"}}
+
+By default highlighted/faded effect is obtained by applying the CSS property `filter: saturate(...)` to cells.
+To modify this styling, use the `heatmapClasses.highlighted` and `heatmapClasses.faded` CSS classes to override the applied style.
+
+In the following demo, we replace the highlight saturation by a border radius and reduce the saturation of the faded cells.
+
+{{"demo": "HighlightClasses.js"}}
+
+### Axes
+
+The Heatmap axes can be customized like any other chart axis.
+The available options are available in the [dedicated page](/x/react-charts/axis/#axis-customization).
+
+### Tooltip π§
+
+## Legend π§
+
+## Labels π§
+
+## Custom item
+
+{{"demo": "CustomItem.js"}}
diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md
index 809be9b9a09c..ef86f4a0793f 100644
--- a/docs/data/charts/overview/overview.md
+++ b/docs/data/charts/overview/overview.md
@@ -9,7 +9,7 @@ packageName: '@mui/x-charts'
A fast and extendable library of react chart components for data visualization.
+ );
+}
diff --git a/docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx.preview b/docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx.preview
similarity index 100%
rename from docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx.preview
rename to docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx.preview
diff --git a/docs/data/data-grid/overlays/overlays.md b/docs/data/data-grid/overlays/overlays.md
new file mode 100644
index 000000000000..426e8b615b3e
--- /dev/null
+++ b/docs/data/data-grid/overlays/overlays.md
@@ -0,0 +1,91 @@
+# Data Grid - Overlays
+
+
The various data grid overlays.
+
+## Loading overlay
+
+To display a loading overlay and signify that the data grid is in a loading state, set the `loading` prop to `true`.
+
+The data grid supports 3 loading overlay variants out of the box:
+
+- `circular-progress` (default): a circular loading spinner.
+- `linear-progress`: an indeterminate linear progress bar.
+- `skeleton`: an animated placeholder of the data grid.
+
+The type of loading overlay to display can be set via `slotProps.loadingOverlay` for the following two props:
+
+- `variant`: when `loading` and there are rows in the table.
+- `noRowsVariant`: when `loading` and there are not any rows in the table.
+
+```tsx
+
+```
+
+### Circular progress
+
+A circular loading spinner, the default loading overlay.
+
+{{"demo": "LoadingOverlay.js", "bg": "inline"}}
+
+### Linear progress
+
+An indeterminate linear progress bar.
+
+{{"demo": "LoadingOverlayLinearProgress.js", "bg": "inline"}}
+
+### Skeleton
+
+An animated placeholder of the data grid.
+
+{{"demo": "LoadingOverlaySkeleton.js", "bg": "inline"}}
+
+### Custom component
+
+If you want to customize the no rows overlay, a component can be passed to the `loadingOverlay` slot.
+
+In the following demo, a labelled determinate [CircularProgress](/material-ui/react-progress/#circular-determinate) component is rendered in place of the default loading overlay, with some additional _Loading rowsβ¦_ text.
+
+{{"demo": "LoadingOverlayCustom.js", "bg": "inline"}}
+
+## No rows overlay
+
+The no rows overlay is displayed when the data grid has no rows.
+
+{{"demo": "NoRowsOverlay.js", "bg": "inline"}}
+
+### Custom component
+
+If you want to customize the no rows overlay, a component can be passed to the `noRowsOverlay` slot and rendered in place.
+
+In the following demo, an illustration is added on top of the default "No rows" message.
+
+{{"demo": "NoRowsOverlayCustom.js", "bg": "inline"}}
+
+## No results overlay
+
+The no results overlay is displayed when the data grid has no results after filtering.
+
+{{"demo": "NoResultsOverlay.js", "bg": "inline"}}
+
+### Custom component
+
+If you want to customize the no results overlay, a component can be passed to the `noResults` slot and rendered in place.
+
+In the following demo, an illustration is added on top of the default "No results found" message.
+
+{{"demo": "NoResultsOverlayCustom.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/overview/overview.md b/docs/data/data-grid/overview/overview.md
index d39a88beb8eb..cb859d0d35c9 100644
--- a/docs/data/data-grid/overview/overview.md
+++ b/docs/data/data-grid/overview/overview.md
@@ -12,7 +12,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
The Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating an unlimited set of data.
It features an intuitive API for real-time updates as well as theming and custom templatesβall with blazing-fast performance.
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "@mui/docs/ComponentLinkHeader"}}
## Overview
diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js
new file mode 100644
index 000000000000..837ea2546b6b
--- /dev/null
+++ b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ useGridApiRef,
+ useGridSelector,
+ useKeepGroupedColumnsHidden,
+ useGridApiContext,
+ gridFilteredDescendantRowCountSelector,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+import { Box } from '@mui/material';
+
+function CustomFooterRowCount(props) {
+ const { visibleRowCount: topLevelRowCount } = props;
+ const apiRef = useGridApiContext();
+ const descendantRowCount = useGridSelector(
+ apiRef,
+ gridFilteredDescendantRowCountSelector,
+ );
+
+ return (
+
+ {descendantRowCount} row{descendantRowCount > 1 ? 's' : ''} in{' '}
+ {topLevelRowCount} group
+ {topLevelRowCount > 1 ? 's' : ''}
+
+ );
+}
+
+export default function RowGroupingChildRowCount() {
+ const data = useMovieData();
+ const apiRef = useGridApiRef();
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company'],
+ },
+ },
+ });
+
+ return (
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/index.md b/docs/data/data-grid/server-side-data/index.md
index a626f60d7c3c..38a003c98581 100644
--- a/docs/data/data-grid/server-side-data/index.md
+++ b/docs/data/data-grid/server-side-data/index.md
@@ -2,23 +2,19 @@
title: React Data Grid - Server-side data
---
-# Data Grid - Server-side data π§
+# Data Grid - Server-side data [](/x/introduction/licensing/#pro-plan 'Pro plan')
The data grid server-side data.
-## Overview
+## Introduction
-Managing server-side data efficiently in a React application can become complex as the dataset grows.
+Server-side data management in React can become complex with growing datasets.
+Challenges include manual data fetching, pagination, sorting, filtering, and performance optimization.
+A dedicated module can help abstract these complexities, improving user experience.
-Without a dedicated module that abstracts its complexities, developers often face challenges related to manual data fetching, pagination, sorting, and filtering, and it often gets trickier to tackle performance issues, which can lead to a poor user experience.
-
-Have a look at an example:
-
-### Example scenario
-
-Imagine having a data grid that displays a list of users. The data grid has pagination enabled and the user can sort the data by clicking on the column headers and also apply filters.
-
-The data grid is configured to fetch data from the server whenever the user changes the page or updates filtering or sorting.
+Consider a Data Grid displaying a list of users.
+It supports pagination, sorting by column headers, and filtering.
+The Data Grid fetches data from the server when the user changes the page or updates filtering or sorting.
```tsx
const [rows, setRows] = React.useState([]);
@@ -72,51 +68,51 @@ Trying to solve these problems one after the other can make the code complex and
## Data source
-A very common pattern to solve these problems is to use a centralized data source. A data source is an abstraction layer that sits between the data grid and the server. It provides a simple interface to the data grid to fetch data and update it. It handles a lot of the complexities related to server-side data fetching. Let's delve a bit deeper into how it will look like.
+The idea for a centralized data source is to simplify server-side data fetching.
+It's an abstraction layer between the Data Grid and the server, providing a simple interface for interacting with the server.
+Think of it like a middleman handling the communication between the Data Grid (client) and the actual data source (server).
:::warning
-This feature is still under development and the information shared on this page is subject to change. Feel free to subscribe or comment on the official GitHub [issue](https://github.com/mui/mui-x/issues/8179).
+This feature is under development and is marked as **unstable**.
+The information shared on this page could change in future.
+Feel free to subscribe or comment on the official GitHub [umbrella issue](https://github.com/mui/mui-x/issues/8179).
:::
-### Overview
-
-The Data Grid already supports manual server-side data fetching for features like sorting, filtering, etc. In order to make it more powerful and simple to use, the grid will support a data source interface that you can implement with your existing data fetching logic.
-
-The datasource will work with all the major data grid features which require server-side data fetching such as sorting, filtering, pagination, grouping, etc.
+It has an initial set of required methods that you need to implement. The data grid will use these methods internally to fetch a sub-set of data when needed.
-### Usage
-
-The data grid server-side data source has an initial set of required methods that you need to implement. The data grid will call these methods internally when the data is required for a specific page.
+Let's take a look at the minimal `GridDataSource` interface configuration.
```tsx
-interface DataSource {
+interface GridDataSource {
/**
- Fetcher Functions:
- - `getRows` is required
- - `updateRow` is optional
-
- `getRows` will be used by the grid to fetch data for the current page or children for the current parent group
- It may return a `rowCount` to update the total count of rows in the grid
- */
- getRows(params: GetRowsParams): Promise;
- updateRow?(updatedRow: GridRowModel): Promise;
+ * This method will be called when the grid needs to fetch some rows
+ * @param {GridGetRowsParams} params The parameters required to fetch the rows
+ * @returns {Promise} A promise that resolves to the data of type [GridGetRowsResponse]
+ */
+ getRows(params: GridGetRowsParams): Promise;
}
```
-Here's how the code will look like for the above example when implemented with data source:
+:::info
+
+The above interface is a minimal configuration required for a data source to work.
+More specific properties like `getChildrenCount` and `getGroupKey` will be discussed in the corresponding sections.
+
+:::
+
+Here's how the above mentioned example would look like when implemented with the data source:
```tsx
-const customDataSource: DataSource = {
- getRows: async (params: GetRowsParams): GetRowsResponse => {
- // fetch data from server
+const customDataSource: GridDataSource = {
+ getRows: async (params: GridGetRowsParams): GetRowsResponse => {
const response = await fetch('https://my-api.com/data', {
method: 'GET',
body: JSON.stringify(params),
});
const data = await response.json();
- // return the data and the total number of rows
+
return {
rows: data.rows,
rowCount: data.totalCount,
@@ -126,161 +122,145 @@ const customDataSource: DataSource = {
```
-Not only the code has been reduced significantly, it has removed the hassle of managing controlled states and data fetching logic too.
+The code has been significantly reduced, the need for managing the controlled states is removed, and data fetching logic is centralized.
-On top of that, the data source will also handle a lot of other aspects like caching and deduping of requests.
+## Server-side filtering, sorting, and pagination
-#### Loading data
+The data source changes how the existing server-side features like `filtering`, `sorting`, and `pagination` work.
-The method `dataSource.getRows` will be called with the `GetRowsParams` object whenever some data from the server is needed. This object contains all the information that you need to fetch the data from the server.
+**Without data source**
-Since previously, the data grid did not support internal data fetching, the `rows` prop was the way to pass the data to the grid. However, with server-side data, the `rows` prop is no longer needed. Instead, the data grid will call the `getRows` method whenever it needs to fetch data.
-
-Here's the `GetRowsParams` object for reference:
+When there's no data source, the features `filtering`, `sorting`, `pagination` work on `client` by default.
+In order for them to work with server-side data, you need to set them to `server` explicitly and provide the [`onFilterModelChange`](https://mui.com/x/react-data-grid/filtering/server-side/), [`onSortModelChange`](https://mui.com/x/react-data-grid/sorting/#server-side-sorting), [`onPaginationModelChange`](https://mui.com/x/react-data-grid/pagination/#server-side-pagination) event handlers to fetch the data from the server based on the updated variables.
```tsx
-interface GetRowsParams {
- sortModel: GridSortModel;
- filterModel: GridFilterModel;
- /**
- * Alternate to `start` and `end`, maps to `GridPaginationModel` interface
- */
- paginationModel: GridPaginationModel;
- /**
- * First row index to fetch (number) or cursor information (number | string)
- */
- start: number | string; // first row index to fetch or cursor information
- /**
- * Last row index to fetch
- */
- end: number; // last row index to fetch
- /**
- * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
- * `getGroupKey` prop must be implemented to use this
- * Useful for `treeData` and `rowGrouping` only
- */
- groupKeys: string[];
- /**
- * List of grouped columns (only applicable with `rowGrouping`)
- */
- groupFields: GridColDef['field'][]; // list of grouped columns (`rowGrouping`)
-}
+ {
+ // fetch data from server
+ }}
+ onSortModelChange={(newSortModel) => {
+ // fetch data from server
+ }}
+ onFilterModelChange={(newFilterModel) => {
+ // fetch data from server
+ }}
+/>
```
-And here's the `GetRowsResponse` object for reference:
+**With data source**
+
+With the data source, the features `filtering`, `sorting`, `pagination` are automatically set to `server`.
+
+When the corresponding models update, the data grid calls the `getRows` method with the updated values of type `GridGetRowsParams` to get updated data.
```tsx
-interface GetRowsResponse {
- /**
- * Subset of the rows as per the passed `GetRowsParams`
- */
- rows: GridRowModel[];
- /**
- * To reflect updates in total `rowCount` (optional)
- * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront
- */
- rowCount?: number;
- /**
- * Additional `pageInfo` to help the grid determine if there are more rows to fetch (corner-cases)
- * `hasNextPage`: When row count is unknown/inaccurate, if `truncated` is set or rowCount is not known, data will keep loading until `hasNextPage` is `false`
- * `truncated`: To reflect `rowCount` is inaccurate (will trigger `x-y of many` in pagination after the count of rows fetched is greater than provided `rowCount`)
- * It could be useful with:
- * 1. Cursor based pagination:
- * When rowCount is not known, grid will check for `hasNextPage` to determine
- * if there are more rows to fetch.
- * 2. Inaccurate `rowCount`:
- * `truncated: true` will let the grid know that `rowCount` is estimated/truncated.
- * Thus `hasNextPage` will come into play to check more rows are available to fetch after the number becomes >= provided `rowCount`
- */
- pageInfo?: {
- hasNextPage?: boolean;
- truncated?: number;
- };
-}
+
```
-#### Updating data
+The following demo showcases this behavior.
-If provided, the method `dataSource.updateRow` will be called with the `GridRowModel` object whenever the user edits a row. This method is optional and you can skip it if you don't need to update the data on the server. It will work in a similar way as the `processRowUpdate` prop.
+{{"demo": "ServerSideDataGrid.js", "bg": "inline"}}
-#### Data Grid props
+:::info
+The data source demos use a utility function `useMockServer` to simulate the server-side data fetching.
+In a real-world scenario, you should replace this with your own server-side data fetching logic.
-These data grid props will work with the server-side data source:
+Open info section of the browser console to see the requests being made and the data being fetched in response.
+:::
-- `dataSource: DataSource`: the data source object that you need to implement
-- `rows`: will be ignored, could be skipped when `dataSource` is provided
-- `rowCount`: will be used to identify the total number of rows in the grid, if not provided, the grid will check for the _GetRowsResponse.rowCount_ value, unless the feature being used is infinite loading where no `rowCount` is available at all.
+## Data caching
-Props related to grouped data (`treeData` and `rowGrouping`):
+The data source caches fetched data by default.
+This means that if the user navigates to a page or expands a node that has already been fetched, the grid will not call the `getRows` function again to avoid unnecessary calls to the server.
-- `getGroupKey(row: GridRowModel): string`
+The `GridDataSourceCacheDefault` is used by default which is a simple in-memory cache that stores the data in a plain object. It could be seen in action in the demo below.
- will be used by the grid to group rows by their parent group
- This effectively replaces `getTreeDataPath`.
- Consider this structure:
+{{"demo": "ServerSideDataGrid.js", "bg": "inline"}}
- ```js
- - (1) Sarah // groupKey 'Sarah'
- - (2) Thomas // groupKey 'Thomas'
- ```
+### Customize the cache lifetime
- When (2) is expanded, the `getRows` function will be called with group keys `['Sarah', 'Thomas']`.
+The `GridDataSourceCacheDefault` has a default Time To Live (`ttl`) of 5 minutes. To customize it, pass the `ttl` option in milliseconds to the `GridDataSourceCacheDefault` constructor, and then pass it as the `unstable_dataSourceCache` prop.
-- `hasChildren?(row: GridRowModel): boolean`
+```tsx
+import { GridDataSourceCacheDefault } from '@mui/x-data-grid-pro';
- Will be used by the grid to determine if a row has children on server
+const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
-- `getChildrenCount?: (row: GridRowModel) => number`
+;
+```
+
+{{"demo": "ServerSideDataGridTTL.js", "bg": "inline"}}
+
+### Custom cache
- Will be used by the grid to determine the number of children of a row on server
+To provide a custom cache, use `unstable_dataSourceCache` prop, which could be either written from scratch or based out of another cache library.
+This prop accepts a generic interface of type `GridDataSourceCache`.
-#### Existing server-side features
+```tsx
+export interface GridDataSourceCache {
+ set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
+ get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
+ clear: () => void;
+}
+```
-The server-side data source will change a bit the way existing server-side features like `filtering`, `sorting`, and `pagination` work.
+### Disable cache
-**Without data source**:
-When there's no data source, the features `filtering`, `sorting`, `pagination` will work on `client` by default. In order for them to work with server-side data, you need to set them to `server` explicitly and listen to the [`onFilterModelChange`](https://mui.com/x/react-data-grid/filtering/server-side/), [`onSortModelChange`](https://mui.com/x/react-data-grid/sorting/#server-side-sorting), [`onPaginationModelChange`](https://mui.com/x/react-data-grid/pagination/#server-side-pagination) events to fetch the data from the server based on the updated variables.
+To disable the data source cache, pass `null` to the `unstable_dataSourceCache` prop.
```tsx
- {
- // fetch data from server
- }}
- onSortModelChange={(newSortModel) => {
- // fetch data from server
- }}
- onFilterModelChange={(newFilterModel) => {
- // fetch data from server
- }}
+ unstable_dataSource={customDataSource}
+ unstable_dataSourceCache={null}
/>
```
-**With data source**:
-However, with a valid data source passed the features `filtering`, `sorting`, `pagination` will automatically be set to `server`.
+{{"demo": "ServerSideDataGridNoCache.js", "bg": "inline"}}
-You just need to implement the `getRows` method and the data grid will call the `getRows` method with the proper params whenever it needs data.
+## Error handling
+
+You could handle the errors with the data source by providing an error handler function using the `unstable_onDataSourceError`.
+It will be called whenever there's an error in fetching the data.
+
+The first argument of this function is the error object, and the second argument is the fetch parameters of type `GridGetRowsParams`.
```tsx
{
+ console.error(error);
+ }}
/>
```
-#### Caching
+{{"demo": "ServerSideErrorHandling.js", "bg": "inline"}}
+
+## Updating data π§
+
+This feature is yet to be implemented, when completed, the method `unstable_dataSource.updateRow` will be called with the `GridRowModel` whenever the user edits a row.
+It will work in a similar way as the `processRowUpdate` prop.
-The data grid will cache the data it receives from the server. This means that if the user navigates to a page that has already been fetched, the grid will not call the `getRows` function again. This is to avoid unnecessary calls to the server.
+Feel free to upvote the related GitHub [issue](https://github.com/mui/mui-x/issues/13261) to see this feature land faster.
## API
diff --git a/docs/data/data-grid/server-side-data/tree-data.md b/docs/data/data-grid/server-side-data/tree-data.md
index ba9d93e36719..8e77fe0542bf 100644
--- a/docs/data/data-grid/server-side-data/tree-data.md
+++ b/docs/data/data-grid/server-side-data/tree-data.md
@@ -2,14 +2,72 @@
title: React Server-side tree data
---
-# Data Grid - Server-side tree data [](/x/introduction/licensing/#pro-plan 'Pro plan')π§
+# Data Grid - Server-side tree data [](/x/introduction/licensing/#pro-plan 'Pro plan')
Tree data lazy-loading with server-side data source.
-:::warning
-This feature isn't implemented yet. It's coming.
+To dynamically load tree data from the server, including lazy-loading of children, you must create a data source and pass the `unstable_dataSource` prop to the Data Grid, as detailed in the [overview section](/x/react-data-grid/server-side-data/).
-π Upvote [issue #3377](https://github.com/mui/mui-x/issues/3377) if you want to see it land faster.
+The data source also requires some additional props to handle tree data, namely `getGroupKey` and `getChildrenCount`.
+If the children count is not available for some reason, but there are some children, `getChildrenCount` should return `-1`.
-Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with the [currently proposed workaround](https://mui.com/x/react-data-grid/tree-data/#children-lazy-loading).
+```tsx
+const customDataSource: GridDataSource = {
+ getRows: async (params) => {
+ // Fetch the data from the server
+ },
+ getGroupKey: (row) => {
+ // Return the group key for the row, e.g. `name`
+ return row.name;
+ },
+ getChildrenCount: (row) => {
+ // Return the number of children for the row
+ return row.childrenCount;
+ },
+};
+```
+
+The following tree data example supports filtering, sorting, and pagination on the server.
+It also caches the data by default.
+
+{{"demo": "ServerSideTreeData.js", "bg": "inline"}}
+
+:::info
+The data source demos use a utility function `useMockServer` to simulate the server-side data fetching.
+In a real-world scenario, you would replace this with your own server-side data fetching logic.
+
+Open the info section of the browser console to see the requests being made and the data being fetched in response.
:::
+
+## Error handling
+
+For each row group expansion, the data source is called to fetch the children. If an error occurs during the fetch, the grid will display an error message in the row group cell. `unstable_onDataSourceError` is also triggered with the error and the fetch params.
+
+The demo below shows a toast apart from the default error message in the grouping cell. Cache has been disabled in this demo for simplicity.
+
+{{"demo": "ServerSideTreeDataErrorHandling.js", "bg": "inline"}}
+
+## Group expansion
+
+The idea behind the group expansion is the same as explained in the [Row grouping](/x/react-data-grid/row-grouping/#group-expansion) section.
+The difference is that the data is not initially available and is fetched automatically after the Data Grid is mounted based on the props `defaultGroupingExpansionDepth` and `isGroupExpandedByDefault` in a waterfall manner.
+
+The following demo uses `defaultGroupingExpansionDepth='-1'` to expand all levels of the tree by default.
+
+{{"demo": "ServerSideTreeDataGroupExpansion.js", "bg": "inline"}}
+
+## Custom cache
+
+The data source uses a cache by default to store the fetched data.
+Use the `unstable_dataSourceCache` prop to provide a custom cache if necessary.
+See [Data caching](/x/react-data-grid/server-side-data/#data-caching) for more info.
+
+The following demo uses `QueryClient` from `@tanstack/react-core` as a data source cache.
+
+{{"demo": "ServerSideTreeDataCustomCache.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/tree-data/TreeDataLazyLoading.js b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
deleted file mode 100644
index ea3f9c8fd2a4..000000000000
--- a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import * as React from 'react';
-import {
- DataGridPro,
- getDataGridUtilityClass,
- useGridApiContext,
- useGridApiRef,
- useGridRootProps,
-} from '@mui/x-data-grid-pro';
-import { unstable_composeClasses as composeClasses, styled } from '@mui/material';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-
-export const isNavigationKey = (key) =>
- key === 'Home' ||
- key === 'End' ||
- key.indexOf('Arrow') === 0 ||
- key.indexOf('Page') === 0 ||
- key === ' ';
-
-const ALL_ROWS = [
- {
- hierarchy: ['Sarah'],
- jobTitle: 'Head of Human Resources',
- recruitmentDate: new Date(2020, 8, 12),
- id: 0,
- },
- {
- hierarchy: ['Thomas'],
- jobTitle: 'Head of Sales',
- recruitmentDate: new Date(2017, 3, 4),
- id: 1,
- },
- {
- hierarchy: ['Thomas', 'Robert'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2020, 11, 20),
- id: 2,
- },
- {
- hierarchy: ['Thomas', 'Karen'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2020, 10, 14),
- id: 3,
- },
- {
- hierarchy: ['Thomas', 'Nancy'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2017, 10, 29),
- id: 4,
- },
- {
- hierarchy: ['Thomas', 'Daniel'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2020, 7, 21),
- id: 5,
- },
- {
- hierarchy: ['Thomas', 'Christopher'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2020, 7, 20),
- id: 6,
- },
- {
- hierarchy: ['Thomas', 'Donald'],
- jobTitle: 'Sales Person',
- recruitmentDate: new Date(2019, 6, 28),
- id: 7,
- },
- {
- hierarchy: ['Mary'],
- jobTitle: 'Head of Engineering',
- recruitmentDate: new Date(2016, 3, 14),
- id: 8,
- },
- {
- hierarchy: ['Mary', 'Jennifer'],
- jobTitle: 'Tech lead front',
- recruitmentDate: new Date(2016, 5, 17),
- id: 9,
- },
- {
- hierarchy: ['Mary', 'Jennifer', 'Anna'],
- jobTitle: 'Front-end developer',
- recruitmentDate: new Date(2019, 11, 7),
- id: 10,
- },
- {
- hierarchy: ['Mary', 'Michael'],
- jobTitle: 'Tech lead devops',
- recruitmentDate: new Date(2021, 7, 1),
- id: 11,
- },
- {
- hierarchy: ['Mary', 'Linda'],
- jobTitle: 'Tech lead back',
- recruitmentDate: new Date(2017, 0, 12),
- id: 12,
- },
- {
- hierarchy: ['Mary', 'Linda', 'Elizabeth'],
- jobTitle: 'Back-end developer',
- recruitmentDate: new Date(2019, 2, 22),
- id: 13,
- },
- {
- hierarchy: ['Mary', 'Linda', 'William'],
- jobTitle: 'Back-end developer',
- recruitmentDate: new Date(2018, 4, 19),
- id: 14,
- },
-];
-
-const columns = [
- { field: 'jobTitle', headerName: 'Job Title', width: 200 },
- {
- field: 'recruitmentDate',
- headerName: 'Recruitment Date',
- type: 'date',
- width: 150,
- },
-];
-
-const getChildren = (parentPath) => {
- const parentPathStr = parentPath.join('-');
- return ALL_ROWS.filter(
- (row) => row.hierarchy.slice(0, -1).join('-') === parentPathStr,
- );
-};
-
-/**
- * This is a naive implementation with terrible performances on a real dataset.
- * This fake server is only here for demonstration purposes.
- */
-const fakeDataFetcher = (parentPath = []) =>
- new Promise((resolve) => {
- setTimeout(
- () => {
- const rows = getChildren(parentPath).map((row) => ({
- ...row,
- descendantCount: getChildren(row.hierarchy).length,
- }));
- resolve(rows);
- },
- 500 + Math.random() * 300,
- );
- });
-
-const LoadingContainer = styled('div')({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- height: '100%',
-});
-
-const getTreeDataPath = (row) => row.hierarchy;
-
-const useUtilityClasses = (ownerState) => {
- const { classes } = ownerState;
-
- const slots = {
- root: ['treeDataGroupingCell'],
- toggle: ['treeDataGroupingCellToggle'],
- };
-
- return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-
-/**
- * Reproduce the behavior of the `GridTreeDataGroupingCell` component in `@mui/x-data-grid-pro`
- * But base the amount of children on a `row.descendantCount` property rather than on the internal lookups.
- */
-function GroupingCellWithLazyLoading(props) {
- const { id, rowNode, row, hideDescendantCount, formattedValue } = props;
-
- const rootProps = useGridRootProps();
- const apiRef = useGridApiContext();
- const classes = useUtilityClasses({ classes: rootProps.classes });
-
- const isLoading = rowNode.childrenExpanded ? !row.childrenFetched : false;
-
- const Icon = rowNode.childrenExpanded
- ? rootProps.slots.treeDataCollapseIcon
- : rootProps.slots.treeDataExpandIcon;
-
- const handleClick = () => {
- apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
- };
-
- return (
-
-
- );
-}
diff --git a/docs/data/data-grid/tree-data/TreeDataLazyLoading.tsx.preview b/docs/data/data-grid/tree-data/TreeDataLazyLoading.tsx.preview
deleted file mode 100644
index 527bdff70663..000000000000
--- a/docs/data/data-grid/tree-data/TreeDataLazyLoading.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/data-grid/tree-data/tree-data.md b/docs/data/data-grid/tree-data/tree-data.md
index fe6fa401e005..3af238f688a3 100644
--- a/docs/data/data-grid/tree-data/tree-data.md
+++ b/docs/data/data-grid/tree-data/tree-data.md
@@ -126,23 +126,9 @@ const invalidRows = [{ path: ['A'] }, { path: ['B'] }, { path: ['A', 'A'] }];
:::
-## Children lazy-loading π§
+## Children lazy-loading
-:::warning
-This feature isn't implemented yet. It's coming.
-
-π Upvote [issue #3377](https://github.com/mui/mui-x/issues/3377) if you want to see it land faster.
-
-Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with your current solution.
-:::
-
-Alternatively, you can achieve a similar behavior by implementing this feature outside the component as shown below.
-This implementation does not support every feature of the data grid but can be a good starting point for large datasets.
-
-The idea is to add a property `descendantCount` on the row and to use it instead of the internal grid state.
-To do so, you need to override both the `renderCell` of the grouping column and to manually open the rows by listening to `rowExpansionChange` event.
-
-{{"demo": "TreeDataLazyLoading.js", "bg": "inline", "defaultCodeOpen": false}}
+Check the [Server-side tree data](/x/react-data-grid/server-side-data/tree-data/) section for more information about lazy-loading tree data children.
## Full example
diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md
index 6ab1f2944f39..26b4113d0f7b 100644
--- a/docs/data/date-pickers/adapters-locale/adapters-locale.md
+++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md
@@ -79,6 +79,14 @@ import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
{{"demo": "LocalizationLuxon.js"}}
+:::warning
+`AdapterLuxon` does not support `Settings.throwOnInvalid = true` [setting](https://moment.github.io/luxon/api-docs/index.html#settingsthrowoninvalid).
+
+π Upvote [issue #11853](https://github.com/mui/mui-x/issues/11853) if you need support for it.
+
+Don't hesitate to leave feedback on how you would like the data entry to behave.
+:::
+
### With `moment`
For `moment`, import the locale and then pass its name to `LocalizationProvider`:
diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js
index 8071aea4d7f6..4615954c25c1 100644
--- a/docs/data/date-pickers/custom-components/ActionBarComponent.js
+++ b/docs/data/date-pickers/custom-components/ActionBarComponent.js
@@ -9,11 +9,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
-import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
function CustomActionBar(props) {
const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
- const localeText = useLocaleText();
+ const translations = usePickersTranslations();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const id = useId();
@@ -34,7 +34,7 @@ function CustomActionBar(props) {
}}
key={actionType}
>
- {localeText.clearButtonLabel}
+ {translations.clearButtonLabel}
);
@@ -47,7 +47,7 @@ function CustomActionBar(props) {
}}
key={actionType}
>
- {localeText.cancelButtonLabel}
+ {translations.cancelButtonLabel}
);
@@ -60,7 +60,7 @@ function CustomActionBar(props) {
}}
key={actionType}
>
- {localeText.okButtonLabel}
+ {translations.okButtonLabel}
);
@@ -74,7 +74,7 @@ function CustomActionBar(props) {
}}
key={actionType}
>
- {localeText.todayButtonLabel}
+ {translations.todayButtonLabel}
);
diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
index 7985a95c6dfd..7516085bb00e 100644
--- a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
+++ b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
@@ -9,11 +9,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
-import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
function CustomActionBar(props: PickersActionBarProps) {
const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
- const localeText = useLocaleText();
+ const translations = usePickersTranslations();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const id = useId();
@@ -34,7 +34,7 @@ function CustomActionBar(props: PickersActionBarProps) {
}}
key={actionType}
>
- {localeText.clearButtonLabel}
+ {translations.clearButtonLabel}
);
case 'cancel':
@@ -46,7 +46,7 @@ function CustomActionBar(props: PickersActionBarProps) {
}}
key={actionType}
>
- {localeText.cancelButtonLabel}
+ {translations.cancelButtonLabel}
);
case 'accept':
@@ -58,7 +58,7 @@ function CustomActionBar(props: PickersActionBarProps) {
}}
key={actionType}
>
- {localeText.okButtonLabel}
+ {translations.okButtonLabel}
);
case 'today':
@@ -71,7 +71,7 @@ function CustomActionBar(props: PickersActionBarProps) {
}}
key={actionType}
>
- {localeText.todayButtonLabel}
+ {translations.todayButtonLabel}
);
default:
diff --git a/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js b/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js
index 3b1a1f36bb4c..c61118d8584a 100644
--- a/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js
+++ b/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js
@@ -4,7 +4,7 @@ import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Stack from '@mui/material/Stack';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
import CustomizationPlayground from 'docsx/src/modules/components/CustomizationPlayground';
import CircularProgress from '@mui/material/CircularProgress';
import { pickerExamples } from './examplesConfig.styling';
diff --git a/docs/data/date-pickers/localization/UseLocaleText.tsx.preview b/docs/data/date-pickers/localization/UseLocaleText.tsx.preview
new file mode 100644
index 000000000000..395c5e40aaea
--- /dev/null
+++ b/docs/data/date-pickers/localization/UseLocaleText.tsx.preview
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md
index d461a3946516..0e0cbdcc2a61 100644
--- a/docs/data/date-pickers/localization/localization.md
+++ b/docs/data/date-pickers/localization/localization.md
@@ -131,3 +131,17 @@ You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/x-date
To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
Note that these translations of the date and time picker components depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library.
+
+## Access the translations in slots and subcomponents
+
+You can use the `usePickersTranslations` hook to access the translations in your custom components.
+
+```tsx
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+
+const translations = usePickersTranslations();
+```
+
+:::info
+See [Custom slots and subcomponentsβAction bar](/x/react-date-pickers/custom-components/#component) for more details.
+:::
diff --git a/docs/data/date-pickers/overview/overview.md b/docs/data/date-pickers/overview/overview.md
index ae699e363d1d..8c73477e1a0a 100644
--- a/docs/data/date-pickers/overview/overview.md
+++ b/docs/data/date-pickers/overview/overview.md
@@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepick
These react date picker and time picker components let users select date or time values.
+
+
+
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md
index 2fb893baee65..2c45bd280411 100644
--- a/docs/data/tree-view/rich-tree-view/selection/selection.md
+++ b/docs/data/tree-view/rich-tree-view/selection/selection.md
@@ -94,3 +94,45 @@ you can create your own custom solution using the `selectedItems`,
`onSelectedItemsChange` and `onItemSelectionToggle` props:
{{"demo": "ParentChildrenSelectionRelationship.js"}}
+
+## Imperative API
+
+:::success
+To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+
+```tsx
+const apiRef = useTreeViewApiRef();
+
+return {children};
+```
+
+When your component first renders, `apiRef` will be `undefined`.
+After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
+:::
+
+### Select or deselect an item
+
+Use the `selectItem` API method to select or deselect an item:
+
+```ts
+apiRef.current.selectItem({
+ // The DOM event that triggered the change
+ event,
+ // The id of the item to select or deselect
+ itemId,
+ // If `true`, the other already selected items will remain selected
+ // Otherwise, they will be deselected
+ // This parameter is only relevant when `multiSelect` is `true`
+ keepExistingSelection,
+ // If `true` the item will be selected
+ // If `false` the item will be deselected
+ // If not defined, the item's new selection status will be the opposite of its current one
+ shouldBeSelected,
+});
+```
+
+{{"demo": "ApiMethodSelectItem.js", "defaultCodeOpen": false}}
+
+You can use the `keepExistingSelection` property to avoid losing the already selected items when using `multiSelect`:
+
+{{"demo": "ApiMethodSelectItemKeepExistingSelection.js", "defaultCodeOpen": false}}
diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
deleted file mode 100644
index 36e9e200da11..000000000000
--- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
-
-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
-
-const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
- const { interactions } = useTreeItem2Utils({
- itemId: props.itemId,
- children: props.children,
- });
-
- const handleContentClick = (event) => {
- event.defaultMuiPrevented = true;
- interactions.handleSelection(event);
- };
-
- const handleIconContainerClick = (event) => {
- interactions.handleExpansion(event);
- };
-
- return (
-
- );
-});
-
-export default function IconExpansionTreeView() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
deleted file mode 100644
index f0a5de292e60..000000000000
--- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
-import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
-import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
-
-const CustomTreeItem = React.forwardRef(function MyTreeItem(
- props: TreeItem2Props,
- ref: React.Ref,
-) {
- const { interactions } = useTreeItem2Utils({
- itemId: props.itemId,
- children: props.children,
- });
-
- const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => {
- event.defaultMuiPrevented = true;
- interactions.handleSelection(event);
- };
-
- const handleIconContainerClick = (event: React.MouseEvent) => {
- interactions.handleExpansion(event);
- };
-
- return (
-
- );
-});
-
-export default function IconExpansionTreeView() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md
index e5e70b9e4aa8..7cf009836436 100644
--- a/docs/data/tree-view/simple-tree-view/customization/customization.md
+++ b/docs/data/tree-view/simple-tree-view/customization/customization.md
@@ -70,19 +70,6 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet
{{"demo": "BorderedTreeView.js", "defaultCodeOpen": false}}
-### Limit expansion to icon container
-
-:::warning
-This example is built using the new `TreeItem2` component
-which adds several slots to modify the content of the Tree Item or change its behavior.
-
-You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components).
-:::
-
-The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface.
-
-{{"demo": "IconExpansionTreeView.js", "defaultCodeOpen": false}}
-
### Gmail clone
:::warning
diff --git a/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.js b/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.js
new file mode 100644
index 000000000000..3a046031d357
--- /dev/null
+++ b/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.js
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function IconExpansionTreeView() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.tsx b/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.tsx
new file mode 100644
index 000000000000..3a046031d357
--- /dev/null
+++ b/docs/data/tree-view/simple-tree-view/expansion/IconExpansionTreeView.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function IconExpansionTreeView() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/expansion.md b/docs/data/tree-view/simple-tree-view/expansion/expansion.md
index a6b0a3f4e46a..68a069a40243 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/expansion.md
+++ b/docs/data/tree-view/simple-tree-view/expansion/expansion.md
@@ -32,6 +32,12 @@ Use the `onItemExpansionToggle` prop to trigger an action upon an item being exp
{{"demo": "TrackItemExpansionToggle.js"}}
+## Limit expansion to icon container
+
+You can use the `expansionTrigger` prop to decide if the expansion interaction should be triggered by clicking on the icon container instead of the whole Tree Item content.
+
+{{"demo": "IconExpansionTreeView.js"}}
+
## Imperative API
:::success
@@ -55,9 +61,10 @@ Use the `setItemExpansion` API method to change the expansion of an item.
apiRef.current.setItemExpansion(
// The DOM event that triggered the change
event,
- // The ID of the item to expand or collapse
+ // The id of the item to expand or collapse
itemId,
- // `true` if the item should be expanded, `false` if it should be collapsed
+ // If `true` the item will be expanded
+ // If `false` the item will be collapsed
isExpanded,
);
```
diff --git a/docs/data/tree-view/simple-tree-view/focus/focus.md b/docs/data/tree-view/simple-tree-view/focus/focus.md
index d1596614823c..ef9cd7d5558e 100644
--- a/docs/data/tree-view/simple-tree-view/focus/focus.md
+++ b/docs/data/tree-view/simple-tree-view/focus/focus.md
@@ -34,7 +34,7 @@ Use the `focusItem` API method to focus a specific item.
apiRef.current.focusItem(
// The DOM event that triggered the change
event,
- // The ID of the item to focus
+ // The id of the item to focus
itemId,
);
```
diff --git a/docs/data/tree-view/simple-tree-view/items/ApiMethodGetItemDOMElement.js b/docs/data/tree-view/simple-tree-view/items/ApiMethodGetItemDOMElement.js
new file mode 100644
index 000000000000..74e7dd11ca46
--- /dev/null
+++ b/docs/data/tree-view/simple-tree-view/items/ApiMethodGetItemDOMElement.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+export default function ApiMethodGetItemDOMElement() {
+ const apiRef = useTreeViewApiRef();
+ const handleScrollToChartsCommunity = (event) => {
+ apiRef.current.focusItem(event, 'charts-community');
+ apiRef.current
+ .getItemDOMElement('charts-community')
+ ?.scrollIntoView({ block: 'center' });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md
index a35ce2f3119c..efffddcf5574 100644
--- a/docs/data/tree-view/simple-tree-view/items/items.md
+++ b/docs/data/tree-view/simple-tree-view/items/items.md
@@ -73,3 +73,18 @@ When it's set to true:
- Programmatic focus will focus disabled items.
{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
+
+## Imperative API
+
+### Get an item's DOM element by ID
+
+Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
+
+```ts
+const itemElement = apiRef.current.getItemDOMElement(
+ // The id of the item to get the DOM element of
+ itemId,
+);
+```
+
+{{"demo": "ApiMethodGetItemDOMElement.js", "defaultCodeOpen": false}}
diff --git a/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.js b/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.js
new file mode 100644
index 000000000000..41a9034a616c
--- /dev/null
+++ b/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+export default function ApiMethodSelectItem() {
+ const apiRef = useTreeViewApiRef();
+ const handleSelectGridPro = (event) => {
+ apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.tsx b/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.tsx
new file mode 100644
index 000000000000..24bfef05a393
--- /dev/null
+++ b/docs/data/tree-view/simple-tree-view/selection/ApiMethodSelectItem.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+export default function ApiMethodSelectItem() {
+ const apiRef = useTreeViewApiRef();
+ const handleSelectGridPro = (event: React.SyntheticEvent) => {
+ apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
+ };
+
+ return (
+
+