@mui/x-data-grid 5.5.1 → 5.7.0

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { gridColumnMenuSelector } from './columnMenuSelector';
+export const columnMenuStateInitializer = state => _extends({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+
+export const useGridColumnMenu = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridColumnMenu');
+  /**
+   * API METHODS
+   */
+
+  const showColumnMenu = React.useCallback(field => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (state.columnMenu.open && state.columnMenu.field === field) {
+        return state;
+      }
+
+      logger.debug('Opening Column Menu');
+      return _extends({}, state, {
+        columnMenu: {
+          open: true,
+          field
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.hidePreferences();
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const hideColumnMenu = React.useCallback(() => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
+        return state;
+      }
+
+      logger.debug('Hiding Column Menu');
+      return _extends({}, state, {
+        columnMenu: _extends({}, state.columnMenu, {
+          open: false,
+          field: undefined
+        })
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const toggleColumnMenu = React.useCallback(field => {
+    logger.debug('Toggle Column Menu');
+    const columnMenu = gridColumnMenuSelector(apiRef.current.state);
+
+    if (!columnMenu.open || columnMenu.field !== field) {
+      showColumnMenu(field);
+    } else {
+      hideColumnMenu();
+    }
+  }, [apiRef, logger, showColumnMenu, hideColumnMenu]);
+  const columnMenuApi = {
+    showColumnMenu,
+    hideColumnMenu,
+    toggleColumnMenu
+  };
+  useGridApiMethod(apiRef, columnMenuApi, 'GridColumnMenuApi');
+  /**
+   * EVENTS
+   */
+
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+};

package/modern/hooks/features/columns/gridColumnsInterfaces.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -0,0 +1,148 @@
+import { createSelector } from '../../../utils/createSelector';
+import { wrapWithWarningOnCall } from '../../../utils/warning';
+/**
+ * @category Columns
+ * @deprecated Use the selector returning exactly the value you are looking for.
+ * @ignore - do not document.
+ * TODO v6: Rename `gridColumnsStateSelector`
+ */
+
+export const gridColumnsSelector = state => state.columns;
+/**
+ * Get the field of each column.
+ * @category Columns
+ */
+
+export const gridColumnFieldsSelector = createSelector(gridColumnsSelector, columnsState => columnsState.all);
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridColumnLookupSelector = createSelector(gridColumnsSelector, columnsState => columnsState.lookup);
+/**
+ * Get the columns as an array.
+ * @category Columns
+ */
+
+export const gridColumnDefinitionsSelector = createSelector(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+
+export const gridColumnVisibilityModelSelector = createSelector(gridColumnsSelector, columnsState => columnsState.columnVisibilityModel);
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnFieldsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+
+export const gridColumnPositionsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+  const positions = [];
+  let currentPosition = 0;
+
+  for (let i = 0; i < visibleColumns.length; i += 1) {
+    positions.push(currentPosition);
+    currentPosition += visibleColumns[i].computedWidth;
+  }
+
+  return positions;
+});
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+
+export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+
+  if (colCount === 0) {
+    return 0;
+  }
+
+  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
+});
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+
+export const gridFilterableColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridFilterableColumnLookupSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+  if (col.filterable) {
+    acc[col.field] = col;
+  }
+
+  return acc;
+}, {}));
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnFieldsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsFieldsSelector = wrapWithWarningOnCall(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsSelector = wrapWithWarningOnCall(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsSelector = wrapWithWarningOnCall(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsSelector = wrapWithWarningOnCall(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsIdsSelector = wrapWithWarningOnCall(createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field)), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
+/**
+ * Get the amount of visible columns.
+ * @category Visible Columns
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsLengthSelector = wrapWithWarningOnCall(createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const gridColumnsMetaSelector = wrapWithWarningOnCall(createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+  totalWidth,
+  positions
+})), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -0,0 +1,363 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
+import { clamp } from '../../../utils/utils';
+export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+export const computeColumnTypes = (customColumnTypes = {}) => {
+  const mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
+
+  Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colType], colTypeDef);
+    } else {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    }
+  });
+  return mergedColumnTypes;
+};
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+
+export function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}) {
+  const flexColumnsLookup = {
+    all: {},
+    frozenFields: [],
+    freeze: field => {
+      const value = flexColumnsLookup.all[field];
+
+      if (value && value.frozen !== true) {
+        flexColumnsLookup.all[field].frozen = true;
+        flexColumnsLookup.frozenFields.push(field);
+      }
+    }
+  }; // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+
+  function loopOverFlexItems() {
+    // 5a: If all the flex items on the line are frozen, free space has been distributed.
+    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+      return;
+    }
+
+    const violationsLookup = {
+      min: {},
+      max: {}
+    };
+    let remainingFreeSpace = initialFreeSpace;
+    let flexUnits = totalFlexUnits;
+    let totalViolation = 0; // 5b: Calculate the remaining free space
+
+    flexColumnsLookup.frozenFields.forEach(field => {
+      remainingFreeSpace -= flexColumnsLookup.all[field].computedWidth;
+      flexUnits -= flexColumnsLookup.all[field].flex;
+    });
+
+    for (let i = 0; i < flexColumns.length; i += 1) {
+      const column = flexColumns[i];
+
+      if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
+        // eslint-disable-next-line no-continue
+        continue;
+      } // 5c: Distribute remaining free space proportional to the flex factors
+
+
+      const widthPerFlexUnit = remainingFreeSpace / flexUnits;
+      let computedWidth = widthPerFlexUnit * column.flex; // 5d: Fix min/max violations
+
+      if (computedWidth < column.minWidth) {
+        totalViolation += column.minWidth - computedWidth;
+        computedWidth = column.minWidth;
+        violationsLookup.min[column.field] = true;
+      } else if (computedWidth > column.maxWidth) {
+        totalViolation += column.maxWidth - computedWidth;
+        computedWidth = column.maxWidth;
+        violationsLookup.max[column.field] = true;
+      }
+
+      flexColumnsLookup.all[column.field] = {
+        frozen: false,
+        computedWidth,
+        flex: column.flex
+      };
+    } // 5e: Freeze over-flexed items
+
+
+    if (totalViolation < 0) {
+      // Freeze all the items with max violations
+      Object.keys(violationsLookup.max).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else if (totalViolation > 0) {
+      // Freeze all the items with min violations
+      Object.keys(violationsLookup.min).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else {
+      // Freeze all items
+      flexColumns.forEach(({
+        field
+      }) => {
+        flexColumnsLookup.freeze(field);
+      });
+    } // 5f: Return to the start of this loop
+
+
+    loopOverFlexItems();
+  }
+
+  loopOverFlexItems();
+  return flexColumnsLookup.all;
+}
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+
+export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+  const columnsLookup = {};
+  let totalFlexUnits = 0;
+  let widthAllocatedBeforeFlex = 0;
+  const flexColumns = []; // For the non-flex columns, compute their width
+  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+
+  rawState.all.forEach(columnField => {
+    const newColumn = _extends({}, rawState.lookup[columnField]);
+
+    if (rawState.columnVisibilityModel[columnField] === false) {
+      newColumn.computedWidth = 0;
+    } else {
+      let computedWidth;
+
+      if (newColumn.flex && newColumn.flex > 0) {
+        totalFlexUnits += newColumn.flex;
+        computedWidth = 0;
+        flexColumns.push(newColumn);
+      } else {
+        computedWidth = clamp(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
+      }
+
+      widthAllocatedBeforeFlex += computedWidth;
+      newColumn.computedWidth = computedWidth;
+    }
+
+    columnsLookup[columnField] = newColumn;
+  });
+  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0); // Allocate the remaining space to the flex columns
+
+  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+    const computedColumnWidths = computeFlexColumnsWidth({
+      initialFreeSpace,
+      totalFlexUnits,
+      flexColumns
+    });
+    Object.keys(computedColumnWidths).forEach(field => {
+      columnsLookup[field].computedWidth = computedColumnWidths[field].computedWidth;
+    });
+  }
+
+  return _extends({}, rawState, {
+    lookup: columnsLookup
+  });
+};
+let columnTypeWarnedOnce = false;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+
+export const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const field = orderedFields[i]; // Ignores the fields in the initialState that matches no field on the current column state
+
+    if (columnsState.lookup[field]) {
+      orderedFieldsLookup[field] = true;
+      cleanOrderedFields.push(field);
+    }
+  }
+
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [...cleanOrderedFields, ...columnsState.all.filter(field => !orderedFieldsLookup[field])];
+
+  const newColumnLookup = _extends({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+      hasBeenResized: true
+    });
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
+/**
+ * @deprecated Should have been internal only, you can inline the logic.
+ */
+
+export const getGridColDef = (columnTypes, type) => {
+  if (!type) {
+    return columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!columnTypeWarnedOnce && !columnTypes[type]) {
+      console.warn([`MUI: The column type "${type}" you are using is not supported.`, `Column type "string" is being used instead.`].join('\n'));
+      columnTypeWarnedOnce = true;
+    }
+  }
+
+  if (!columnTypes[type]) {
+    return columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  return columnTypes[type];
+};
+export const createColumnsState = ({
+  apiRef,
+  columnsToUpsert,
+  initialState,
+  columnsTypes,
+  currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
+  shouldRegenColumnVisibilityModelFromColumns,
+  keepOnlyColumnsToUpsert = false
+}) => {
+  const isInsideStateInitializer = !apiRef.current.state.columns;
+  let columnsStateWithoutColumnVisibilityModel;
+
+  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [],
+      lookup: {}
+    };
+  } else {
+    const currentState = gridColumnsSelector(apiRef.current.state);
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [...currentState.all],
+      lookup: _extends({}, currentState.lookup)
+    };
+  }
+
+  const columnsToUpsertLookup = {};
+  columnsToUpsert.forEach(newColumn => {
+    columnsToUpsertLookup[newColumn.field] = true;
+
+    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+      // New Column
+      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
+      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
+    } else {
+      const mergedColumn = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+
+      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(propertyName => newColumn[propertyName] !== undefined)) {
+        mergedColumn.hasBeenResized = true;
+      }
+
+      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
+    }
+  });
+
+  const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
+
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+
+  let columnVisibilityModel = {};
+
+  if (shouldRegenColumnVisibilityModelFromColumns) {
+    let hasModelChanged = false;
+
+    const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
+      columnsStateWithPreProcessing.all.forEach(field => {
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+      });
+    } else if (keepOnlyColumnsToUpsert) {
+      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
+      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
+      // cleanup because a given column may have been removed from the `columns` prop but it still
+      // exists in the state.
+      Object.keys(newColumnVisibilityModel).forEach(field => {
+        if (!columnsStateWithPreProcessing.lookup[field]) {
+          delete newColumnVisibilityModel[field];
+          hasModelChanged = true;
+        }
+      });
+    }
+
+    columnsStateWithPreProcessing.all.forEach(field => {
+      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
+      // Then we don't want to update the visibility status of the column in the model.
+      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
+        return;
+      } // We always assume that a column not in the model is visible by default. However, there's an
+      // edge case where the column is not in the model but it also doesn't exist in the `columns`
+      // prop, meaning that the column is being added. In that case, we assume that the column was
+      // not visible before for it be added to the model.
+
+
+      let isVisibleBefore = currentColumnVisibilityModel[field];
+
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          const currentState = gridColumnsSelector(apiRef.current.state);
+          isVisibleBefore = !!currentState.lookup[field];
+        }
+      }
+
+      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
+      }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
+    }
+  } else {
+    columnVisibilityModel = currentColumnVisibilityModel;
+  }
+
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+
+  const columnsState = _extends({}, columnsStateWithPortableColumns, {
+    columnVisibilityModel
+  });
+
+  return hydrateColumnsWidth(columnsState, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+};
+export const mergeColumnsState = columnsState => state => _extends({}, state, {
+  columns: columnsState
+});

package/modern/hooks/features/columns/index.js

@@ -0,0 +1,2 @@
+export * from './gridColumnsSelector';
+export { getGridColDef } from './gridColumnsUtils';