[data grid][docs] Improve Server-side data docs (#11589)

docs/data/charts/funnel/funnel.md

@@ -2,7 +2,7 @@
 title: React Funnel chart
 ---
 
-# Charts - Funnel [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Charts - Funnel [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Funnel charts allows to express quantity evolution along a process, such as audience engagement.</p>
 

docs/data/charts/gantt/gantt.md

@@ -2,7 +2,7 @@
 title: React Gantt chart
 ---
 
-# Charts - Gantt [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Charts - Gantt [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Gantt charts can illustrate a schedule and the relationships between its various activities.</p>
 

docs/data/charts/gauge/gauge.md

@@ -2,7 +2,7 @@
 title: React Gauge chart
 ---
 
-# Charts - Gauge
+# Charts - Gauge 🚧
 
 <p class="description">Gauge chart allows to evaluate a metric.</p>
 

docs/data/charts/heat-map/heat-map.md

@@ -2,7 +2,7 @@
 title: React Heat map chart
 ---
 
-# Charts - Heat map
+# Charts - Heat map 🚧
 
 <p class="description">Heat map charts allows to highlight correlation between categories.</p>
 

docs/data/charts/radar/radar.md

@@ -2,7 +2,7 @@
 title: React Radar chart
 ---
 
-# Charts - Radar
+# Charts - Radar 🚧
 
 <p class="description">Radar allows to compare multivariate data in a 2D chart.</p>
 

docs/data/charts/sankey/sankey.md

@@ -2,7 +2,7 @@
 title: React Sankey chart
 ---
 
-# Charts - Sankey [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Charts - Sankey [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Sankey charts are great for visualizing flows between different elements.</p>
 

docs/data/charts/tree-map/tree-map.md

@@ -2,7 +2,7 @@
 title: React Tree map chart
 ---
 
-# Charts - Treemap
+# Charts - Treemap 🚧
 
 <p class="description">Treemap allows to display data with a hierarchical structure.</p>
 

docs/data/data-grid/server-side-data/aggregation.md

@@ -2,7 +2,7 @@
 title: React Server-side row grouping
 ---
 
-# Data Grid - Server-side aggregation 🚧
+# Data Grid - Server-side aggregation [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')🚧
 
 <p class="description">Aggregation with server side data source.</p>
 

docs/data/data-grid/server-side-data/index.md

@@ -2,9 +2,9 @@
 title: React Data Grid - Server-side data
 ---
 
-# Data Grid - Server-side data
+# Data Grid - Server-side data 🚧
 
-<p class="description">The data grid server-side data</p>
+<p class="description">The data grid server-side data.</p>
 
 ## Overview
 
@@ -26,9 +26,7 @@ const [paginationModel, setPaginationModel] = React.useState({
   page: 0,
   pageSize: 10,
 });
-const [filterModel, setFilterModel] = React.useState({
-  items: [],
-});
+const [filterModel, setFilterModel] = React.useState({ items: [] });
 const [sortModel, setSortModel] = React.useState([]);
 
 React.useEffect(() => {
@@ -98,7 +96,7 @@ interface DataSource {
     Fetcher Functions:
     - `getRows` is required
     - `updateRow` is optional
-    
+
     `getRows` will be used by the grid to fetch data for the current page or children for the current parent group
     It may return a `rowCount` to update the total count of rows in the grid
   */

docs/data/data-grid/server-side-data/infinite-loading.md

@@ -2,7 +2,7 @@
 title: React Server-side infinite loading
 ---
 
-# Data Grid - Server-side infinite loading 🚧
+# Data Grid - Server-side infinite loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Row infinite loading with server side data source.</p>
 

docs/data/data-grid/server-side-data/lazy-loading.md

@@ -2,7 +2,7 @@
 title: React Server-side lazy loading
 ---
 
-# Data Grid - Server-side lazy loading 🚧
+# Data Grid - Server-side lazy loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Row lazy-loading with server side data source.</p>
 

docs/data/data-grid/server-side-data/row-grouping.md

@@ -2,7 +2,7 @@
 title: React Server-side row grouping
 ---
 
-# Data Grid - Server-side row grouping 🚧
+# Data Grid - Server-side row grouping [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Lazy-loaded row grouping with server side data source.</p>
 

docs/data/data-grid/server-side-data/tree-data.md

@@ -2,7 +2,7 @@
 title: React Server-side tree data
 ---
 
-# Data Grid - Server-side tree data 🚧
+# Data Grid - Server-side tree data [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
 <p class="description">Tree data lazy-loading with server side data source.</p>
 

docs/data/pages.ts

@@ -51,7 +51,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-data-grid/row-definition' },
           { pathname: '/x/react-data-grid/row-updates' },
           { pathname: '/x/react-data-grid/row-height' },
-          { pathname: '/x/react-data-grid/row-spanning', title: 'Row spanning 🚧' },
+          { pathname: '/x/react-data-grid/row-spanning', title: 'Row spanning', planned: true },
           { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
           { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' },
           { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' },
@@ -109,39 +109,49 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-data-grid/tree-data', plan: 'pro' },
           { pathname: '/x/react-data-grid/row-grouping', plan: 'premium' },
           { pathname: '/x/react-data-grid/aggregation', title: 'Aggregation', plan: 'premium' },
-          { pathname: '/x/react-data-grid/pivoting', title: 'Pivoting 🚧', plan: 'premium' },
+          {
+            pathname: '/x/react-data-grid/pivoting',
+            title: 'Pivoting',
+            plan: 'premium',
+            planned: true,
+          },
         ],
       },
       {
         pathname: '/x/react-data-grid/server-side-data-group',
-        title: 'Server-side data 🚧',
-        plan: 'pro',
+        title: 'Server-side data',
+        planned: true,
         children: [
-          { pathname: '/x/react-data-grid/server-side-data', title: 'Overview' },
+          { pathname: '/x/react-data-grid/server-side-data', title: 'Overview', planned: true },
           {
             pathname: '/x/react-data-grid/server-side-data/lazy-loading',
-            title: 'Lazy loading 🚧',
+            title: 'Lazy loading',
             plan: 'pro',
+            planned: true,
           },
           {
             pathname: '/x/react-data-grid/server-side-data/infinite-loading',
-            title: 'Infinite loading 🚧',
+            title: 'Infinite loading',
             plan: 'pro',
+            planned: true,
           },
           {
             pathname: '/x/react-data-grid/server-side-data/tree-data',
-            title: 'Tree data 🚧',
+            title: 'Tree data',
             plan: 'pro',
+            planned: true,
           },
           {
             pathname: '/x/react-data-grid/server-side-data/row-grouping',
-            title: 'Row grouping 🚧',
+            title: 'Row grouping',
             plan: 'pro',
+            planned: true,
           },
           {
             pathname: '/x/react-data-grid/server-side-data/aggregation',
-            title: 'Aggregation 🚧',
+            title: 'Aggregation',
             plan: 'premium',
+            planned: true,
           },
         ],
       },

packages/grid/x-data-grid-pro/src/models/dataSource.ts

@@ -10,38 +10,38 @@ interface GetRowsParams {
   sortModel: GridSortModel;
   filterModel: GridFilterModel;
   /**
-   * Alternate to `start` and `end`, maps to `GridPaginationModel` interface
+   * Alternate to `start` and `end`, maps to `GridPaginationModel` interface.
    */
   paginationModel: GridPaginationModel;
   /**
-   * First row index to fetch (number) or cursor information (number | string)
+   * First row index to fetch (number) or cursor information (number | string).
    */
-  start: number | string; // first row index to fetch or cursor information
+  start: number | string;
   /**
-   * Last row index to fetch
+   * Last row index to fetch.
    */
   end: number; // last row index to fetch
   /**
    * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
-   * `getGroupKey` prop must be implemented to use this
-   * Useful for `treeData` and `rowGrouping` only
+   * `getGroupKey` prop must be implemented to use this.
+   * Useful for `treeData` and `rowGrouping` only.
    */
   groupKeys: string[];
   /**
-   * List of grouped columns (only applicable with `rowGrouping`)
+   * List of grouped columns (only applicable with `rowGrouping`).
    */
-  groupFields: GridColDef['field'][]; // list of grouped columns (`rowGrouping`)
+  groupFields: GridColDef['field'][];
 }
 
 interface GetRowsResponse {
   rows: GridRowModel[];
   /**
-   * To reflect updates in total `rowCount` (optional)
-   * Useful when the `rowCount` is inaccurate (e.g. when filtering) or not available upfront
+   * To reflect updates in total `rowCount` (optional).
+   * Useful when the `rowCount` is inaccurate (e.g. when filtering) or not available upfront.
    */
   rowCount?: number;
   /**
-   * Additional `pageInfo` to help the grid determine if there are more rows to fetch (corner-cases)
+   * Additional `pageInfo` to help the grid determine if there are more rows to fetch (corner-cases).
    * `hasNextPage`: When row count is unknown/inaccurate, if `truncated` is set or rowCount is not known, data will keep loading until `hasNextPage` is `false`
    * `truncated`: To reflect `rowCount` is inaccurate (will trigger `x-y of many` in pagination after the count of rows fetched is greater than provided `rowCount`)
    * It could be useful with:
@@ -60,13 +60,13 @@ interface GetRowsResponse {
 
 export interface DataSource {
   /**
-    Fetcher Functions:
-    - `getRows` is required
-    - `updateRow` is optional
-    
-    `getRows` will be used by the grid to fetch data for the current page or children for the current parent group
-    It may return a `rowCount` to update the total count of rows in the grid along with the optional `pageInfo`
-  */
+   * Fetcher Functions:
+   * - `getRows` is required
+   * - `updateRow` is optional
+   *
+   * `getRows` will be used by the grid to fetch data for the current page or children for the current parent group.
+   * It may return a `rowCount` to update the total count of rows in the grid along with the optional `pageInfo`.
+   */
   getRows(params: GetRowsParams): Promise<GetRowsResponse>;
   updateRow?(rows: GridRowModel): Promise<any>;
 }