diff --git a/docs/data/data-grid/prompt/PromptWithDataSource.js b/docs/data/data-grid/prompt/PromptWithDataSource.js index 001c7bc9922fb..4c6f73b590cd4 100644 --- a/docs/data/data-grid/prompt/PromptWithDataSource.js +++ b/docs/data/data-grid/prompt/PromptWithDataSource.js @@ -72,7 +72,7 @@ export default function PromptWithDataSource() {
](/x/introduction/licensing/#pro-plan 'Pro plan') +:::warning +This feature is deprecated, use the [Server-side data—Infinite loading](/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading) instead. +::: + 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`. @@ -52,6 +56,10 @@ Otherwise, the sorting and filtering will only be applied to the subset of rows ## Lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan') +:::warning +This feature is deprecated, use the [Server-side data—Viewport loading](/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) instead. +::: + Lazy Loading works like a pagination system, but instead of loading new rows based on pages, it loads them based on the viewport. It loads new rows in chunks, as the user scrolls through the Data Grid and reveals empty rows. diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGrid.js b/docs/data/data-grid/server-side-data/ServerSideDataGrid.js index 3262eb7fff0f7..fe020c577c86b 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGrid.js +++ b/docs/data/data-grid/server-side-data/ServerSideDataGrid.js @@ -32,7 +32,7 @@ export default function ServerSideDataGrid() {
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx index ff41d97ff32d8..9858fdfd82ea7 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx @@ -50,7 +50,7 @@ export default function ServerSideDataGridAggregationLazyLoading() {
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview index 0fe7f5e58a288..4e426c8ec111a 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.js b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.js index 42bbc1e85d5d6..d2d54f7eb9740 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.js +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.js @@ -65,7 +65,7 @@ export default function ServerSideDataGridAggregationRowGrouping() { diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx index cce3ef74ff758..fc4c8d644d412 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx @@ -67,7 +67,7 @@ export default function ServerSideDataGridAggregationRowGrouping() { diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx.preview index ccf50964bc3dc..acfef3003caf7 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx.preview +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx.preview @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.js b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.js index 1db386e9df124..9e89878fe7ff9 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.js +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.js @@ -50,7 +50,7 @@ export default function ServerSideDataGridAggregationTreeData() {
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx b/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx index 56be3257d8207..59a6171d32bde 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx @@ -49,8 +49,8 @@ export default function ServerSideDataGridNoCache() { diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx.preview index f15629f3e9e7a..88b2ce4994e2a 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx.preview +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx.preview @@ -1,8 +1,8 @@ \ No newline at end of file diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js b/docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js index 23dbf5cd3a8d3..3f79bcf142c4a 100644 --- a/docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js +++ b/docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js @@ -45,8 +45,8 @@ export default function ServerSideDataGridTTL() {
{ setError(''); - apiRef.current?.unstable_dataSource.fetchRows(); + apiRef.current?.dataSource.fetchRows(); }} > Refetch rows @@ -103,11 +103,9 @@ export default function ServerSideErrorHandling() {
- setError(dataSourceError.message) - } - unstable_dataSourceCache={null} + dataSource={dataSource} + onDataSourceError={(dataSourceError) => setError(dataSourceError.message)} + dataSourceCache={null} apiRef={apiRef} pagination pageSizeOptions={pageSizeOptions} diff --git a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx index cac4c35a32409..b402406e43167 100644 --- a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx @@ -90,7 +90,7 @@ export default function ServerSideErrorHandling() {
-
apiRef.current?.unstable_dataSource.cache.clear()}> +
{ setRootError(''); - apiRef.current?.unstable_dataSource.fetchRows(); + apiRef.current?.dataSource.fetchRows(); }} > Refetch rows @@ -88,8 +88,8 @@ export default function ServerSideTreeDataErrorHandling() { { + dataSource={dataSource} + onDataSourceError={(error) => { if (error instanceof GridGetRowsError) { if (!error.params.groupKeys || error.params.groupKeys.length === 0) { setRootError(error.message); @@ -100,7 +100,7 @@ export default function ServerSideTreeDataErrorHandling() { } } }} - unstable_dataSourceCache={null} + dataSourceCache={null} apiRef={apiRef} pagination pageSizeOptions={pageSizeOptions} diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx index 584ad9654e3d0..a681a7a45ce01 100644 --- a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx @@ -76,7 +76,7 @@ export default function ServerSideTreeDataErrorHandling() {
-
](/x/introduction/licensing/#premium-plan 'Premium plan')🧪 +# Data Grid - Server-side aggregation [](/x/introduction/licensing/#premium-plan 'Premium plan')

Aggregation with server-side data source.

-To dynamically load tree data from the server, you must create a data source and pass the `unstable_dataSource` prop to the Data Grid, as detailed in the [Server-side data overview](/x/react-data-grid/server-side-data/). +To dynamically load tree data from the server, you must create a data source and pass the `dataSource` prop to the Data Grid, as detailed in the [Server-side data overview](/x/react-data-grid/server-side-data/). :::info If you're looking for aggregation on the client side, see [Aggregation](/x/react-data-grid/aggregation/). @@ -25,11 +25,11 @@ Server-side aggregation requires some additional steps to implement: ``` - The `GridAggregationFunctionDataSource` interface is similar to `GridAggregationFunction`, but it doesn't have `apply` or `getCellValue` properties because the computation is done on the server. + The `GridAggregationFunctionDataSource` interface is similar to `GridAggregationFunction`, but it doesn't have `apply()` or `getCellValue()` properties because the computation is done on the server. See the [GridAggregationFunctionDataSource API page](/x/api/data-grid/grid-aggregation-function-data-source/) for more details. -2. Use `aggregationModel` passed in the `getRows` method of `GridDataSource` to fetch the aggregated values. +2. Use `aggregationModel` passed in the `getRows()` method of `GridDataSource` to fetch the aggregated values. For the root level footer aggregation row, pass `aggregateRow` containing the aggregated values in the `GetRowsResponse`. ```diff @@ -51,7 +51,7 @@ Server-side aggregation requires some additional steps to implement: } ``` -3. Pass the getter method `getAggregatedValue` in `GridDataSource` that defines how to get the aggregated value for a parent row (including the `aggregateRow`). +3. Pass the getter method `getAggregatedValue()` in `GridDataSource` that defines how to get the aggregated value for a parent row (including the `aggregateRow`). ```tsx const dataSource = { @@ -84,14 +84,14 @@ Server-side aggregation can be implemented along with [server-side lazy loading] ## Usage with row grouping Server-side aggregation works with row grouping in a similar way as described in [Aggregation—usage with row grouping](/x/react-data-grid/aggregation/#usage-with-row-grouping). -The aggregated values are acquired from the parent rows using the `getAggregatedValue` method. +The aggregated values are acquired from the parent rows using the `getAggregatedValue()` method. {{"demo": "ServerSideDataGridAggregationRowGrouping.js", "bg": "inline"}} ## Usage with tree data Server-side aggregation can be used with tree data in a similar way as described in [Aggregation—usage with tree data](/x/react-data-grid/aggregation/#usage-with-tree-data). -The aggregated values are acquired from the parent rows using the `getAggregatedValue` method. +The aggregated values are acquired from the parent rows using the `getAggregatedValue()` method. {{"demo": "ServerSideDataGridAggregationTreeData.js", "bg": "inline"}} diff --git a/docs/data/data-grid/server-side-data/index.md b/docs/data/data-grid/server-side-data/index.md index a8f0827fdcfa7..d0f6666eadec0 100644 --- a/docs/data/data-grid/server-side-data/index.md +++ b/docs/data/data-grid/server-side-data/index.md @@ -2,16 +2,10 @@ title: React Data Grid - Server-side data --- -# Data Grid - Server-side data 🧪 +# Data Grid - Server-side data

The Data Grid server-side data.

-:::warning -This feature is under development and is marked as **unstable**. -While you can use this feature in production, the API could change in the future. -Feel free to subscribe or comment on the official GitHub [umbrella issue](https://github.com/mui/mui-x/issues/8179). -::: - ## Introduction Server-side data management in React can become complex with growing datasets. @@ -97,7 +91,7 @@ interface GridDataSource { :::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. +More specific properties like `getChildrenCount()` and `getGroupKey()` will be discussed in the corresponding sections. ::: @@ -121,7 +115,7 @@ const customDataSource: GridDataSource = { ``` @@ -134,8 +128,8 @@ The data source changes how the existing server-side features like `filtering`, ### Without data source -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`](/x/react-data-grid/filtering/server-side/), [`onSortModelChange`](/x/react-data-grid/sorting/#server-side-sorting), [`onPaginationModelChange`](/x/react-data-grid/pagination/#server-side-pagination) event handlers to fetch the data from the server based on the updated variables. +Without 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()`](/x/react-data-grid/filtering/server-side/), [`onSortModelChange()`](/x/react-data-grid/sorting/#server-side-sorting), [`onPaginationModelChange()`](/x/react-data-grid/pagination/#server-side-pagination) event handlers to fetch the data from the server based on the updated variables. ```tsx ``` @@ -176,7 +170,7 @@ The following demo showcases this behavior. {{"demo": "ServerSideDataGrid.js", "bg": "inline"}} :::info -The data source demos use a `useMockServer` utility function to simulate server-side data fetching. +The data source demos use a `useMockServer()` utility function to simulate 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 your browser console to see the requests being made and the data being fetched in response. @@ -185,7 +179,7 @@ Open the Info section of your browser console to see the requests being made and ## Data caching 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. +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. The `GridDataSourceCacheDefault` is used by default which is a simple in-memory cache that stores the data in a plain object. It can be seen in action in the [demo above](#with-data-source). @@ -228,7 +222,7 @@ Changing those would require a new response to be retrieved and stored in the ch ### Customize the cache lifetime -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. +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 `dataSourceCache` prop. ```tsx import { GridDataSourceCacheDefault } from '@mui/x-data-grid'; @@ -237,8 +231,8 @@ const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 se ; ``` @@ -246,7 +240,7 @@ const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 se ### Custom cache -To provide a custom cache, use `unstable_dataSourceCache` prop, which could be either written from scratch or based on another cache library. +To provide a custom cache, use `dataSourceCache` prop, which could be either written from scratch or based on another cache library. This prop accepts a generic interface of type `GridDataSourceCache`. ```tsx @@ -259,21 +253,17 @@ export interface GridDataSourceCache { ### Disable cache -To disable the data source cache, pass `null` to the `unstable_dataSourceCache` prop. +To disable the data source cache, pass `null` to the `dataSourceCache` prop. ```tsx - + ``` {{"demo": "ServerSideDataGridNoCache.js", "bg": "inline"}} ## Error handling -You could handle the errors with the data source by providing an error handler function using the `unstable_onDataSourceError`. +You could handle the errors with the data source by providing an error handler function using the `onDataSourceError()`. It will be called whenever there's an error in fetching or updating the data. Currently, the function recieves an error object of type `GridGetRowsError`. @@ -289,8 +279,8 @@ Here's the error types and their corresponding `error.params` type: ```tsx { + dataSource={customDataSource} + onDataSourceError={(error) => { if (error instanceof GridGetRowsError) { // `error.params` is of type `GridGetRowsParams` // fetch related logic, e.g set an overlay state @@ -307,8 +297,8 @@ Here's the error types and their corresponding `error.params` type: ## 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. +This feature is yet to be implemented, when completed, the method `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. Feel free to upvote the related GitHub [issue](https://github.com/mui/mui-x/issues/13261) to see this feature land faster. diff --git a/docs/data/data-grid/server-side-data/lazy-loading.md b/docs/data/data-grid/server-side-data/lazy-loading.md index 8ce52a3b75edc..8deb215984a27 100644 --- a/docs/data/data-grid/server-side-data/lazy-loading.md +++ b/docs/data/data-grid/server-side-data/lazy-loading.md @@ -2,13 +2,13 @@ title: React Data Grid - Server-side lazy loading --- -# Data Grid - Server-side lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan')🧪 +# Data Grid - Server-side lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan')

Learn how to implement lazy-loading rows with a server-side data source.

Lazy loading changes the way pagination works by removing page controls and loading data dynamically (in a single list) as the user scrolls through the grid. -You can enable it with the `unstable_lazyLoading` prop paired with the `unstable_dataSource` prop. +You can enable it with the `lazyLoading` prop paired with the `dataSource` prop. Initially, data for the first page is fetched and displayed in the grid. The value of the total row count determines when the next page's data is loaded: @@ -53,7 +53,7 @@ Open the Info section of your browser console to see the requests being made and As a user scrolls through the Grid, the rendering context changes and the Grid tries to fill in any missing rows by making a new server request. It also throttles new data fetches to avoid making unnecessary requests. The default throttle time is 500 milliseconds. -Use the `unstable_lazyLoadingRequestThrottleMs` prop to set a custom time, as shown below: +Use the `lazyLoadingRequestThrottleMs` prop to set a custom time, as shown below: {{"demo": "ServerSideLazyLoadingRequestThrottle.js", "bg": "inline"}} @@ -98,13 +98,13 @@ This feature isn't available yet, but it is planned—you can 👍 upvote [this Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution. ::: -With this feature, you would be able to use the `unstable_lazyLoading` flag in use cases that also involve tree data and/or row grouping. +With this feature, you would be able to use the `lazyLoading` flag in use cases that also involve tree data and/or row grouping. ## Error handling -To handle errors, use the `unstable_onDataSourceError()` prop as described in [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling). +To handle errors, use the `onDataSourceError()` prop as described in [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling). -You can pass the second parameter of type `GridGetRowsParams` to the `getRows()` method of the [`unstable_dataSource`](/x/api/data-grid/grid-api/#grid-api-prop-unstable_dataSource) to retry the request. +You can pass the second parameter of type `GridGetRowsParams` to the `getRows()` method of the [`dataSource`](/x/api/data-grid/grid-api/#grid-api-prop-dataSource) to retry the request. If successful, the Data Grid uses `rows` and `rowCount` data to determine if the rows should be appended at the end of the grid or if the skeleton rows should be replaced. The following demo gives an example how to use `GridGetRowsParams` to retry a failed request. diff --git a/docs/data/data-grid/server-side-data/row-grouping.md b/docs/data/data-grid/server-side-data/row-grouping.md index dd1d05affc580..9e9c63a3aed4d 100644 --- a/docs/data/data-grid/server-side-data/row-grouping.md +++ b/docs/data/data-grid/server-side-data/row-grouping.md @@ -2,11 +2,11 @@ title: React Data Grid - Server-side row grouping --- -# Data Grid - Server-side row grouping [](/x/introduction/licensing/#premium-plan 'Premium plan')🧪 +# Data Grid - Server-side row grouping [](/x/introduction/licensing/#premium-plan 'Premium plan')

Lazy-loaded row grouping with server-side data source.

-To dynamically load row grouping data from the server, including lazy-loading of children, create a data source and pass the `unstable_dataSource` prop to the Data Grid, as mentioned in the [overview](/x/react-data-grid/server-side-data/) section. +To dynamically load row grouping data from the server, including lazy-loading of children, create a data source and pass the `dataSource` prop to the Data Grid, as mentioned in the [overview](/x/react-data-grid/server-side-data/) section. :::info If you are looking for row grouping on the client-side, see [client-side row grouping](/x/react-data-grid/row-grouping/). @@ -58,14 +58,14 @@ const getRows: async (params) => { {{"demo": "ServerSideRowGroupingDataGrid.js", "bg": "inline"}} :::warning -For complex data, consider using `colDef.groupingValueGetter` to extract the grouping value. This value is passed in the `groupKeys` parameter when `getRows` is called. +For complex data, consider using `colDef.groupingValueGetter()` to extract the grouping value. This value is passed in the `groupKeys` parameter when `getRows()` is called. -Ensure your backend can interpret the `groupKeys` parameter generated by `colDef.groupingValueGetter` to retrieve grouping values for child rows. +Ensure your backend can interpret the `groupKeys` parameter generated by `colDef.groupingValueGetter()` to retrieve grouping values for child rows. ::: ## Error handling -If an error occurs during a `getRows` call, the Data Grid displays an error message in the row group cell. `unstable_onDataSourceError` is also triggered with the error containing the params as mentioned in the [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling) section. +If an error occurs during a `getRows()` call, the Data Grid displays an error message in the row group cell. `onDataSourceError()` is also triggered with the error containing the params as mentioned in the [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling) section. This example shows error handling with toast notifications and default error messages in grouping cells. Caching is disabled for simplicity. 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 55f43ab22b605..2468eddb92265 100644 --- a/docs/data/data-grid/server-side-data/tree-data.md +++ b/docs/data/data-grid/server-side-data/tree-data.md @@ -2,11 +2,11 @@ title: React Data Grid - 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.

-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/). +To dynamically load tree data from the server, including lazy-loading of children, you must create a data source and pass the `dataSource` prop to the Data Grid, as detailed in the [overview section](/x/react-data-grid/server-side-data/). :::info If you are looking for tree data on the client-side, see [client-side tree data](/x/react-data-grid/tree-data/). @@ -59,7 +59,7 @@ It also caches the data by default. {{"demo": "ServerSideTreeData.js", "bg": "inline"}} :::info -The data source demos use a `useMockServer` utility function to simulate server-side data fetching. +The data source demos use a `useMockServer()` utility function to simulate 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 your browser console to see the requests being made and the data being fetched in response. @@ -69,7 +69,7 @@ Open the Info section of your browser console to see the requests being made and 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 object containing the params as mentioned in the [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling) section. +`onDataSourceError()` is also triggered with the error object containing the params as mentioned in the [Server-side data—Error handling](/x/react-data-grid/server-side-data/#error-handling) section. 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. @@ -79,7 +79,7 @@ Cache has been disabled in this demo for simplicity. ## 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 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. @@ -88,7 +88,7 @@ The following demo uses `defaultGroupingExpansionDepth={-1}` to expand all level ## 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. +Use the `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. diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index 134b5a2226a22..6f5bb918ecb54 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -166,6 +166,28 @@ You have to import it from `@mui/x-license` instead: /> ``` +- The data source feature and its related props are now stable. + + ```diff + + ``` + +- The data source API is now stable. + + ```diff + - apiRef.current.unstable_dataSource.getRows() + + apiRef.current.dataSource.getRows() + ``` + - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`. Only the initial value and the type are updated. Logic that initializes the API and its availability remained the same, which means that if you could access API in a particular line of your code before, you are able to access it as well after this change. diff --git a/docs/data/pages.ts b/docs/data/pages.ts index d2dd2085d37c8..851385a687c6b 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -141,31 +141,27 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/server-side-data-group', title: 'Server-side data', + newFeature: true, children: [ { pathname: '/x/react-data-grid/server-side-data', title: 'Overview', - unstable: true, }, { pathname: '/x/react-data-grid/server-side-data/tree-data', plan: 'pro', - unstable: true, }, { pathname: '/x/react-data-grid/server-side-data/lazy-loading', plan: 'pro', - unstable: true, }, { pathname: '/x/react-data-grid/server-side-data/row-grouping', plan: 'premium', - unstable: true, }, { pathname: '/x/react-data-grid/server-side-data/aggregation', plan: 'premium', - unstable: true, }, ], }, diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index ce2a037f266e3..7a1c024d00c1a 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -6,7 +6,7 @@ }, "aggregationFunctions": { "type": { "name": "object" }, - "default": "GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided" + "default": "GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided" }, "aggregationModel": { "type": { "name": "object" } }, "aggregationRowsScope": { @@ -41,6 +41,15 @@ "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, + "dataSource": { + "type": { + "name": "shape", + "description": "{ getAggregatedValue?: func, getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }" + } + }, + "dataSourceCache": { + "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } + }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { "type": { @@ -209,6 +218,8 @@ }, "keepColumnPositionIfDraggedOutside": { "type": { "name": "bool" }, "default": "false" }, "keepNonExistentRowsSelected": { "type": { "name": "bool" }, "default": "false" }, + "lazyLoading": { "type": { "name": "bool" }, "default": "false" }, + "lazyLoadingRequestThrottleMs": { "type": { "name": "number" }, "default": "500" }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, "logger": { @@ -369,6 +380,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDataSourceError": { + "type": { "name": "func" }, + "signature": { + "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", + "describedArgs": ["error"] + } + }, "onDensityChange": { "type": { "name": "func" }, "signature": { @@ -392,6 +410,8 @@ }, "onFetchRows": { "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.", "signature": { "type": "function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", "describedArgs": ["params", "event", "details"] @@ -526,6 +546,8 @@ }, "onRowsScrollEnd": { "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.", "signature": { "type": "function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", "describedArgs": ["params", "event", "details"] @@ -597,7 +619,9 @@ }, "rowsLoadingMode": { "type": { "name": "enum", "description": "'client'
| 'server'" }, - "default": "\"client\"" + "default": "\"client\"", + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead." }, "rowSpacingType": { "type": { "name": "enum", "description": "'border'
| 'margin'" }, @@ -638,17 +662,6 @@ }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" }, "default": "false" }, - "unstable_dataSource": { - "type": { - "name": "shape", - "description": "{ getAggregatedValue?: func, getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }" - } - }, - "unstable_dataSourceCache": { - "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } - }, - "unstable_lazyLoading": { "type": { "name": "bool" }, "default": "false" }, - "unstable_lazyLoadingRequestThrottleMs": { "type": { "name": "number" }, "default": "500" }, "unstable_listColumn": { "type": { "name": "shape", @@ -656,13 +669,6 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_onDataSourceError": { - "type": { "name": "func" }, - "signature": { - "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", - "describedArgs": ["error"] - } - }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPremium", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 981df1ce425f8..3c86b0a97e8fe 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -30,6 +30,15 @@ "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, + "dataSource": { + "type": { + "name": "shape", + "description": "{ getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }" + } + }, + "dataSourceCache": { + "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } + }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { "type": { @@ -186,6 +195,8 @@ }, "keepColumnPositionIfDraggedOutside": { "type": { "name": "bool" }, "default": "false" }, "keepNonExistentRowsSelected": { "type": { "name": "bool" }, "default": "false" }, + "lazyLoading": { "type": { "name": "bool" }, "default": "false" }, + "lazyLoadingRequestThrottleMs": { "type": { "name": "number" }, "default": "500" }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, "logger": { @@ -326,6 +337,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDataSourceError": { + "type": { "name": "func" }, + "signature": { + "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", + "describedArgs": ["error"] + } + }, "onDensityChange": { "type": { "name": "func" }, "signature": { @@ -342,6 +360,8 @@ }, "onFetchRows": { "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.", "signature": { "type": "function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", "describedArgs": ["params", "event", "details"] @@ -469,6 +489,8 @@ }, "onRowsScrollEnd": { "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.", "signature": { "type": "function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", "describedArgs": ["params", "event", "details"] @@ -535,7 +557,9 @@ }, "rowsLoadingMode": { "type": { "name": "enum", "description": "'client'
| 'server'" }, - "default": "\"client\"" + "default": "\"client\"", + "deprecated": true, + "deprecationInfo": "Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead." }, "rowSpacingType": { "type": { "name": "enum", "description": "'border'
| 'margin'" }, @@ -572,17 +596,6 @@ }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" }, "default": "false" }, - "unstable_dataSource": { - "type": { - "name": "shape", - "description": "{ getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }" - } - }, - "unstable_dataSourceCache": { - "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } - }, - "unstable_lazyLoading": { "type": { "name": "bool" }, "default": "false" }, - "unstable_lazyLoadingRequestThrottleMs": { "type": { "name": "number" }, "default": "500" }, "unstable_listColumn": { "type": { "name": "shape", @@ -590,13 +603,6 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_onDataSourceError": { - "type": { "name": "func" }, - "signature": { - "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", - "describedArgs": ["error"] - } - }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPro", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 0b92d884563a3..5cef6d14535ef 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -29,6 +29,12 @@ "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, + "dataSource": { + "type": { "name": "shape", "description": "{ getRows: func, updateRow?: func }" } + }, + "dataSourceCache": { + "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } + }, "density": { "type": { "name": "enum", @@ -287,6 +293,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDataSourceError": { + "type": { "name": "func" }, + "signature": { + "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", + "describedArgs": ["error"] + } + }, "onDensityChange": { "type": { "name": "func" }, "signature": { @@ -478,19 +491,6 @@ }, "additionalInfo": { "sx": true } }, - "unstable_dataSource": { - "type": { "name": "shape", "description": "{ getRows: func, updateRow?: func }" } - }, - "unstable_dataSourceCache": { - "type": { "name": "shape", "description": "{ clear: func, get: func, set: func }" } - }, - "unstable_onDataSourceError": { - "type": { "name": "func" }, - "signature": { - "type": "function(error: GridGetRowsError | GridUpdateRowError) => void", - "describedArgs": ["error"] - } - }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGrid", diff --git a/docs/pages/x/api/data-grid/grid-api.json b/docs/pages/x/api/data-grid/grid-api.json index 93fc694749bde..2f9203aac9524 100644 --- a/docs/pages/x/api/data-grid/grid-api.json +++ b/docs/pages/x/api/data-grid/grid-api.json @@ -19,6 +19,7 @@ "type": { "description": "(options?: GridAutosizeOptions) => Promise<void>" }, "required": true }, + "dataSource": { "type": { "description": "GridDataSourceApiBase" }, "required": true }, "deleteFilterItem": { "type": { "description": "(item: GridFilterItem) => void" }, "required": true @@ -465,7 +466,6 @@ "required": true, "isProPlan": true }, - "unstable_dataSource": { "type": { "description": "GridDataSourceApiBase" }, "required": true }, "unstable_replaceRows": { "type": { "description": "(firstRowToReplace: number, newRows: GridRowModel[]) => void" }, "required": true diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index eefe265d12798..6ce787e5c9d5f 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -51,6 +51,8 @@ "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, + "dataSource": { "description": "Data source object." }, + "dataSourceCache": { "description": "Data source cache object." }, "defaultGroupingExpansionDepth": { "description": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded." }, @@ -237,6 +239,12 @@ "keepNonExistentRowsSelected": { "description": "If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages." }, + "lazyLoading": { + "description": "Used together with dataSource to enable lazy loading. If enabled, the grid stops adding paginationModel to the data requests (getRows) and starts sending start and end values depending on the loading mode and the scroll position." + }, + "lazyLoadingRequestThrottleMs": { + "description": "If positive, the Data Grid will throttle data source requests on rendered rows interval change." + }, "loading": { "description": "If true, a loading overlay is displayed." }, "localeText": { "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." @@ -407,6 +415,10 @@ "details": "Additional details for this callback." } }, + "onDataSourceError": { + "description": "Callback fired when a data source request fails.", + "typeDescriptions": { "error": "The data source error object." } + }, "onDensityChange": { "description": "Callback fired when the density changes.", "typeDescriptions": { "density": "New density value." } @@ -630,7 +642,7 @@ "description": "Override the height/width of the Data Grid inner scrollbar." }, "scrollEndThreshold": { - "description": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called. If combined with unstable_lazyLoading, it defines the area where the next data request is triggered." + "description": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called. If combined with lazyLoading, it defines the area where the next data request is triggered." }, "showCellVerticalBorder": { "description": "If true, vertical borders will be displayed between cells." @@ -661,24 +673,12 @@ "treeData": { "description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop." }, - "unstable_dataSource": { "description": "Data source object." }, - "unstable_dataSourceCache": { "description": "Data source cache object." }, - "unstable_lazyLoading": { - "description": "Used together with unstable_dataSource to enable lazy loading. If enabled, the grid stops adding paginationModel to the data requests (getRows) and starts sending start and end values depending on the loading mode and the scroll position." - }, - "unstable_lazyLoadingRequestThrottleMs": { - "description": "If positive, the Data Grid will throttle data source requests on rendered rows interval change." - }, "unstable_listColumn": { "description": "Definition of the column rendered when the unstable_listView prop is enabled." }, "unstable_listView": { "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn." }, - "unstable_onDataSourceError": { - "description": "Callback fired when a data source request fails.", - "typeDescriptions": { "error": "The data source error object." } - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index d053d2ff68870..35be54d90cca1 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -44,6 +44,8 @@ "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, + "dataSource": { "description": "The data source of the Data Grid Pro." }, + "dataSourceCache": { "description": "Data source cache object." }, "defaultGroupingExpansionDepth": { "description": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded." }, @@ -218,6 +220,12 @@ "keepNonExistentRowsSelected": { "description": "If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages." }, + "lazyLoading": { + "description": "Used together with dataSource to enable lazy loading. If enabled, the grid stops adding paginationModel to the data requests (getRows) and starts sending start and end values depending on the loading mode and the scroll position." + }, + "lazyLoadingRequestThrottleMs": { + "description": "If positive, the Data Grid will throttle data source requests on rendered rows interval change." + }, "loading": { "description": "If true, a loading overlay is displayed." }, "localeText": { "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." @@ -364,6 +372,10 @@ "details": "Additional details for this callback." } }, + "onDataSourceError": { + "description": "Callback fired when a data source request fails.", + "typeDescriptions": { "error": "The data source error object." } + }, "onDensityChange": { "description": "Callback fired when the density changes.", "typeDescriptions": { "density": "New density value." } @@ -572,7 +584,7 @@ "description": "Override the height/width of the Data Grid inner scrollbar." }, "scrollEndThreshold": { - "description": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called. If combined with unstable_lazyLoading, it defines the area where the next data request is triggered." + "description": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called. If combined with lazyLoading, it defines the area where the next data request is triggered." }, "showCellVerticalBorder": { "description": "If true, vertical borders will be displayed between cells." @@ -599,24 +611,12 @@ "treeData": { "description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop." }, - "unstable_dataSource": { "description": "The data source of the Data Grid Pro." }, - "unstable_dataSourceCache": { "description": "Data source cache object." }, - "unstable_lazyLoading": { - "description": "Used together with unstable_dataSource to enable lazy loading. If enabled, the grid stops adding paginationModel to the data requests (getRows) and starts sending start and end values depending on the loading mode and the scroll position." - }, - "unstable_lazyLoadingRequestThrottleMs": { - "description": "If positive, the Data Grid will throttle data source requests on rendered rows interval change." - }, "unstable_listColumn": { "description": "Definition of the column rendered when the unstable_listView prop is enabled." }, "unstable_listView": { "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn." }, - "unstable_onDataSourceError": { - "description": "Callback fired when a data source request fails.", - "typeDescriptions": { "error": "The data source error object." } - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index bb56098f764f7..037cddda463e7 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -41,6 +41,8 @@ "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, + "dataSource": { "description": "The data source object." }, + "dataSourceCache": { "description": "Data source cache object." }, "density": { "description": "Set the density of the Data Grid." }, "disableAutosize": { "description": "If true, column autosizing on header separator double-click is disabled." @@ -307,6 +309,10 @@ "details": "Additional details for this callback." } }, + "onDataSourceError": { + "description": "Callback fired when a data source request fails.", + "typeDescriptions": { "error": "The data source error object." } + }, "onDensityChange": { "description": "Callback fired when the density changes.", "typeDescriptions": { "density": "New density value." } @@ -485,12 +491,6 @@ "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, - "unstable_dataSource": { "description": "The data source object." }, - "unstable_dataSourceCache": { "description": "Data source cache object." }, - "unstable_onDataSourceError": { - "description": "Callback fired when a data source request fails.", - "typeDescriptions": { "error": "The data source error object." } - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/docs/translations/api-docs/data-grid/grid-api.json b/docs/translations/api-docs/data-grid/grid-api.json index fd40d36376d9c..45e258e978235 100644 --- a/docs/translations/api-docs/data-grid/grid-api.json +++ b/docs/translations/api-docs/data-grid/grid-api.json @@ -6,6 +6,7 @@ "autosizeColumns": { "description": "Auto-size the columns of the grid based on the cells' content and the space available." }, + "dataSource": { "description": "The data source API." }, "deleteFilterItem": { "description": "Deletes a GridFilterItem." }, @@ -238,7 +239,6 @@ }, "toggleDetailPanel": { "description": "Expands or collapses the detail panel of a row." }, "unpinColumn": { "description": "Unpins a column." }, - "unstable_dataSource": { "description": "The data source API." }, "unstable_replaceRows": { "description": "Replace a set of rows with new rows." }, "unstable_setColumnVirtualization": { "description": "Enable/disable column virtualization." }, "unstable_setPinnedRows": { "description": "Changes the pinned rows." }, diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 556bf67601524..bd5e756d6c157 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -73,7 +73,7 @@ DataGridPremiumRaw.propTypes = { // ---------------------------------------------------------------------- /** * Aggregation functions available on the grid. - * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided + * @default GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided */ aggregationFunctions: PropTypes.object, /** @@ -190,6 +190,24 @@ DataGridPremiumRaw.propTypes = { * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]]. */ columnVisibilityModel: PropTypes.object, + /** + * Data source object. + */ + dataSource: PropTypes.shape({ + getAggregatedValue: PropTypes.func, + getChildrenCount: PropTypes.func, + getGroupKey: PropTypes.func, + getRows: PropTypes.func.isRequired, + updateRow: PropTypes.func, + }), + /** + * Data source cache object. + */ + dataSourceCache: PropTypes.shape({ + clear: PropTypes.func.isRequired, + get: PropTypes.func.isRequired, + set: PropTypes.func.isRequired, + }), /** * If above 0, the row children will be expanded up to this depth. * If equal to -1, all the row children will be expanded. @@ -509,6 +527,18 @@ DataGridPremiumRaw.propTypes = { * @default false */ keepNonExistentRowsSelected: PropTypes.bool, + /** + * Used together with `dataSource` to enable lazy loading. + * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`) + * and starts sending `start` and `end` values depending on the loading mode and the scroll position. + * @default false + */ + lazyLoading: PropTypes.bool, + /** + * If positive, the Data Grid will throttle data source requests on rendered rows interval change. + * @default 500 + */ + lazyLoadingRequestThrottleMs: PropTypes.number, /** * If `true`, a loading overlay is displayed. * @default false @@ -685,6 +715,11 @@ DataGridPremiumRaw.propTypes = { * @param {GridCallbackDetails} details Additional details for this callback. */ onColumnWidthChange: PropTypes.func, + /** + * Callback fired when a data source request fails. + * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. + */ + onDataSourceError: PropTypes.func, /** * Callback fired when the density changes. * @param {GridDensity} density New density value. @@ -706,6 +741,7 @@ DataGridPremiumRaw.propTypes = { * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]]. * @param {MuiEvent<{}>} event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead. */ onFetchRows: PropTypes.func, /** @@ -833,6 +869,7 @@ DataGridPremiumRaw.propTypes = { * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]]. * @param {MuiEvent<{}>} event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead. */ onRowsScrollEnd: PropTypes.func, /** @@ -986,6 +1023,7 @@ DataGridPremiumRaw.propTypes = { * Set it to 'client' if you would like enable infnite loading. * Set it to 'server' if you would like to enable lazy loading. * @default "client" + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead. */ rowsLoadingMode: PropTypes.oneOf(['client', 'server']), /** @@ -1004,7 +1042,7 @@ DataGridPremiumRaw.propTypes = { scrollbarSize: PropTypes.number, /** * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called. - * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered. + * If combined with `lazyLoading`, it defines the area where the next data request is triggered. * @default 80 */ scrollEndThreshold: PropTypes.number, @@ -1078,36 +1116,6 @@ DataGridPremiumRaw.propTypes = { * @default false */ treeData: PropTypes.bool, - /** - * Data source object. - */ - unstable_dataSource: PropTypes.shape({ - getAggregatedValue: PropTypes.func, - getChildrenCount: PropTypes.func, - getGroupKey: PropTypes.func, - getRows: PropTypes.func.isRequired, - updateRow: PropTypes.func, - }), - /** - * Data source cache object. - */ - unstable_dataSourceCache: PropTypes.shape({ - clear: PropTypes.func.isRequired, - get: PropTypes.func.isRequired, - set: PropTypes.func.isRequired, - }), - /** - * Used together with `unstable_dataSource` to enable lazy loading. - * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`) - * and starts sending `start` and `end` values depending on the loading mode and the scroll position. - * @default false - */ - unstable_lazyLoading: PropTypes.bool, - /** - * If positive, the Data Grid will throttle data source requests on rendered rows interval change. - * @default 500 - */ - unstable_lazyLoadingRequestThrottleMs: PropTypes.number, /** * Definition of the column rendered when the `unstable_listView` prop is enabled. */ @@ -1123,11 +1131,6 @@ DataGridPremiumRaw.propTypes = { * Use in combination with `unstable_listColumn`. */ unstable_listView: PropTypes.bool, - /** - * Callback fired when a data source request fails. - * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. - */ - unstable_onDataSourceError: PropTypes.func, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts index bb316ad4c9e3e..197c05064319d 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts @@ -27,7 +27,7 @@ type GetDataGridProForcedProps = ( const getDataGridPremiumForcedProps: GetDataGridProForcedProps = (themedProps) => ({ signature: GridSignature.DataGridPremium, - ...(themedProps.unstable_dataSource + ...(themedProps.dataSource ? { filterMode: 'server', sortingMode: 'server', @@ -84,7 +84,7 @@ export const useDataGridPremiumProps = (inProps: DataGridPremiumProps) => { return React.useMemo( () => ({ ...DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, - ...(themedProps.unstable_dataSource ? { aggregationFunctions: {} } : {}), + ...(themedProps.dataSource ? { aggregationFunctions: {} } : {}), ...themedProps, localeText, slots, diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index a041be74bb7b8..86f62355b1591 100644 --- a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -24,9 +24,9 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { getAvailableAggregationFunctions({ aggregationFunctions: rootProps.aggregationFunctions, colDef, - isDataSource: !!rootProps.unstable_dataSource, + isDataSource: !!rootProps.dataSource, }), - [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource], + [colDef, rootProps.aggregationFunctions, rootProps.dataSource], ); const { native: isBaseSelectNative = false, ...baseSelectProps } = rootProps.slotProps?.baseSelect || {}; @@ -43,14 +43,14 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { colDef, aggregationFunctionName, aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName], - isDataSource: !!rootProps.unstable_dataSource, + isDataSource: !!rootProps.dataSource, }) ) { return aggregationFunctionName; } return ''; - }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]); + }, [rootProps.aggregationFunctions, rootProps.dataSource, aggregationModel, colDef]); const handleAggregationItemChange = (event: React.ChangeEvent) => { const newAggregationItem = (event.target as HTMLSelectElement | null)?.value || undefined; diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx index c9c5ca10f3306..0d64e95006209 100644 --- a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx +++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx @@ -54,7 +54,7 @@ function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps) const handleClick = (event: React.MouseEvent) => { if (!rowNode.childrenExpanded) { // always fetch/get from cache the children when the node is expanded - apiRef.current.unstable_dataSource.fetchRows(id); + apiRef.current.dataSource.fetchRows(id); } else { apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded); } @@ -105,7 +105,7 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe let descendantCount = 0; if (row) { - descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0); + descendantCount = Math.max(rootProps.dataSource?.getChildrenCount?.(row) ?? 0, 0); } let cellContent: React.ReactNode; diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts index f387e249b33be..184f4d4ffe951 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts @@ -50,7 +50,7 @@ export const useGridAggregation = ( | 'aggregationRowsScope' | 'disableAggregation' | 'rowGroupingColumnMode' - | 'unstable_dataSource' + | 'dataSource' >, ) => { apiRef.current.registerControlState({ @@ -80,7 +80,7 @@ export const useGridAggregation = ( getAggregationPosition: props.getAggregationPosition, aggregationFunctions: props.aggregationFunctions, aggregationRowsScope: props.aggregationRowsScope, - isDataSource: !!props.unstable_dataSource, + isDataSource: !!props.dataSource, }); apiRef.current.setState((state) => ({ @@ -92,7 +92,7 @@ export const useGridAggregation = ( props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, - props.unstable_dataSource, + props.dataSource, ]); const aggregationApi: GridAggregationApi = { @@ -131,13 +131,13 @@ export const useGridAggregation = ( gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, - !!props.unstable_dataSource, + !!props.dataSource, ); // Re-apply the row hydration to add / remove the aggregation footers if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) { - if (props.unstable_dataSource) { - apiRef.current.unstable_dataSource.fetchRows(); + if (props.dataSource) { + apiRef.current.dataSource.fetchRows(); } else { apiRef.current.requestPipeProcessorsApplication('hydrateRows'); applyAggregation(); @@ -153,7 +153,7 @@ export const useGridAggregation = ( applyAggregation, props.aggregationFunctions, props.disableAggregation, - props.unstable_dataSource, + props.dataSource, ]); useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff); diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index 57fc19a1ee4ba..8b03cdb812abb 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -31,7 +31,7 @@ export const useGridAggregationPreProcessors = ( | 'getAggregationPosition' | 'slotProps' | 'slots' - | 'unstable_dataSource' + | 'dataSource' >, ) => { // apiRef.current.caches.aggregation.rulesOnLastColumnHydration is not used because by the time @@ -46,7 +46,7 @@ export const useGridAggregationPreProcessors = ( columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, - !!props.unstable_dataSource, + !!props.dataSource, ); columnsState.orderedFields.forEach((field) => { @@ -77,7 +77,7 @@ export const useGridAggregationPreProcessors = ( return columnsState; }, - [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource], + [apiRef, props.aggregationFunctions, props.disableAggregation, props.dataSource], ); const addGroupFooterRows = React.useCallback>( @@ -88,7 +88,7 @@ export const useGridAggregationPreProcessors = ( gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, - !!props.unstable_dataSource, + !!props.dataSource, ); const hasAggregationRule = Object.keys(aggregationRules).length > 0; @@ -116,7 +116,7 @@ export const useGridAggregationPreProcessors = ( props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, - props.unstable_dataSource, + props.dataSource, ], ); @@ -129,7 +129,7 @@ export const useGridAggregationPreProcessors = ( const availableAggregationFunctions = getAvailableAggregationFunctions({ aggregationFunctions: props.aggregationFunctions, colDef, - isDataSource: !!props.unstable_dataSource, + isDataSource: !!props.dataSource, }); if (availableAggregationFunctions.length === 0) { @@ -138,7 +138,7 @@ export const useGridAggregationPreProcessors = ( return [...columnMenuItems, 'columnMenuAggregationItem']; }, - [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource], + [props.aggregationFunctions, props.disableAggregation, props.dataSource], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/x-data-grid-premium/src/hooks/features/dataSource/models.ts b/packages/x-data-grid-premium/src/hooks/features/dataSource/models.ts index a034d5a4e738f..0a107231fb89f 100644 --- a/packages/x-data-grid-premium/src/hooks/features/dataSource/models.ts +++ b/packages/x-data-grid-premium/src/hooks/features/dataSource/models.ts @@ -62,7 +62,7 @@ export interface GridDataSourceApiPremium { /** * The data source API. */ - unstable_dataSource: GridDataSourceApiBasePremium; + dataSource: GridDataSourceApiBasePremium; } export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi { diff --git a/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx b/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx index f0289ef8109ae..72872f4595cdc 100644 --- a/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx @@ -81,12 +81,12 @@ export const useGridDataSourcePremium = ( >( (groupId, field) => { if (groupId === GRID_ROOT_GROUP_ID) { - return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field); + return props.dataSource?.getAggregatedValue?.(aggregateRowRef.current, field); } const row = apiRef.current.getRow(groupId); - return props.unstable_dataSource?.getAggregatedValue?.(row, field); + return props.dataSource?.getAggregatedValue?.(row, field); }, - [apiRef, props.unstable_dataSource], + [apiRef, props.dataSource], ); const privateApi: GridDataSourcePremiumPrivateApi = { diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts index f5f948e3b2a99..7a9287410a705 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts @@ -25,17 +25,17 @@ export const useGridDataSourceRowGroupingPreProcessors = ( | 'rowGroupingColumnMode' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' - | 'unstable_dataSource' + | 'dataSource' >, ) => { const createRowTreeForRowGrouping = React.useCallback>( (params) => { - const getGroupKey = props.unstable_dataSource?.getGroupKey; + const getGroupKey = props.dataSource?.getGroupKey; if (!getGroupKey) { throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.'); } - const getChildrenCount = props.unstable_dataSource?.getChildrenCount; + const getChildrenCount = props.dataSource?.getChildrenCount; if (!getChildrenCount) { throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.'); } @@ -98,12 +98,7 @@ export const useGridDataSourceRowGroupingPreProcessors = ( groupingName: RowGroupingStrategy.DataSource, }); }, - [ - apiRef, - props.unstable_dataSource, - props.defaultGroupingExpansionDepth, - props.isGroupExpandedByDefault, - ], + [apiRef, props.dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault], ); const filterRows = React.useCallback>(() => { diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 8910e1cddab60..15e71e4e4f85f 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -65,7 +65,7 @@ export const useGridRowGrouping = ( | 'disableRowGrouping' | 'slotProps' | 'slots' - | 'unstable_dataSource' + | 'dataSource' >, ) => { apiRef.current.registerControlState({ @@ -246,15 +246,15 @@ export const useGridRowGrouping = ( return; } - if (props.unstable_dataSource && !params.rowNode.childrenExpanded) { - apiRef.current.unstable_dataSource.fetchRows(params.id); + if (props.dataSource && !params.rowNode.childrenExpanded) { + apiRef.current.dataSource.fetchRows(params.id); return; } apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded); } }, - [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource], + [apiRef, props.rowGroupingColumnMode, props.dataSource], ); const checkGroupingColumnsModelDiff = React.useCallback< @@ -288,7 +288,7 @@ export const useGridRowGrouping = ( useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff); useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff); useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => - apiRef.current.unstable_dataSource.fetchRows(), + apiRef.current.dataSource.fetchRows(), ); /* diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts index 6a89920819288..7d8eb7f9a3d0a 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts @@ -49,7 +49,7 @@ export const useGridRowGroupingPreProcessors = ( | 'rowGroupingColumnMode' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' - | 'unstable_dataSource' + | 'dataSource' >, ) => { const getGroupingColDefs = React.useCallback( @@ -58,7 +58,7 @@ export const useGridRowGroupingPreProcessors = ( return []; } - const strategy = props.unstable_dataSource + const strategy = props.dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default; @@ -108,7 +108,7 @@ export const useGridRowGroupingPreProcessors = ( props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping, - props.unstable_dataSource, + props.dataSource, ], ); @@ -262,15 +262,15 @@ export const useGridRowGroupingPreProcessors = ( ); useFirstRender(() => { - setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource); + setStrategyAvailability(apiRef, props.disableRowGrouping, props.dataSource); }); const isFirstRender = React.useRef(true); React.useEffect(() => { if (!isFirstRender.current) { - setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource); + setStrategyAvailability(apiRef, props.disableRowGrouping, props.dataSource); } else { isFirstRender.current = false; } - }, [apiRef, props.disableRowGrouping, props.unstable_dataSource]); + }, [apiRef, props.disableRowGrouping, props.dataSource]); }; diff --git a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts index 6c1da5d189dcd..4a9ec6a3376a3 100644 --- a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -93,7 +93,7 @@ export interface DataGridPremiumPropsWithDefaultValue @@ -129,7 +129,7 @@ export interface DataGridPremiumPropsWithDefaultValue extends Omit< DataGridProPropsWithoutDefaultValue, - 'initialState' | 'apiRef' | 'unstable_dataSource' | 'unstable_onDataSourceError' + 'initialState' | 'apiRef' | 'dataSource' | 'onDataSourceError' > { /** * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`. @@ -203,12 +203,10 @@ export interface DataGridPremiumPropsWithoutDefaultValue | GridUpdateRowError, - ) => void; + onDataSourceError?: (error: GridGetRowsError | GridUpdateRowError) => void; } diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx index 138d44a529fed..fd791934bea57 100644 --- a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx @@ -82,7 +82,7 @@ describeSkipIf(isJSDOM)(' - Data source aggregation', () => { } event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead. */ onFetchRows: PropTypes.func, /** @@ -750,6 +785,7 @@ DataGridProRaw.propTypes = { * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]]. * @param {MuiEvent<{}>} event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead. */ onRowsScrollEnd: PropTypes.func, /** @@ -893,6 +929,7 @@ DataGridProRaw.propTypes = { * Set it to 'client' if you would like enable infnite loading. * Set it to 'server' if you would like to enable lazy loading. * @default "client" + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead. */ rowsLoadingMode: PropTypes.oneOf(['client', 'server']), /** @@ -911,7 +948,7 @@ DataGridProRaw.propTypes = { scrollbarSize: PropTypes.number, /** * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called. - * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered. + * If combined with `lazyLoading`, it defines the area where the next data request is triggered. * @default 80 */ scrollEndThreshold: PropTypes.number, @@ -978,35 +1015,6 @@ DataGridProRaw.propTypes = { * @default false */ treeData: PropTypes.bool, - /** - * The data source of the Data Grid Pro. - */ - unstable_dataSource: PropTypes.shape({ - getChildrenCount: PropTypes.func, - getGroupKey: PropTypes.func, - getRows: PropTypes.func.isRequired, - updateRow: PropTypes.func, - }), - /** - * Data source cache object. - */ - unstable_dataSourceCache: PropTypes.shape({ - clear: PropTypes.func.isRequired, - get: PropTypes.func.isRequired, - set: PropTypes.func.isRequired, - }), - /** - * Used together with `unstable_dataSource` to enable lazy loading. - * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`) - * and starts sending `start` and `end` values depending on the loading mode and the scroll position. - * @default false - */ - unstable_lazyLoading: PropTypes.bool, - /** - * If positive, the Data Grid will throttle data source requests on rendered rows interval change. - * @default 500 - */ - unstable_lazyLoadingRequestThrottleMs: PropTypes.number, /** * Definition of the column rendered when the `unstable_listView` prop is enabled. */ @@ -1022,11 +1030,6 @@ DataGridProRaw.propTypes = { * Use in combination with `unstable_listColumn`. */ unstable_listView: PropTypes.bool, - /** - * Callback fired when a data source request fails. - * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. - */ - unstable_onDataSourceError: PropTypes.func, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index 6e8f1d481c96f..9b71954321c59 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -23,7 +23,7 @@ type GetDataGridProForcedProps = ( const getDataGridProForcedProps: GetDataGridProForcedProps = (themedProps) => ({ signature: 'DataGridPro', - ...(themedProps.unstable_dataSource + ...(themedProps.dataSource ? { filterMode: 'server', sortingMode: 'server', @@ -51,9 +51,9 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu rowsLoadingMode: 'client', scrollEndThreshold: 80, treeData: false, + lazyLoading: false, + lazyLoadingRequestThrottleMs: 500, unstable_listView: false, - unstable_lazyLoading: false, - unstable_lazyLoadingRequestThrottleMs: 500, }; const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS; diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx index d5f1b770843a0..592a3cb8972bb 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -58,7 +58,7 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) const handleClick = (event: React.MouseEvent) => { if (!rowNode.childrenExpanded) { // always fetch/get from cache the children when the node is expanded - apiRef.current.unstable_dataSource.fetchRows(id); + apiRef.current.dataSource.fetchRows(id); } else { apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded); } @@ -108,7 +108,7 @@ export function GridDataSourceTreeDataGroupingCell(props: GridTreeDataGroupingCe let descendantCount = 0; if (row) { - descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0); + descendantCount = Math.max(rootProps.dataSource?.getChildrenCount?.(row) ?? 0, 0); } return ( diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/models.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/models.ts index 2a0d8ddb9e47e..d8cba620c4870 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/models.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/models.ts @@ -72,7 +72,7 @@ export interface GridDataSourceApiPro { /** * The data source API. */ - unstable_dataSource: GridDataSourceApiBasePro; + dataSource: GridDataSourceApiBasePro; } export interface GridDataSourcePrivateApiPro { diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBasePro.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBasePro.ts index 367c9dce9f559..719add23f19b9 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBasePro.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBasePro.ts @@ -68,11 +68,11 @@ export const useGridDataSourceBasePro = ( apiRef.current.setStrategyAvailability( GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.Default, - props.unstable_dataSource && !props.unstable_lazyLoading ? () => true : () => false, + props.dataSource && !props.lazyLoading ? () => true : () => false, ); - }, [apiRef, props.unstable_dataSource, props.unstable_lazyLoading]); + }, [apiRef, props.dataSource, props.lazyLoading]); - const onDataSourceErrorProp = props.unstable_onDataSourceError; + const onDataSourceErrorProp = props.onDataSourceError; const fetchRowChildren = React.useCallback( async (id) => { @@ -84,7 +84,7 @@ export const useGridDataSourceBasePro = ( nestedDataManager.clearPendingRequest(id); return; } - const getRows = props.unstable_dataSource?.getRows; + const getRows = props.dataSource?.getRows; if (!getRows) { nestedDataManager.clearPendingRequest(id); return; @@ -114,13 +114,13 @@ export const useGridDataSourceBasePro = ( apiRef.current.updateServerRows(rows, rowNode.path); apiRef.current.setRowCount(cachedData.rowCount === undefined ? -1 : cachedData.rowCount); apiRef.current.setRowChildrenExpansion(id, true); - apiRef.current.unstable_dataSource.setChildrenLoading(id, false); + apiRef.current.dataSource.setChildrenLoading(id, false); return; } const existingError = gridDataSourceErrorsSelector(apiRef)[id] ?? null; if (existingError) { - apiRef.current.unstable_dataSource.setChildrenFetchError(id, null); + apiRef.current.dataSource.setChildrenFetchError(id, null); } try { @@ -131,7 +131,7 @@ export const useGridDataSourceBasePro = ( return; } if (nestedDataManager.getRequestStatus(id) === RequestStatus.UNKNOWN) { - apiRef.current.unstable_dataSource.setChildrenLoading(id, false); + apiRef.current.dataSource.setChildrenLoading(id, false); return; } nestedDataManager.setRequestSettled(id); @@ -148,7 +148,7 @@ export const useGridDataSourceBasePro = ( apiRef.current.setRowChildrenExpansion(id, true); } catch (error) { const childrenFetchError = error as Error; - apiRef.current.unstable_dataSource.setChildrenFetchError(id, childrenFetchError); + apiRef.current.dataSource.setChildrenFetchError(id, childrenFetchError); if (typeof onDataSourceErrorProp === 'function') { onDataSourceErrorProp( new GridGetRowsError({ @@ -160,15 +160,15 @@ export const useGridDataSourceBasePro = ( } else if (process.env.NODE_ENV !== 'production') { warnOnce( [ - 'MUI X: A call to `unstable_dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', - 'To handle the error pass a callback to the `unstable_onDataSourceError` prop, for example ` ...} />`.', + 'MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', + 'To handle the error pass a callback to the `onDataSourceError` prop, for example ` ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.', ], 'error', ); } } finally { - apiRef.current.unstable_dataSource.setChildrenLoading(id, false); + apiRef.current.dataSource.setChildrenLoading(id, false); nestedDataManager.setRequestSettled(id); } }, @@ -179,7 +179,7 @@ export const useGridDataSourceBasePro = ( onDataSourceErrorProp, apiRef, props.treeData, - props.unstable_dataSource?.getRows, + props.dataSource?.getRows, ], ); @@ -242,8 +242,8 @@ export const useGridDataSourceBasePro = ( }, [apiRef]); const dataSourceApi: GridDataSourceApiPro = { - unstable_dataSource: { - ...api.public.unstable_dataSource, + dataSource: { + ...api.public.dataSource, setChildrenLoading, setChildrenFetchError, }, diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts index d1215db897e5f..f76bbfbc9805b 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts @@ -87,7 +87,7 @@ export class NestedDataManager { }; public clearPendingRequest = (id: GridRowId) => { - this.api.unstable_dataSource.setChildrenLoading(id, false); + this.api.dataSource.setChildrenLoading(id, false); this.pendingRequests.delete(id); this.processQueue(); }; diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index ba74c69c5ab2b..3960cd0624e48 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -53,9 +53,9 @@ export const useGridDataSourceLazyLoader = ( DataGridProProcessedProps, | 'pagination' | 'paginationMode' - | 'unstable_dataSource' - | 'unstable_lazyLoading' - | 'unstable_lazyLoadingRequestThrottleMs' + | 'dataSource' + | 'lazyLoading' + | 'lazyLoadingRequestThrottleMs' | 'scrollEndThreshold' >, ): void => { @@ -63,9 +63,9 @@ export const useGridDataSourceLazyLoader = ( privateApiRef.current.setStrategyAvailability( GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.LazyLoading, - props.unstable_dataSource && props.unstable_lazyLoading ? () => true : () => false, + props.dataSource && props.lazyLoading ? () => true : () => false, ); - }, [privateApiRef, props.unstable_lazyLoading, props.unstable_dataSource]); + }, [privateApiRef, props.lazyLoading, props.dataSource]); const [lazyLoadingRowsUpdateStrategyActive, setLazyLoadingRowsUpdateStrategyActive] = React.useState(false); @@ -76,7 +76,7 @@ export const useGridDataSourceLazyLoader = ( const fetchRows = React.useCallback( (params: Partial) => { - privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params); + privateApiRef.current.dataSource.fetchRows(GRID_ROOT_GROUP_ID, params); }, [privateApiRef], ); @@ -104,7 +104,7 @@ export const useGridDataSourceLazyLoader = ( const resetGrid = React.useCallback(() => { privateApiRef.current.setLoading(true); - privateApiRef.current.unstable_dataSource.cache.clear(); + privateApiRef.current.dataSource.cache.clear(); rowsStale.current = true; previousLastRowIndex.current = 0; const paginationModel = gridPaginationModelSelector(privateApiRef); @@ -362,8 +362,8 @@ export const useGridDataSourceLazyLoader = ( ); const throttledHandleRenderedRowsIntervalChange = React.useMemo( - () => throttle(handleRenderedRowsIntervalChange, props.unstable_lazyLoadingRequestThrottleMs), - [props.unstable_lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange], + () => throttle(handleRenderedRowsIntervalChange, props.lazyLoadingRequestThrottleMs), + [props.lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange], ); React.useEffect(() => { return () => { diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx index 9b52bce269641..b82cfa4fc0a43 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx @@ -48,16 +48,16 @@ export const useGridDataSourceTreeDataPreProcessors = ( | 'disableChildrenFiltering' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' - | 'unstable_dataSource' + | 'dataSource' >, ) => { const setStrategyAvailability = React.useCallback(() => { privateApiRef.current.setStrategyAvailability( GridStrategyGroup.RowTree, TreeDataStrategy.DataSource, - props.treeData && props.unstable_dataSource ? () => true : () => false, + props.treeData && props.dataSource ? () => true : () => false, ); - }, [privateApiRef, props.treeData, props.unstable_dataSource]); + }, [privateApiRef, props.treeData, props.dataSource]); const getGroupingColDef = React.useCallback(() => { const groupingColDefProp = props.groupingColDef; @@ -96,7 +96,7 @@ export const useGridDataSourceTreeDataPreProcessors = ( const updateGroupingColumn = React.useCallback>( (columnsState) => { - if (!props.unstable_dataSource) { + if (!props.dataSource) { return columnsState; } const groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field; @@ -128,17 +128,17 @@ export const useGridDataSourceTreeDataPreProcessors = ( return columnsState; }, - [props.treeData, props.unstable_dataSource, getGroupingColDef], + [props.treeData, props.dataSource, getGroupingColDef], ); const createRowTreeForTreeData = React.useCallback>( (params) => { - const getGroupKey = props.unstable_dataSource?.getGroupKey; + const getGroupKey = props.dataSource?.getGroupKey; if (!getGroupKey) { throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.'); } - const getChildrenCount = props.unstable_dataSource?.getChildrenCount; + const getChildrenCount = props.dataSource?.getChildrenCount; if (!getChildrenCount) { throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.'); } @@ -191,11 +191,7 @@ export const useGridDataSourceTreeDataPreProcessors = ( groupingName: TreeDataStrategy.DataSource, }); }, - [ - props.unstable_dataSource, - props.defaultGroupingExpansionDepth, - props.isGroupExpandedByDefault, - ], + [props.dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault], ); const filterRows = React.useCallback>(() => { diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx index 9fe8e96b04ece..23de3a7987351 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx @@ -8,7 +8,7 @@ import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef'; export const useGridTreeData = ( apiRef: RefObject, - props: Pick, + props: Pick, ) => { /** * EVENTS @@ -25,15 +25,15 @@ export const useGridTreeData = ( return; } - if (props.unstable_dataSource && !params.rowNode.childrenExpanded) { - apiRef.current.unstable_dataSource.fetchRows(params.id); + if (props.dataSource && !params.rowNode.childrenExpanded) { + apiRef.current.dataSource.fetchRows(params.id); return; } apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded); } }, - [apiRef, props.unstable_dataSource], + [apiRef, props.dataSource], ); useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown); diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx index 595aba884d226..d917ada7c237e 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx @@ -48,16 +48,16 @@ export const useGridTreeDataPreProcessors = ( | 'disableChildrenFiltering' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' - | 'unstable_dataSource' + | 'dataSource' >, ) => { const setStrategyAvailability = React.useCallback(() => { privateApiRef.current.setStrategyAvailability( GridStrategyGroup.RowTree, TreeDataStrategy.Default, - props.treeData && !props.unstable_dataSource ? () => true : () => false, + props.treeData && !props.dataSource ? () => true : () => false, ); - }, [privateApiRef, props.treeData, props.unstable_dataSource]); + }, [privateApiRef, props.treeData, props.dataSource]); const getGroupingColDef = React.useCallback(() => { const groupingColDefProp = props.groupingColDef; @@ -96,7 +96,7 @@ export const useGridTreeDataPreProcessors = ( const updateGroupingColumn = React.useCallback>( (columnsState) => { - if (props.unstable_dataSource) { + if (props.dataSource) { return columnsState; } const groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field; @@ -128,7 +128,7 @@ export const useGridTreeDataPreProcessors = ( return columnsState; }, - [props.treeData, props.unstable_dataSource, getGroupingColDef], + [props.treeData, props.dataSource, getGroupingColDef], ); const createRowTreeForTreeData = React.useCallback>( diff --git a/packages/x-data-grid-pro/src/internals/propValidation.ts b/packages/x-data-grid-pro/src/internals/propValidation.ts index 06367108d22e9..f030122629fd2 100644 --- a/packages/x-data-grid-pro/src/internals/propValidation.ts +++ b/packages/x-data-grid-pro/src/internals/propValidation.ts @@ -16,7 +16,7 @@ export const propValidatorsDataGridPro: PropValidator (props) => (props.treeData && props.filterMode === 'server' && - !props.unstable_dataSource && + !props.dataSource && 'MUI X: The `filterMode="server"` prop is not available when the `treeData` is enabled.') || undefined, (props) => @@ -34,7 +34,7 @@ export const propValidatorsDataGridPro: PropValidator (props) => (props.signature !== GridSignature.DataGrid && (props.rowsLoadingMode === 'server' || props.onRowsScrollEnd) && - props.unstable_lazyLoading && - 'MUI X: Usage of the client side lazy loading (`rowsLoadingMode="server"` or `onRowsScrollEnd=...`) cannot be used together with server side lazy loading `unstable_lazyLoading="true"`.') || + props.lazyLoading && + 'MUI X: Usage of the client side lazy loading (`rowsLoadingMode="server"` or `onRowsScrollEnd=...`) cannot be used together with server side lazy loading `lazyLoading="true"`.') || undefined, ]; diff --git a/packages/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/x-data-grid-pro/src/models/dataGridProProps.ts index 8a40e254cb8db..b16ba9065e436 100644 --- a/packages/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/x-data-grid-pro/src/models/dataGridProProps.ts @@ -82,7 +82,7 @@ export interface DataGridProPropsWithDefaultValue { /** @@ -177,11 +178,7 @@ interface DataGridProRegularProps { export interface DataGridProPropsWithoutDefaultValue extends Omit< DataGridPropsWithoutDefaultValue, - | 'initialState' - | 'componentsProps' - | 'slotProps' - | 'unstable_dataSource' - | 'unstable_onDataSourceError' + 'initialState' | 'componentsProps' | 'slotProps' | 'dataSource' | 'onDataSourceError' >, DataGridProRegularProps, DataGridProSharedPropsWithoutDefaultValue { @@ -205,6 +202,7 @@ export interface DataGridProPropsWithoutDefaultValue} event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead. */ onRowsScrollEnd?: GridEventListener<'rowsScrollEnd'>; /** @@ -256,6 +254,7 @@ export interface DataGridProPropsWithoutDefaultValue} event The event object. * @param {GridCallbackDetails} details Additional details for this callback. + * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead. */ onFetchRows?: GridEventListener<'fetchRows'>; /** @@ -273,12 +272,10 @@ export interface DataGridProPropsWithoutDefaultValue | GridUpdateRowError, - ) => void; + onDataSourceError?: (error: GridGetRowsError | GridUpdateRowError) => void; } diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 939cdf121c2d3..48a954d69b6bc 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -76,8 +76,8 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { - Data source tree data', () => { - Data source tree data', () => { ); }); - it('should fetch nested data when calling API method `unstable_dataSource.fetchRows`', async () => { + it('should fetch nested data when calling API method `dataSource.fetchRows`', async () => { render(); if (!apiRef.current?.state) { @@ -175,7 +175,7 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { const firstChildId = (apiRef.current.state.rows.tree[GRID_ROOT_GROUP_ID] as GridGroupNode) .children[0]; - apiRef.current?.unstable_dataSource.fetchRows(firstChildId); + apiRef.current?.dataSource.fetchRows(firstChildId); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index a8157f38bed46..042bee31b26d1 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -155,6 +155,21 @@ DataGridRaw.propTypes = { * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]]. */ columnVisibilityModel: PropTypes.object, + /** + * The data source object. + */ + dataSource: PropTypes.shape({ + getRows: PropTypes.func.isRequired, + updateRow: PropTypes.func, + }), + /** + * Data source cache object. + */ + dataSourceCache: PropTypes.shape({ + clear: PropTypes.func.isRequired, + get: PropTypes.func.isRequired, + set: PropTypes.func.isRequired, + }), /** * Set the density of the Data Grid. * @default "standard" @@ -512,6 +527,11 @@ DataGridRaw.propTypes = { * @param {GridCallbackDetails} details Additional details for this callback. */ onColumnWidthChange: PropTypes.func, + /** + * Callback fired when a data source request fails. + * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. + */ + onDataSourceError: PropTypes.func, /** * Callback fired when the density changes. * @param {GridDensity} density New density value. @@ -784,26 +804,6 @@ DataGridRaw.propTypes = { PropTypes.func, PropTypes.object, ]), - /** - * The data source object. - */ - unstable_dataSource: PropTypes.shape({ - getRows: PropTypes.func.isRequired, - updateRow: PropTypes.func, - }), - /** - * Data source cache object. - */ - unstable_dataSourceCache: PropTypes.shape({ - clear: PropTypes.func.isRequired, - get: PropTypes.func.isRequired, - set: PropTypes.func.isRequired, - }), - /** - * Callback fired when a data source request fails. - * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. - */ - unstable_onDataSourceError: PropTypes.func, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts index 3bf4132132be5..ba949bb0b3377 100644 --- a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -34,7 +34,7 @@ const DATA_GRID_FORCED_PROPS: { [key in DataGridForcedPropsKey]?: DataGridProces const getDataGridForcedProps: GetDataGridForcedProps = (themedProps) => ({ ...DATA_GRID_FORCED_PROPS, - ...(themedProps.unstable_dataSource + ...(themedProps.dataSource ? { filterMode: 'server', sortingMode: 'server', diff --git a/packages/x-data-grid/src/hooks/features/dataSource/models.ts b/packages/x-data-grid/src/hooks/features/dataSource/models.ts index e84a2064fbccf..1b8609fda9f20 100644 --- a/packages/x-data-grid/src/hooks/features/dataSource/models.ts +++ b/packages/x-data-grid/src/hooks/features/dataSource/models.ts @@ -20,5 +20,5 @@ export interface GridDataSourceApi { /** * The data source API. */ - unstable_dataSource: GridDataSourceApiBase; + dataSource: GridDataSourceApiBase; } diff --git a/packages/x-data-grid/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid/src/hooks/features/dataSource/useGridDataSourceBase.ts index adcb55438c1f3..b92b7e8f56efa 100644 --- a/packages/x-data-grid/src/hooks/features/dataSource/useGridDataSourceBase.ts +++ b/packages/x-data-grid/src/hooks/features/dataSource/useGridDataSourceBase.ts @@ -42,11 +42,7 @@ export const useGridDataSourceBase = ( apiRef: RefObject, props: Pick< DataGridProcessedProps, - | 'unstable_dataSource' - | 'unstable_dataSourceCache' - | 'unstable_onDataSourceError' - | 'pageSizeOptions' - | 'signature' + 'dataSource' | 'dataSourceCache' | 'onDataSourceError' | 'pageSizeOptions' | 'signature' >, options: { cacheOptions?: GridDataSourceCacheDefaultConfig; @@ -58,9 +54,9 @@ export const useGridDataSourceBase = ( apiRef.current.setStrategyAvailability( GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.Default, - props.unstable_dataSource ? () => true : () => false, + props.dataSource ? () => true : () => false, ); - }, [apiRef, props.unstable_dataSource]); + }, [apiRef, props.dataSource]); const [defaultRowsUpdateStrategyActive, setDefaultRowsUpdateStrategyActive] = React.useState(false); @@ -68,7 +64,7 @@ export const useGridDataSourceBase = ( const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector); const lastRequestId = React.useRef(0); - const onDataSourceErrorProp = props.unstable_onDataSourceError; + const onDataSourceErrorProp = props.onDataSourceError; const cacheChunkManager = useLazyRef(() => { const sortedPageSizeOptions = props.pageSizeOptions @@ -79,12 +75,12 @@ export const useGridDataSourceBase = ( return new CacheChunkManager(cacheChunkSize); }).current; const [cache, setCache] = React.useState(() => - getCache(props.unstable_dataSourceCache, options.cacheOptions), + getCache(props.dataSourceCache, options.cacheOptions), ); const fetchRows = React.useCallback( async (parentId, params) => { - const getRows = props.unstable_dataSource?.getRows; + const getRows = props.dataSource?.getRows; if (!getRows) { return; } @@ -152,8 +148,8 @@ export const useGridDataSourceBase = ( } else if (process.env.NODE_ENV !== 'production') { warnOnce( [ - 'MUI X: A call to `unstable_dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', - 'To handle the error pass a callback to the `unstable_onDataSourceError` prop, for example ` ...} />`.', + 'MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', + 'To handle the error pass a callback to the `onDataSourceError` prop, for example ` ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.', ], 'error', @@ -171,7 +167,7 @@ export const useGridDataSourceBase = ( cache, apiRef, defaultRowsUpdateStrategyActive, - props.unstable_dataSource?.getRows, + props.dataSource?.getRows, onDataSourceErrorProp, options, props.signature, @@ -209,7 +205,7 @@ export const useGridDataSourceBase = ( ); const dataSourceApi: GridDataSourceApi = { - unstable_dataSource: { + dataSource: { fetchRows, cache, }, @@ -223,19 +219,19 @@ export const useGridDataSourceBase = ( isFirstRender.current = false; return; } - if (props.unstable_dataSourceCache === undefined) { + if (props.dataSourceCache === undefined) { return; } - const newCache = getCache(props.unstable_dataSourceCache, options.cacheOptions); + const newCache = getCache(props.dataSourceCache, options.cacheOptions); setCache((prevCache) => (prevCache !== newCache ? newCache : prevCache)); - }, [props.unstable_dataSourceCache, options.cacheOptions]); + }, [props.dataSourceCache, options.cacheOptions]); React.useEffect(() => { - if (props.unstable_dataSource) { - apiRef.current.unstable_dataSource.cache.clear(); - apiRef.current.unstable_dataSource.fetchRows(); + if (props.dataSource) { + apiRef.current.dataSource.cache.clear(); + apiRef.current.dataSource.fetchRows(); } - }, [apiRef, props.unstable_dataSource]); + }, [apiRef, props.dataSource]); return { api: { public: dataSourceApi }, diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts index e1a90de774c29..576fbfc2456ae 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts @@ -68,7 +68,7 @@ export interface GridRowsState { /** * Contains some values of type `GridRowId` that have been requested to be fetched * either by `defaultGroupingExpansionDepth` or `isGroupExpandedByDefault` props. - * Applicable with server-side grouped data and `unstable_dataSource` only. + * Applicable with server-side grouped data and `dataSource` only. */ groupsToFetch?: GridRowId[]; } diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts index 726b5dd09617f..e6f5c91424205 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -45,9 +45,9 @@ import { useGridRegisterPipeApplier } from '../../core/pipeProcessing'; import { GridStrategyGroup } from '../../core/strategyProcessing'; export const rowsStateInitializer: GridStateInitializer< - Pick + Pick > = (state, props, apiRef) => { - const isDataSourceAvailable = !!props.unstable_dataSource; + const isDataSourceAvailable = !!props.dataSource; apiRef.current.caches.rows = createRowsInternalCache({ rows: isDataSourceAvailable ? [] : props.rows, getRowId: props.getRowId, @@ -79,7 +79,7 @@ export const useGridRows = ( | 'pagination' | 'paginationMode' | 'loading' - | 'unstable_dataSource' + | 'dataSource' >, ): void => { if (process.env.NODE_ENV !== 'production') { @@ -525,20 +525,20 @@ export const useGridRows = ( throttledRowsChange, ]); - const previousDataSource = useLazyRef(() => props.unstable_dataSource); + const previousDataSource = useLazyRef(() => props.dataSource); const handleStrategyProcessorChange = React.useCallback< GridEventListener<'activeStrategyProcessorChange'> >( (methodName) => { - if (props.unstable_dataSource && props.unstable_dataSource !== previousDataSource.current) { - previousDataSource.current = props.unstable_dataSource; + if (props.dataSource && props.dataSource !== previousDataSource.current) { + previousDataSource.current = props.dataSource; return; } if (methodName === 'rowTreeCreation') { groupRows(); } }, - [groupRows, previousDataSource, props.unstable_dataSource], + [groupRows, previousDataSource, props.dataSource], ); const handleStrategyActivityChange = React.useCallback< @@ -609,7 +609,7 @@ export const useGridRows = ( lastRowCount.current = props.rowCount; } - const currentRows = props.unstable_dataSource + const currentRows = props.dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows; const areNewRowsAlreadyInState = @@ -661,7 +661,7 @@ export const useGridRows = ( props.rowCount, props.getRowId, props.loading, - props.unstable_dataSource, + props.dataSource, logger, throttledRowsChange, apiRef, diff --git a/packages/x-data-grid/src/internals/utils/propValidation.ts b/packages/x-data-grid/src/internals/utils/propValidation.ts index 36b8bca5ef769..68b8fe3b4215d 100644 --- a/packages/x-data-grid/src/internals/utils/propValidation.ts +++ b/packages/x-data-grid/src/internals/utils/propValidation.ts @@ -36,7 +36,7 @@ export const propValidatorsDataGrid: PropValidator[] = [ (props) => (props.paginationMode === 'server' && props.rowCount == null && - !props.unstable_dataSource && + !props.dataSource && [ "MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination', diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index c9b51a7bc8034..7414a93bfdbcf 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -419,6 +419,14 @@ export interface DataGridPropsWithoutDefaultValue; + /** + * The data source object. + */ + dataSource?: GridDataSource; + /** + * Data source cache object. + */ + dataSourceCache?: GridDataSourceCache | null; /** * Set the density of the Data Grid. * @default "standard" @@ -502,6 +510,11 @@ export interface DataGridPropsWithoutDefaultValue} event The event that caused this prop to be called. */ onCellEditStop?: GridEventListener<'cellEditStop'>; + /** + * Callback fired when a data source request fails. + * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. + */ + onDataSourceError?: (error: GridGetRowsError | GridUpdateRowError) => void; /** * Callback fired when the row turns to edit mode. * @param {GridRowParams} params With all properties from [[GridRowParams]]. @@ -836,19 +849,6 @@ export interface DataGridPropsWithoutDefaultValue; - /** - * The data source object. - */ - unstable_dataSource?: GridDataSource; - /** - * Data source cache object. - */ - unstable_dataSourceCache?: GridDataSourceCache | null; - /** - * Callback fired when a data source request fails. - * @param {GridGetRowsError | GridUpdateRowError} error The data source error object. - */ - unstable_onDataSourceError?: (error: GridGetRowsError | GridUpdateRowError) => void; } export interface DataGridProSharedPropsWithDefaultValue { diff --git a/packages/x-data-grid/src/tests/dataSource.DataGrid.test.tsx b/packages/x-data-grid/src/tests/dataSource.DataGrid.test.tsx index 00b0caf5b1540..8efcf4c5d62ad 100644 --- a/packages/x-data-grid/src/tests/dataSource.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/dataSource.DataGrid.test.tsx @@ -101,7 +101,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { - Data source', () => { it('should cache the data using the custom cache', async () => { const testCache = new TestCache(); - render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); @@ -212,10 +212,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { it('should cache the data in the chunks defined by the minimum page size', async () => { const testCache = new TestCache(); render( - , + , ); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); @@ -227,10 +224,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { const testCache = new TestCache(); const pageChangeSpy = spy(); render( - , + , ); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); @@ -263,9 +257,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { it('should allow to disable the default cache', async () => { const pageChangeSpy = spy(); - render( - , - ); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); @@ -292,9 +284,9 @@ describeSkipIf(isJSDOM)(' - Data source', () => { }); describe('Error handling', () => { - it('should call `unstable_onDataSourceError` when the data source returns an error', async () => { + it('should call `onDataSourceError` when the data source returns an error', async () => { const onDataSourceError = spy(); - render(); + render(); await waitFor(() => { expect(onDataSourceError.callCount).to.equal(1); });