[DataGrid] Improve controllable sorting

docs/pages/api-docs/data-grid/data-grid.md

@@ -83,7 +83,7 @@ import { DataGrid } from '@material-ui/data-grid';
 | <span class="prop-name">onRowEnter</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter comes from a row container element. |
 | <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a row container element. |
 | <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
-| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
+| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(model: GridSortModel) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1   |  Set the current page. |
 | <span class="prop-name">pageSize</span> | <span class="prop-type">number</span> | 100 | Set the number of rows in one page. |
 | <span class="prop-name">paginationMode</span> | <span class="prop-type">GridFeatureMode</span> | 'client' | Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side. |

docs/pages/api-docs/data-grid/x-grid.md

@@ -89,7 +89,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a row container element. |
 | <span class="prop-name">onRowsScrollEnd</span> | <span class="prop-type">(param: GridRowScrollEndParams) => void</span> |   | Callback fired when scrolling to the bottom of the grid viewport. |
 | <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
-| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
+| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(model: GridSortModel) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1   |  Set the current page. |
 | <span class="prop-name">pageSize</span> | <span class="prop-type">number</span> | 100 | Set the number of rows in one page. |
 | <span class="prop-name">pagination</span> | <span class="prop-type">boolean</span> | false | If `true`, pagination is enabled. |

docs/src/pages/components/data-grid/sorting/BasicSortingGrid.js

@@ -9,16 +9,19 @@ export default function BasicSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState([
+    {
+      field: 'commodity',
+      sort: 'asc',
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc',
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
       />
     </div>
   );

docs/src/pages/components/data-grid/sorting/BasicSortingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridSortDirection } from '@material-ui/data-grid';
+import { DataGrid, GridSortModel } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 export default function BasicSortingGrid() {
@@ -9,16 +9,19 @@ export default function BasicSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState<GridSortModel>([
+    {
+      field: 'commodity',
+      sort: 'asc',
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc' as GridSortDirection,
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
       />
     </div>
   );

docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.js

@@ -68,17 +68,22 @@ const rows = [
   },
 ];
 
-const sortModel = [
-  {
-    field: 'username',
-    sort: 'asc',
-  },
-];
-
 export default function ComparatorSortingGrid() {
+  const [sortModel, setSortModel] = React.useState([
+    {
+      field: 'username',
+      sort: 'asc',
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid sortModel={sortModel} rows={rows} columns={columns} />
+      <DataGrid
+        sortModel={sortModel}
+        rows={rows}
+        columns={columns}
+        onSortModelChange={(model) => setSortModel(model)}
+      />
     </div>
   );
 }

docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.tsx

@@ -5,6 +5,7 @@ import {
   DataGrid,
   GridSortDirection,
   GridValueGetterParams,
+  GridSortModel,
 } from '@material-ui/data-grid';
 import {
   randomCreatedDate,
@@ -74,17 +75,21 @@ const rows: GridRowsProp = [
   },
 ];
 
-const sortModel = [
-  {
-    field: 'username',
-    sort: 'asc' as GridSortDirection,
-  },
-];
-
 export default function ComparatorSortingGrid() {
+  const [sortModel, setSortModel] = React.useState<GridSortModel>([
+    {
+      field: 'username',
+      sort: 'asc' as GridSortDirection,
+    },
+  ]);
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid sortModel={sortModel} rows={rows} columns={columns} />
+      <DataGrid
+        sortModel={sortModel}
+        rows={rows}
+        columns={columns}
+        onSortModelChange={(model) => setSortModel(model)}
+      />
     </div>
   );
 }

docs/src/pages/components/data-grid/sorting/MultiSortingGrid.js

@@ -9,20 +9,23 @@ export default function MultiSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState([
+    {
+      field: 'commodity',
+      sort: 'asc',
+    },
+    {
+      field: 'desk',
+      sort: 'desc',
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <XGrid
         {...data}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc',
-          },
-          {
-            field: 'desk',
-            sort: 'desc',
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
       />
     </div>
   );

docs/src/pages/components/data-grid/sorting/MultiSortingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { XGrid, GridSortDirection } from '@material-ui/x-grid';
+import { XGrid, GridSortDirection, GridSortModel } from '@material-ui/x-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 export default function MultiSortingGrid() {
@@ -9,20 +9,23 @@ export default function MultiSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState<GridSortModel>([
+    {
+      field: 'commodity',
+      sort: 'asc' as GridSortDirection,
+    },
+    {
+      field: 'desk',
+      sort: 'desc' as GridSortDirection,
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <XGrid
         {...data}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc' as GridSortDirection,
-          },
-          {
-            field: 'desk',
-            sort: 'desc' as GridSortDirection,
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
       />
     </div>
   );

docs/src/pages/components/data-grid/sorting/OrderSortingGrid.js

@@ -9,16 +9,19 @@ export default function OrderSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState([
+    {
+      field: 'commodity',
+      sort: 'asc',
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         sortingOrder={['desc', 'asc']}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc',
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
         {...data}
       />
     </div>

docs/src/pages/components/data-grid/sorting/OrderSortingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridSortDirection } from '@material-ui/data-grid';
+import { DataGrid, GridSortDirection, GridSortModel } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 export default function OrderSortingGrid() {
@@ -9,16 +9,19 @@ export default function OrderSortingGrid() {
     maxColumns: 6,
   });
 
+  const [sortModel, setSortModel] = React.useState<GridSortModel>([
+    {
+      field: 'commodity',
+      sort: 'asc' as GridSortDirection,
+    },
+  ]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         sortingOrder={['desc', 'asc']}
-        sortModel={[
-          {
-            field: 'commodity',
-            sort: 'asc' as GridSortDirection,
-          },
-        ]}
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
         {...data}
       />
     </div>

docs/src/pages/components/data-grid/sorting/ServerSortingGrid.js

@@ -39,10 +39,8 @@ export default function ServerSortingGrid() {
   const [rows, setRows] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
 
-  const handleSortModelChange = (params) => {
-    if (params.sortModel !== sortModel) {
-      setSortModel(params.sortModel);
-    }
+  const handleSortModelChange = (newModel) => {
+    setSortModel(newModel);
   };
 
   React.useEffect(() => {

docs/src/pages/components/data-grid/sorting/ServerSortingGrid.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  GridRowsProp,
-  DataGrid,
-  GridSortModel,
-  GridSortModelParams,
-} from '@material-ui/data-grid';
+import { GridRowsProp, DataGrid, GridSortModel } from '@material-ui/data-grid';
 import { useDemoData, GridData } from '@material-ui/x-grid-data-generator';
 
 function loadServerRows(sortModel: GridSortModel, data: GridData): Promise<any> {
@@ -42,10 +37,8 @@ export default function ServerSortingGrid() {
   const [rows, setRows] = React.useState<GridRowsProp>([]);
   const [loading, setLoading] = React.useState<boolean>(false);
 
-  const handleSortModelChange = (params: GridSortModelParams) => {
-    if (params.sortModel !== sortModel) {
-      setSortModel(params.sortModel);
-    }
+  const handleSortModelChange = (newModel: GridSortModel) => {
+    setSortModel(newModel);
   };
 
   React.useEffect(() => {