@mui/x-data-grid 7.0.0-alpha.9 → 7.0.0-beta.1

package/models/colDef/gridColDef.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridCellClassNamePropType } from '../gridCellClass';
 import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass';
 import type { GridFilterOperator } from '../gridFilterOperator';
-import { GridCellParams, GridRenderCellParams, GridRenderEditCellParams, GridValueFormatterParams, GridValueGetterParams, GridValueSetterParams, GridPreProcessEditCellProps } from '../params/gridCellParams';
+import { GridRenderCellParams, GridRenderEditCellParams, GridPreProcessEditCellProps } from '../params/gridCellParams';
 import { GridColumnHeaderParams } from '../params/gridColumnHeaderParams';
 import { GridComparatorFn, GridSortDirection } from '../gridSortModel';
 import { GridColType } from './gridColType';
@@ -26,6 +26,11 @@ export type ValueOptions = string | number | {
 export type GridKeyValue = string | number | boolean;
 export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
 export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: React.MutableRefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
+export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
+export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => F;
+export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => R;
+export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
+export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => number | undefined;
 /**
  * Column Definition base interface.
  */
@@ -115,34 +120,23 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     align?: GridAlignment;
     /**
      * Function that allows to get a specific data instead of field to render in the cell.
-     * @template R, V
-     * @param {GridValueGetterParams<R, any>} params Object containing parameters for the getter.
-     * @returns {V} The cell value.
      */
-    valueGetter?: (params: GridValueGetterParams<R, any>) => V;
+    valueGetter?: GridValueGetter<R, V, F>;
     /**
      * Function that allows to customize how the entered value is stored in the row.
      * It only works with cell/row editing.
-     * @template R, V
-     * @param {GridValueSetterParams<R, V>} params Object containing parameters for the setter.
      * @returns {R} The row with the updated field.
      */
-    valueSetter?: (params: GridValueSetterParams<R, V>) => R;
+    valueSetter?: GridValueSetter<R, V, F>;
     /**
      * Function that allows to apply a formatter before rendering its value.
-     * @template V, F
-     * @param {GridValueFormatterParams<V>} params Object containing parameters for the formatter.
-     * @returns {F} The formatted value.
      */
-    valueFormatter?: (params: GridValueFormatterParams<V>) => F;
+    valueFormatter?: GridValueFormatter<R, V, F>;
     /**
      * Function that takes the user-entered value and converts it to a value used internally.
-     * @template R, V, F
-     * @param {F | undefined} value The user-entered value.
-     * @param {GridCellParams<R, V, F>} params The params when called before saving the value.
      * @returns {V} The converted value to use internally.
      */
-    valueParser?: (value: F | undefined, params?: GridCellParams<R, V, F>) => V;
+    valueParser?: GridValueParser<R, V, F>;
     /**
      * Class name that will be added in cells for that column.
      */
@@ -224,7 +218,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * Number of columns a cell should span.
      * @default 1
      */
-    colSpan?: number | ((params: GridCellParams<R, V, F>) => number | undefined);
+    colSpan?: number | GridColSpanFn<R, V, F>;
 }
 /**
  * Column Definition interface used for columns with the `actions` type.

package/models/colDef/gridColType.d.ts

@@ -1,2 +1,11 @@
-export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions' | 'custom';
-export type GridColType = GridNativeColTypes;
+export interface GridColumnTypes {
+    string: 'string';
+    number: 'number';
+    date: 'date';
+    dateTime: 'dateTime';
+    boolean: 'boolean';
+    singleSelect: 'singleSelect';
+    actions: 'actions';
+    custom: 'custom';
+}
+export type GridColType = GridColumnTypes[keyof GridColumnTypes];

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, } from './gridColDef';
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn, } from './gridColDef';
 export * from './gridColType';
 export * from './gridColumnTypesRecord';

package/models/gridSlotsComponent.d.ts

@@ -160,6 +160,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default GridColumnsPanel
      */
     columnsPanel: React.JSXElementConstructor<any>;
+    /**
+     * Component used inside Grid Columns panel to manage columns.
+     * @default GridColumnsManagement
+     */
+    columnsManagement: React.JSXElementConstructor<any>;
     /**
      * Panel component wrapping the filters and columns panels.
      * @default GridPanel

package/models/gridSlotsComponentsProps.d.ts

@@ -21,6 +21,7 @@ import { GridOverlayProps } from '../components/containers/GridOverlay';
 import { GridPanelProps } from '../components/panel/GridPanel';
 import type { GridRowProps } from '../components/GridRow';
 import type { GridCellProps } from '../components/cell/GridCell';
+import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
 import type { GridRowCountProps } from '../components';
 export interface BaseCheckboxPropsOverrides {
 }
@@ -56,6 +57,8 @@ export interface ColumnMenuPropsOverrides {
 }
 export interface ColumnsPanelPropsOverrides {
 }
+export interface ColumnsManagementPropsOverrides {
+}
 export interface FilterPanelPropsOverrides {
 }
 export interface FooterPropsOverrides {
@@ -99,6 +102,7 @@ export interface GridSlotsComponentsProps {
     columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
     columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;
     columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
+    columnsManagement?: SlotProps<GridColumnsManagementProps, ColumnsManagementPropsOverrides>;
     filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
     footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
     footerRowCount?: SlotProps<GridRowCountProps, FooterRowCountOverrides>;

package/models/params/gridCellParams.d.ts

@@ -81,32 +81,6 @@ export interface GridRenderEditCellParams<R extends GridValidRowModel = any, V =
      */
     api: GridApiCommunity;
 }
-/**
- * Parameters passed to `colDef.valueGetter`.
- */
-export interface GridValueGetterParams<R extends GridValidRowModel = any, V = any, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridCellParams<R, V, any, N>, 'formattedValue' | 'isEditable'> {
-    /**
-     * GridApi that let you manipulate the grid.
-     */
-    api: GridApiCommunity;
-    /**
-     * The default value for the cell that the `valueGetter` is overriding.
-     */
-    value: GridCellParams<R, V, any>['value'];
-}
-/**
- * Object passed as parameter in the column [[GridColDef]] value setter callback.
- */
-export interface GridValueSetterParams<R extends GridValidRowModel = any, V = any> {
-    /**
-     * The new cell value.
-     */
-    value: V;
-    /**
-     * The row that is being edited.
-     */
-    row: R;
-}
 /**
  * Object passed as parameter in the column [[GridColDef]] value formatter callback.
  */

package/modern/DataGrid/useDataGridComponent.js

@@ -57,7 +57,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);

package/modern/colDef/gridBooleanColDef.js

@@ -4,12 +4,9 @@ import { renderBooleanCell } from '../components/cell/GridBooleanCell';
 import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridBooleanOperators } from './gridBooleanOperators';
-function gridBooleanFormatter({
-  value,
-  api
-}) {
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+const gridBooleanFormatter = (value, row, column, apiRef) => {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 const stringToBoolean = value => {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -19,9 +19,10 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: params => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: (value, row, column, apiRef) => {
+    const selectionLookup = selectedIdsLookupSelector(apiRef);
+    const rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/modern/colDef/gridDateColDef.js

@@ -13,38 +13,32 @@ function throwIfNotDateObject({
     throw new Error([`MUI X: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
   }
 }
-export function gridDateFormatter({
-  value,
-  field,
-  id
-}) {
+export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-export function gridDateTimeFormatter({
-  value,
-  field,
-  id
-}) {
+};
+export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/modern/colDef/gridNumericColDef.js

@@ -9,9 +9,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerAlign: 'right',
   sortComparator: gridNumberComparator,
   valueParser: value => value === '' ? null : Number(value),
-  valueFormatter: ({
-    value
-  }) => isNumber(value) ? value.toLocaleString() : value || '',
+  valueFormatter: value => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/modern/colDef/gridSingleSelectColDef.js

@@ -17,20 +17,15 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter(params) {
-    const {
-      id,
-      field,
-      value,
-      api
-    } = params;
-    const colDef = params.api.getColumn(field);
+  valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    const rowId = apiRef.current.getRowId(row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
     const valueOptions = getValueOptions(colDef, {
-      id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row
     });
     if (value == null) {
       return '';
@@ -47,8 +42,8 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: (value, params) => {
-    const colDef = params.colDef;
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
     const valueOptions = getValueOptions(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {

package/modern/components/GridRow.js

@@ -433,106 +433,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  pinnedColumns: PropTypes.shape({
-    left: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired,
-    right: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired
-  }).isRequired,
+  pinnedColumns: PropTypes.object.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,

package/modern/components/cell/GridEditInputCell.js

@@ -57,7 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);
     apiRef.current.setEditCellValue({