[docs] Migrate more pages

docs/src/pages.js

@@ -74,7 +74,6 @@ const pages = [
         subheader: '/components/foo',
         children: [
           { pathname: '/components/data-grid/getting-started' },
-          { pathname: '/components/data-grid/selection' },
           { pathname: '/components/data-grid/rendering' },
         ],
       },
@@ -152,7 +151,7 @@ const pages = [
                 { pathname: '/components/data-grid/404', title: '🚧 Data' },
                 { pathname: '/components/data-grid/filtering', title: '🚧 Filtering' },
                 { pathname: '/components/data-grid/pagination' },
-                { pathname: '/components/data-grid/404', title: '🚧 Selection' },
+                { pathname: '/components/data-grid/selection' },
                 { pathname: '/components/data-grid/editing', title: '🚧 Editing' },
                 { pathname: '/components/data-grid/404', title: '🚧 Rendering' },
                 { pathname: '/components/data-grid/export', title: '🚧 Export & Import' },
@@ -170,7 +169,7 @@ const pages = [
                 { pathname: '/components/data-grid/rows' },
                 { pathname: '/components/data-grid/filtering', title: '🚧 Filtering' },
                 { pathname: '/components/data-grid/pagination' },
-                { pathname: '/components/data-grid/selection', title: '🚧 Selection' },
+                { pathname: '/components/data-grid/selection' },
                 { pathname: '/components/data-grid/editing', title: '🚧 Editing' },
                 { pathname: '/components/data-grid/rendering', title: '🚧 Rendering' },
                 { pathname: '/components/data-grid/export', title: '🚧 Export & Import' },

docs/src/pages/components/data-grid/accessibility/accessibility.md

@@ -51,12 +51,13 @@ Use the arrow keys to move the focus.
 | <kbd>Shift</kbd> + <kbd>Space</kbd> + <kbd>Arrow Up/Down</kbd> | Select the current row and the row above or below |
 |                                 <kbd>CTRL</kbd> + <kbd>A</kbd> | Select all rows                                   |
 |                                 <kbd>CTRL</kbd> + <kbd>C</kbd> | Copy the currently selected row                   |
+|                                <kbd>CTRL</kbd> + Click on cell | Enable multi-selection                            |
 
 ### Sorting
 
-|                    Keys | Description          |
-| ----------------------: | :------------------- |
-| <kbd>CTRL</kbd> + Click | Enable multi-sorting |
+|                              Keys | Description          |
+| --------------------------------: | :------------------- |
+| <kbd>CTRL</kbd> + Click on header | Enable multi-sorting |
 
 ### Key assignment conventions
 

docs/src/pages/components/data-grid/pagination/pagination.md

@@ -54,10 +54,10 @@ The grid exposes a set of methods that enables all of these features using the i
 
 > ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
 
-- `setPageSize`
-- `setPage`
-- `onPageChange`
-- `onPageSizeChange`
+- `setPageSize`: Set the number of rows in one page.
+- `setPage`: Set the displayed page.
+- `onPageChange`: Callback fired after a new page has been displayed.
+- `onPageSizeChange`: Callback fired after the page size was changed.
 
 Below is an example on how you can reset the page using the imperative `setPage` method.
 

docs/src/pages/components/data-grid/rows/rows.md

@@ -114,9 +114,9 @@ The grid exposes a set of methods that enables all of these features using the i
 
 > ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
 
-- `getSortModel`
-- `setSortModel`
-- `onSortModelChange`
+- `getSortModel`: Get the sort model currently applied in the grid.
+- `setSortModel`: Set the sort model of the component and trigger a new sorting of rows.
+- `onSortModelChange`: Callback fired when the columns sorting changed before the grid has sorted its rows.
 
 ### Multi-column sorting ⚡️
 

docs/src/pages/components/data-grid/selection/CheckboxSelectionGrid.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function CheckboxSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid checkboxSelection {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/CheckboxSelectionGrid.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function CheckboxSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid checkboxSelection {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ControlledSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  // TODO /~https://github.com/mui-org/material-ui-x/issues/246
+  const [, setSelection] = React.useState([]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        checkboxSelection
+        onSelectionChange={(newSelection) => {
+          setSelection(newSelection.rows);
+        }}
+        {...data}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid, RowData } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ControlledSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  // TODO /~https://github.com/mui-org/material-ui-x/issues/246
+  const [, setSelection] = React.useState<RowData[]>([]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        checkboxSelection
+        onSelectionChange={(newSelection) => {
+          setSelection(newSelection.rows);
+        }}
+        {...data}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/DisableClickSelectionGrid.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function DisableClickSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        checkboxSelection
+        {...data}
+        columns={data.columns.map((column) => ({
+          ...column,
+          disableClickEventBubbling: true,
+        }))}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/DisableClickSelectionGrid.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function DisableClickSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        checkboxSelection
+        {...data}
+        columns={data.columns.map((column) => ({
+          ...column,
+          disableClickEventBubbling: true,
+        }))}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function MultipleRowSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function MultipleRowSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/SingleRowSelectionGrid.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function SingleRowSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/SingleRowSelectionGrid.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function SingleRowSelectionGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/selection/selection.md

@@ -5,10 +5,11 @@ components: DataGrid, XGrid
 
 # Data Grid - Selection
 
-<p class="description">Selection allows end-users to select and highlight a number of rows that you can then take action on.</p>
+<p class="description">Selection allows end-users to select and highlight a number of rows that they can then take action on.</p>
 
 ## Row selection
 
+<!--
 - https://ag-grid.com/javascript-grid-selection/
 - https://ej2.syncfusion.com/react/demos/#/material/grid/selection
 - https://ant.design/components/table/#components-table-demo-row-selection
@@ -20,6 +21,46 @@ components: DataGrid, XGrid
 - https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/selection/
 - https://ej2.syncfusion.com/react/demos/#/material/grid/checkbox-selection
 - https://demos.telerik.com/kendo-ui/grid/checkbox-selection
+-->
+
+Row selection can be performed with a simple mouse click or using the [keyboard shortcuts](/components/data-grid/accessibility/#selection). The grid supports single and multiple rows selection.
+
+### Single row selection
+
+Single row selection is enable by default with the `DataGrid` component.
+For the `XGrid`, you need to disable multiple row selection with `disableMultipleSelection={true}`.
+
+{{"demo": "pages/components/data-grid/selection/SingleRowSelectionGrid.js"}}
+
+### Multiple row selection ⚡️
+
+To activate multiple selection, put the focus on the `XGrid` component and maintain the <kbd>CTRL</kbd> key.
+
+{{"demo": "pages/components/data-grid/selection/MultipleRowSelectionGrid.js"}}
+
+## Checkbox selection
+
+To activate checkbox selection set `checkboxSelection={true}`.
+
+{{"demo": "pages/components/data-grid/selection/CheckboxSelectionGrid.js"}}
+
+## Disable selection on click
+
+You might have interactive content in the cells and need to disable the selection of the row on click. Use the `disableClickEventBubbling` option in this case.
+
+{{"demo": "pages/components/data-grid/selection/DisableClickSelectionGrid.js"}}
+
+## Controlled selection
+
+{{"demo": "pages/components/data-grid/selection/ControlledSelectionGrid.js"}}
+
+## apiRef
+
+The grid exposes a set of methods that enables all of these features using the imperative apiRef.
+
+> ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
+
+- `onSelectionChange`: Callback fired when one or multiple rows get their selection state change.
 
 ## 🚧 Range selection ⚡️
 

packages/grid/x-grid-modules/src/hooks/features/useSelection.ts

@@ -110,7 +110,7 @@ export const useSelection = (
 
   const selectRows = React.useCallback(
     (ids: RowId[], isSelected = true, deSelectOthers = false) => {
-      if (options.disableMultipleSelection && ids.length > 1) {
+      if (options.disableMultipleSelection && ids.length > 1 && !options.checkboxSelection) {
         throw new Error(
           'Material-UI: `disableMultipleSelection` should be false to select more than 1 item.',
         );
@@ -131,7 +131,14 @@ export const useSelection = (
       };
       apiRef.current.publishEvent(SELECTION_CHANGED, selectionChangeParam);
     },
-    [apiRef, selectedItemsRef, forceUpdate, options.disableMultipleSelection, getSelectedRows],
+    [
+      apiRef,
+      selectedItemsRef,
+      forceUpdate,
+      options.disableMultipleSelection,
+      getSelectedRows,
+      options.checkboxSelection,
+    ],
   );
 
   const rowClickHandler = React.useCallback(

packages/grid/x-grid-modules/src/models/api/paginationApi.ts

@@ -15,12 +15,12 @@ export interface PaginationApi {
    */
   setPageSize: (pageSize: number) => void;
   /**
-   * Handler that is triggered after a new page has been displayed
+   * Callback fired after a new page has been displayed.
    * @param handler
    */
   onPageChange: (handler: (param: PageChangeParams) => void) => () => void;
   /**
-   * Handler that is triggered after the page size was change
+   * Callback fired after the page size was changed.
    * @param handler
    */
   onPageSizeChange: (handler: (param: PageChangeParams) => void) => () => void;

packages/grid/x-grid-modules/src/models/api/selectionApi.ts

@@ -26,12 +26,12 @@ export interface SelectionApi {
    */
   getSelectedRows: () => RowModel[];
   /**
-   * Handler triggered after a row is selected.
+   * Callback fired after a row is selected.
    * @param handler
    */
   onRowSelected: (handler: (param: RowSelectedParams) => void) => () => void;
   /**
-   * Handler triggered after one or multiple rows had a selection state change.
+   * Callback fired after one or multiple rows had a selection state change.
    * @param handler
    */
   onSelectionChange: (handler: (param: SelectionChangeParams) => void) => () => void;