[DataGrid] Add single select column type (#1956)

Author: DanailH

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

@@ -13,6 +13,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: true,
+    country: 'Spain',
   },
   {
     id: 2,
@@ -21,6 +22,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: true,
+    country: 'France',
   },
   {
     id: 3,
@@ -29,6 +31,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: false,
+    country: 'Brazil',
   },
 ];
 
@@ -42,6 +45,19 @@ export default function ColumnTypesGrid() {
           { field: 'dateCreated', type: 'date', width: 130 },
           { field: 'lastLogin', type: 'dateTime', width: 180 },
           { field: 'isAdmin', type: 'boolean', width: 120 },
+          {
+            field: 'country',
+            type: 'singleSelect',
+            width: 150,
+            valueOptions: [
+              'Bulgaria',
+              'Netherlands',
+              'France',
+              'United Kingdom',
+              'Spain',
+              'Brazil',
+            ],
+          },
         ]}
         rows={rows}
       />

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js

@@ -13,6 +13,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: true,
+    country: 'Spain',
   },
   {
     id: 2,
@@ -21,6 +22,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: true,
+    country: 'France',
   },
   {
     id: 3,
@@ -29,6 +31,7 @@ const rows = [
     dateCreated: randomCreatedDate(),
     lastLogin: randomUpdatedDate(),
     isAdmin: false,
+    country: 'Brazil',
   },
 ];
 
@@ -42,6 +45,19 @@ export default function ColumnTypesGrid() {
           { field: 'dateCreated', type: 'date', width: 130 },
           { field: 'lastLogin', type: 'dateTime', width: 180 },
           { field: 'isAdmin', type: 'boolean', width: 120 },
+          {
+            field: 'country',
+            type: 'singleSelect',
+            width: 150,
+            valueOptions: [
+              'Bulgaria',
+              'Netherlands',
+              'France',
+              'United Kingdom',
+              'Spain',
+              'Brazil',
+            ],
+          },
         ]}
         rows={rows}
       />

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx

@@ -240,8 +240,10 @@ The following are the native column types:
 - `'date'`
 - `'dateTime'`
 - `'boolean'`
+- `'singleSelect'`
 
 To apply a column type, you need to define the type property in your column definition.
+If the column is `type: 'singleSelect'` you also need to set the `valueOptions` property in that column definition.
 
 {{"demo": "pages/components/data-grid/columns/ColumnTypesGrid.js", "bg": "inline"}}
 

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

@@ -255,7 +255,7 @@ export default function FullFeaturedDemo() {
   const { loading, data, setRowLength, loadNewData } = useDemoData({
     dataSet: type,
     rowLength: size,
-    maxColumns: 20,
+    maxColumns: 40,
     editable: true,
   });
 

docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js

@@ -271,7 +271,7 @@ export default function FullFeaturedDemo() {
   const { loading, data, setRowLength, loadNewData } = useDemoData({
     dataSet: type,
     rowLength: size,
-    maxColumns: 20,
+    maxColumns: 40,
     editable: true,
   });
 

docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Select, { SelectProps } from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import { GridCellParams } from '../../models/params/gridCellParams';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+
+const renderSingleSelectOptions = (option) =>
+  typeof option === 'string' ? (
+    <MenuItem key={option} value={option}>
+      {option}
+    </MenuItem>
+  ) : (
+    <MenuItem key={option.value} value={option.value}>
+      {option.label}
+    </MenuItem>
+  );
+
+export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {
+  const {
+    id,
+    value,
+    formattedValue,
+    api,
+    field,
+    row,
+    colDef,
+    cellMode,
+    isEditable,
+    className,
+    getValue,
+    hasFocus,
+    ...other
+  } = props;
+
+  const handleChange = (event) => {
+    const editProps = { value: event.target.value };
+
+    if (event.key) {
+      api.setEditCellProps({ id, field, props: editProps }, event);
+    } else {
+      api.commitCellChange({ id, field, props: editProps }, event);
+      api.setCellMode(id, field, 'view');
+    }
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+      api.setCellMode(id, field, 'view');
+    }
+  };
+
+  return (
+    <Select
+      value={value}
+      onChange={handleChange}
+      MenuProps={{
+        onClose: handleClose,
+      }}
+      autoFocus
+      fullWidth
+      open
+      {...other}
+    >
+      {colDef.valueOptions.map(renderSingleSelectOptions)}
+    </Select>
+  );
+}
+export const renderEditSingleSelectCell = (params) => <GridEditSingleSelectCell {...params} />;

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx

@@ -4,11 +4,25 @@ import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 import { unstable_useId as useId } from '@material-ui/core/utils';
 import { GridLoadIcon } from '../../icons/index';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridColDef } from '../../../models/colDef/gridColDef';
+
+const renderSingleSelectOptions = ({ valueOptions }: GridColDef) =>
+  ['', ...valueOptions!].map((option) =>
+    typeof option === 'string' ? (
+      <option key={option} value={option}>
+        {option}
+      </option>
+    ) : (
+      <option key={option.value} value={option.value}>
+        {option.label}
+      </option>
+    ),
+  );
 
 export const SUBMIT_FILTER_STROKE_TIME = 500;
 
 export interface GridTypeFilterInputValueProps extends GridFilterInputValueProps {
-  type?: 'text' | 'number' | 'date' | 'datetime-local';
+  type?: 'text' | 'number' | 'date' | 'datetime-local' | 'singleSelect';
 }
 
 export function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldProps) {
@@ -17,6 +31,16 @@ export function GridFilterInputValue(props: GridTypeFilterInputValueProps & Text
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
+  const singleSelectProps: TextFieldProps =
+    type === 'singleSelect'
+      ? {
+          select: true,
+          SelectProps: {
+            native: true,
+          },
+          children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField)),
+        }
+      : {};
 
   const onFilterChange = React.useCallback(
     (event) => {
@@ -57,6 +81,7 @@ export function GridFilterInputValue(props: GridTypeFilterInputValueProps & Text
       InputLabelProps={{
         shrink: true,
       }}
+      {...singleSelectProps}
       {...others}
     />
   );

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx

@@ -59,7 +59,7 @@ export interface GridColDef {
   resizable?: boolean;
   /**
    * If `true`, the cells of the column are editable.
-   * @default true
+   * @default false
    */
   editable?: boolean;
   /**
@@ -71,6 +71,10 @@ export interface GridColDef {
    * @default 'string'
    */
   type?: GridColType;
+  /**
+   * To be used in combination with `type: 'singleSelect'`. This is an array of the possible cell values and labels.
+   */
+  valueOptions?: Array<string | { value: any; label: string }>;
   /**
    * Allows to align the column values in cells.
    */

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

@@ -4,5 +4,11 @@ export const GRID_DATE_COLUMN_TYPE = 'date';
 export const GRID_DATETIME_COLUMN_TYPE = 'dateTime';
 export const GRID_BOOLEAN_COLUMN_TYPE = 'boolean';
 
-export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean';
+export type GridNativeColTypes =
+  | 'string'
+  | 'number'
+  | 'date'
+  | 'dateTime'
+  | 'boolean'
+  | 'singleSelect';
 export type GridColType = GridNativeColTypes | string;

packages/grid/_modules_/grid/models/colDef/gridColType.ts

@@ -3,6 +3,7 @@ import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
 import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
 
 export const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export const getGridDefaultColumnTypes: () => GridColumnTypesRecord = () => {
@@ -12,6 +13,7 @@ export const getGridDefaultColumnTypes: () => GridColumnTypesRecord = () => {
     date: GRID_DATE_COL_DEF,
     dateTime: GRID_DATETIME_COL_DEF,
     boolean: GRID_BOOLEAN_COL_DEF,
+    singleSelect: GRID_SINGLE_SELECT_COL_DEF,
   };
   nativeColumnTypes[DEFAULT_GRID_COL_TYPE_KEY] = GRID_STRING_COL_DEF;
 

packages/grid/_modules_/grid/models/colDef/gridDefaultColumnTypes.ts

@@ -0,0 +1,11 @@
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GridColTypeDef } from './gridColDef';
+import { renderEditSingleSelectCell } from '../../components/cell/GridEditSingleSelectCell';
+import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
+
+export const GRID_SINGLE_SELECT_COL_DEF: GridColTypeDef = {
+  ...GRID_STRING_COL_DEF,
+  type: 'singleSelect',
+  renderEditCell: renderEditSingleSelectCell,
+  filterOperators: getGridSingleSelectOperators(),
+};

packages/grid/_modules_/grid/models/colDef/gridSingleSelectColDef.tsx

@@ -0,0 +1,37 @@
+import { GridFilterInputValue } from '../../components/panel/filterPanel/GridFilterInputValue';
+import { GridFilterItem } from '../gridFilterItem';
+import { GridFilterOperator } from '../gridFilterOperator';
+
+export const getGridSingleSelectOperators: () => GridFilterOperator[] = () => [
+  {
+    value: 'is',
+    getApplyFilterFn: (filterItem: GridFilterItem) => {
+      if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+        return null;
+      }
+      return ({ value }): boolean => {
+        return typeof value === 'string'
+          ? filterItem.value === value
+          : filterItem.value === (value as { value: any; label: string }).value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: { type: 'singleSelect' },
+  },
+  {
+    value: 'not',
+    getApplyFilterFn: (filterItem: GridFilterItem) => {
+      if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+        return null;
+      }
+
+      return ({ value }): boolean => {
+        return typeof value === 'string'
+          ? filterItem.value !== value
+          : filterItem.value !== (value as { value: any; label: string }).value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: { type: 'singleSelect' },
+  },
+];