[DataGrid] Initial Selection

docs/pages/api/data-grid.md

@@ -33,10 +33,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">defaultRowsPerPage</span> | <span class="prop-type">number</span> | <span class="prop-default">50</span> | The initial rows per page size. Must be one of the paginationPageSize options. |
 | <span class="prop-name">defaultSorting</span> | <span class="prop-type">Array&lt;{ field: string, sort: 'asc'<br>&#124;&nbsp;'desc' }&gt;</span> | <span class="prop-default">[]</span> | The default sorting state. (Uncontrolled) |
 | <span class="prop-name">loading</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the loading state is displayed. If `false` the component shows the loading state, while it waits for new data being loaded. |
+| <span class="prop-name">onSelectionChange</span> | <span class="prop-type">func</span> |  | Callback fired when the user change the row selection.<br><br>**Signature:**<br>`function(event: object, value: undefined) => void`<br>*event:* The event source of the callback.<br>*value:* The new selected row indexes. |
 | <span class="prop-name">onSortingChange</span> | <span class="prop-type">func</span> |  | Callback fired when the user change the column sort.<br><br>**Signature:**<br>`function(event: object, value: SortingType) => void`<br>*event:* The event source of the callback.<br>*value:* The new sorting value. |
 | <span class="prop-name">pagination</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the pagination is enabled. |
 | <span class="prop-name">paginationRowsPerPageOptions</span> | <span class="prop-type">Array&lt;number<br>&#124;&nbsp;{ label: string, value: number }&gt;</span> | <span class="prop-default">[10, 25, 50, 100, 250, 500]</span> | The possible pagination size options to be selected by the user. |
 | <span class="prop-name">rowsData</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | The data record array to be rendered. |
+| <span class="prop-name">selection</span> | <span class="prop-type">'checkbox'<br>&#124;&nbsp;'row'</span> |  | The type of selection for the rows. |
 | <span class="prop-name">sorting</span> | <span class="prop-type">Array&lt;{ field: string, sort: 'asc'<br>&#124;&nbsp;'desc' }&gt;</span> |  | Sorting state. (Controlled) |
 | <span class="prop-name">text</span> | <span class="prop-type">any</span> | <span class="prop-default">{  loading: 'Loading',  reload: 'Reload',}</span> | The localization strings. |
 
@@ -52,9 +54,12 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiDataGrid-root</span> | Styles applied to the root element.
-| <span class="prop-name">bodyContainer</span> | <span class="prop-name">.MuiDataGrid-bodyContainer</span> |
-| <span class="prop-name">headerLabel</span> | <span class="prop-name">.MuiDataGrid-headerLabel</span> |
-| <span class="prop-name">resize</span> | <span class="prop-name">.MuiDataGrid-resize</span> |
+| <span class="prop-name">bodyContainer</span> | <span class="prop-name">.MuiDataGrid-bodyContainer</span> | 
+| <span class="prop-name">headerLabel</span> | <span class="prop-name">.MuiDataGrid-headerLabel</span> | 
+| <span class="prop-name">resize</span> | <span class="prop-name">.MuiDataGrid-resize</span> | 
+| <span class="prop-name">selectedRow</span> | <span class="prop-name">.MuiDataGrid-selectedRow</span> | 
+| <span class="prop-name">selectionRow</span> | <span class="prop-name">.MuiDataGrid-selectionRow</span> | 
+| <span class="prop-name">actionHeader</span> | <span class="prop-name">.MuiDataGrid-actionHeader</span> | 
 
 You can override the style of the component thanks to one of these customization points:
 

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+import FormLabel from '@material-ui/core/FormLabel';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Switch from '@material-ui/core/Switch';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(100)).map(() => ({
+  name: chance.name(),
+  phone: chance.phone(),
+  address: chance.address(),
+  country: chance.country(),
+  rating: chance.integer({ min: 1, max: 5 }),
+}));
+
+const columns = [
+  { field: 'name', label: 'Name' },
+  { field: 'rating', label: 'Rating' },
+  { field: 'address', label: 'Address' },
+  { field: 'phone', label: 'Phone' },
+  { field: 'country', label: 'Country' },
+];
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > *': {
+        width: '100%',
+        maxHeight: 200,
+      },
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function SelectionGrid() {
+  const classes = useStyles();
+  const [selectionType, setSelectionType] = React.useState('checkbox');
+  return (
+    <div className={classes.root}>
+      <DataGrid rowsData={data} columns={columns} selection={selectionType} />
+      <Paper className={classes.control}>
+        <Grid container>
+          <Grid item>
+            <FormLabel>Multiple Selection</FormLabel>
+            <Switch
+              checked={selectionType === 'multiple, checkbox'}
+              onChange={e => {
+                setSelectionType(e.target.checked ? 'multiple, checkbox' : 'checkbox');
+              }}
+              value="Select Multiple Rows"
+              color="primary"
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+import FormLabel from '@material-ui/core/FormLabel';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Switch from '@material-ui/core/Switch';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(100)).map(() => ({
+  name: chance.name(),
+  phone: chance.phone(),
+  address: chance.address(),
+  country: chance.country(),
+  rating: chance.integer({ min: 1, max: 5 }),
+}));
+
+const columns = [
+  { field: 'name', label: 'Name' },
+  { field: 'rating', label: 'Rating' },
+  { field: 'address', label: 'Address' },
+  { field: 'phone', label: 'Phone' },
+  { field: 'country', label: 'Country' },
+];
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > *': {
+        width: '100%',
+        maxHeight: 200,
+      },
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function SelectionGrid() {
+  const classes = useStyles();
+  const [selectionType, setSelectionType] = React.useState<'multiple, checkbox' | 'checkbox'>(
+    'checkbox',
+  );
+  return (
+    <div className={classes.root}>
+      <DataGrid rowsData={data} columns={columns} selection={selectionType} />
+      <Paper className={classes.control}>
+        <Grid container>
+          <Grid item>
+            <FormLabel>Multiple Selection</FormLabel>
+            <Switch
+              checked={selectionType === 'multiple, checkbox'}
+              onChange={e => {
+                setSelectionType(e.target.checked ? 'multiple, checkbox' : 'checkbox');
+              }}
+              value="Select Multiple Rows"
+              color="primary"
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+import FormLabel from '@material-ui/core/FormLabel';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Switch from '@material-ui/core/Switch';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(100)).map(() => ({
+  name: chance.name(),
+  phone: chance.phone(),
+  address: chance.address(),
+  country: chance.country(),
+  rating: chance.integer({ min: 1, max: 5 }),
+}));
+
+const columns = [
+  { field: 'name', label: 'Name' },
+  { field: 'rating', label: 'Rating' },
+  { field: 'address', label: 'Address' },
+  { field: 'phone', label: 'Phone' },
+  { field: 'country', label: 'Country' },
+];
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > *': {
+        width: '100%',
+        maxHeight: 200,
+      },
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function SelectionGrid() {
+  const classes = useStyles();
+  const [selectionType, setSelectionType] = React.useState('row');
+  return (
+    <div className={classes.root}>
+      <DataGrid rowsData={data} columns={columns} selection={selectionType} />
+      <Paper className={classes.control}>
+        <Grid container>
+          <Grid item>
+            <FormLabel>Multiple Selection</FormLabel>
+            <Switch
+              checked={selectionType === 'multiple, row'}
+              onChange={e => {
+                setSelectionType(e.target.checked ? 'multiple, row' : 'row');
+              }}
+              value="Select Multiple Rows"
+              color="primary"
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+import FormLabel from '@material-ui/core/FormLabel';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Switch from '@material-ui/core/Switch';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(100)).map(() => ({
+  name: chance.name(),
+  phone: chance.phone(),
+  address: chance.address(),
+  country: chance.country(),
+  rating: chance.integer({ min: 1, max: 5 }),
+}));
+
+const columns = [
+  { field: 'name', label: 'Name' },
+  { field: 'rating', label: 'Rating' },
+  { field: 'address', label: 'Address' },
+  { field: 'phone', label: 'Phone' },
+  { field: 'country', label: 'Country' },
+];
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > *': {
+        width: '100%',
+        maxHeight: 200,
+      },
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function SelectionGrid() {
+  const classes = useStyles();
+  const [selectionType, setSelectionType] = React.useState<'multiple, row' | 'row'>('row');
+  return (
+    <div className={classes.root}>
+      <DataGrid rowsData={data} columns={columns} selection={selectionType} />
+      <Paper className={classes.control}>
+        <Grid container>
+          <Grid item>
+            <FormLabel>Multiple Selection</FormLabel>
+            <Switch
+              checked={selectionType === 'multiple, row'}
+              onChange={e => {
+                setSelectionType(e.target.checked ? 'multiple, row' : 'row');
+              }}
+              value="Select Multiple Rows"
+              color="primary"
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

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

@@ -18,12 +18,17 @@ components: DataGrid
 - https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-rowselection.htm
 - http://tabulator.info/docs/4.5/select#setup-range
 
+
+{{"demo": "pages/components/data-grid/selection/RowSelection.js", "bg": "inline"}}
+
 ## Checkbox selection
 
 - 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
 
+{{"demo": "pages/components/data-grid/selection/CheckboxSelection.js", "bg": "inline"}}
+
 ## Range selection <img src="/static/images/logos/enterprise.svg" width="24" height="24" alt="enterprise feature" loading="lazy" />
 
 - https://ag-grid.com/javascript-grid-range-selection/

packages/material-ui-lab/src/DataGrid/DataGrid.d.ts

@@ -89,6 +89,18 @@ export interface DataGridProps
    * The data record array to be rendered.
    */
   rowsData?: any[];
+  /**
+   * The type of selection for the rows.
+   *
+   */
+  selection?: "row" | "checkbox" | "multiple, row" | "multiple, checkbox";
+  /**
+   * Callback fired when the user change the row selection.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {number[]} value The new selected rows.
+   */
+  onSelectionChange?: (event: React.ChangeEvent<{}>, selectedRows: any[]) => void;
 }
 
 export type DataGridClassKey = 'root';