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

package/esm/DataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataGrid.js";

package/esm/DataGrid/index.js

@@ -0,0 +1 @@
+export * from "./DataGrid.js";

package/esm/DataGrid/useDataGridComponent.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
+import { GridApiCommunity, GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
+export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;

package/esm/DataGrid/useDataGridComponent.js

@@ -0,0 +1,94 @@
+import { useGridInitialization } from "../hooks/core/useGridInitialization.js";
+import { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
+import { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
+import { columnMenuStateInitializer, useGridColumnMenu } from "../hooks/features/columnMenu/useGridColumnMenu.js";
+import { useGridColumns, columnsStateInitializer } from "../hooks/features/columns/useGridColumns.js";
+import { densityStateInitializer, useGridDensity } from "../hooks/features/density/useGridDensity.js";
+import { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
+import { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
+import { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+import { focusStateInitializer, useGridFocus } from "../hooks/features/focus/useGridFocus.js";
+import { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";
+import { useGridPagination, paginationStateInitializer } from "../hooks/features/pagination/useGridPagination.js";
+import { useGridPreferencesPanel, preferencePanelStateInitializer } from "../hooks/features/preferencesPanel/useGridPreferencesPanel.js";
+import { useGridEditing, editingStateInitializer } from "../hooks/features/editing/useGridEditing.js";
+import { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGridRows.js";
+import { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
+import { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
+import { rowSelectionStateInitializer, useGridRowSelection } from "../hooks/features/rowSelection/useGridRowSelection.js";
+import { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
+import { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+import { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
+import { useGridEvents } from "../hooks/features/events/useGridEvents.js";
+import { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+import { rowsMetaStateInitializer, useGridRowsMeta } from "../hooks/features/rows/useGridRowsMeta.js";
+import { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
+import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";
+import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
+import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
+import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
+import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
+import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
+import { propsStateInitializer } from "../hooks/core/useGridProps.js";
+import { useGridDataSource } from "../hooks/features/dataSource/useGridDataSource.js";
+export const useDataGridComponent = (inputApiRef, props) => {
+  const apiRef = useGridInitialization(inputApiRef, props);
+
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+  useGridRowSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
+
+  /**
+   * Register all state initializers here.
+   */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
+  useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(columnResizeStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(listViewStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridRowSelection(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridRowSpanning(apiRef, props);
+  useGridParamsApi(apiRef, props);
+  useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridPreferencesPanel(apiRef, props);
+  useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridColumnResize(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridCsvExport(apiRef, props);
+  useGridPrintExport(apiRef, props);
+  useGridClipboard(apiRef, props);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
+  useGridListView(apiRef, props);
+  useGridDataSource(apiRef, props);
+  return apiRef;
+};

package/esm/DataGrid/useDataGridProps.d.ts

@@ -0,0 +1,3 @@
+import { DataGridProcessedProps, DataGridProps } from "../models/props/DataGridProps.js";
+import { GridValidRowModel } from "../models/index.js";
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;

package/esm/DataGrid/useDataGridProps.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
+import { computeSlots } from "../internals/utils/index.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
+const DATA_GRID_FORCED_PROPS = {
+  disableMultipleColumnsFiltering: true,
+  disableMultipleColumnsSorting: true,
+  throttleRowsMs: undefined,
+  hideFooterRowCount: false,
+  pagination: true,
+  checkboxSelectionVisibleOnly: false,
+  disableColumnReorder: true,
+  keepColumnPositionIfDraggedOutside: false,
+  signature: 'DataGrid',
+  unstable_listView: false
+};
+const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
+const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
+export const useDataGridProps = inProps => {
+  const themedProps =
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  });
+  const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
+  const slots = React.useMemo(() => computeSlots({
+    defaultSlots,
+    slots: themedProps.slots
+  }), [themedProps.slots]);
+  const injectDefaultProps = React.useMemo(() => {
+    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+      // @ts-ignore
+      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      return acc;
+    }, {});
+  }, [themedProps]);
+  return React.useMemo(() => _extends({}, themedProps, injectDefaultProps, {
+    localeText,
+    slots
+  }, getDataGridForcedProps(themedProps)), [themedProps, localeText, slots, injectDefaultProps]);
+};

package/esm/colDef/gridActionsColDef.d.ts

@@ -0,0 +1,3 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_ACTIONS_COLUMN_TYPE = "actions";
+export declare const GRID_ACTIONS_COL_DEF: GridColTypeDef;

package/esm/colDef/gridActionsColDef.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderActionsCell } from "../components/cell/GridActionsCell.js";
+export const GRID_ACTIONS_COLUMN_TYPE = 'actions';
+export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  sortable: false,
+  filterable: false,
+  // @ts-ignore
+  aggregable: false,
+  width: 100,
+  display: 'flex',
+  align: 'center',
+  headerAlign: 'center',
+  headerName: '',
+  disableColumnMenu: true,
+  disableExport: true,
+  renderCell: renderActionsCell,
+  getApplyQuickFilterFn: () => null
+});

package/esm/colDef/gridBooleanColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef<boolean | null, any>;

package/esm/colDef/gridBooleanColDef.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderBooleanCell } from "../components/cell/GridBooleanCell.js";
+import { renderEditBooleanCell } from "../components/cell/GridEditBooleanCell.js";
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridBooleanOperators } from "./gridBooleanOperators.js";
+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':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
+export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'boolean',
+  display: 'flex',
+  align: 'center',
+  headerAlign: 'center',
+  renderCell: renderBooleanCell,
+  renderEditCell: renderEditBooleanCell,
+  sortComparator: gridNumberComparator,
+  valueFormatter: gridBooleanFormatter,
+  filterOperators: getGridBooleanOperators(),
+  getApplyQuickFilterFn: () => null,
+  // @ts-ignore
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: value => stringToBoolean(value)
+});

package/esm/colDef/gridBooleanOperators.d.ts

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridBooleanOperators: () => GridFilterOperator<any, boolean | null, any>[];

package/esm/colDef/gridBooleanOperators.js

@@ -0,0 +1,12 @@
+import { GridFilterInputBoolean, sanitizeFilterItemValue } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
+export const getGridBooleanOperators = () => [{
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    const sanitizedValue = sanitizeFilterItemValue(filterItem.value);
+    if (sanitizedValue === undefined) {
+      return null;
+    }
+    return value => Boolean(value) === sanitizedValue;
+  },
+  InputComponent: GridFilterInputBoolean
+}];

package/esm/colDef/gridCheckboxSelectionColDef.d.ts

@@ -0,0 +1,3 @@
+import { GridColDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_CHECKBOX_SELECTION_FIELD = "__check__";
+export declare const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef;

package/esm/colDef/gridCheckboxSelectionColDef.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCellCheckboxRenderer.js";
+import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
+  type: 'custom',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
+  width: 50,
+  resizable: false,
+  sortable: false,
+  filterable: false,
+  // @ts-ignore
+  aggregable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  getApplyQuickFilterFn: () => null,
+  display: 'flex',
+  valueGetter: (value, row, column, apiRef) => {
+    const rowId = gridRowIdSelector(apiRef, row);
+    return apiRef.current.isRowSelected(rowId);
+  },
+  renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
+  renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))
+});

package/esm/colDef/gridDateColDef.d.ts

@@ -0,0 +1,5 @@
+import { GridColTypeDef, GridValueFormatter } from "../models/colDef/gridColDef.js";
+export declare const gridDateFormatter: GridValueFormatter;
+export declare const gridDateTimeFormatter: GridValueFormatter;
+export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date, string>;
+export declare const GRID_DATETIME_COL_DEF: GridColTypeDef<Date, string>;

package/esm/colDef/gridDateColDef.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridDateOperators } from "./gridDateOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
+function throwIfNotDateObject({
+  value,
+  columnType,
+  rowId,
+  field
+}) {
+  if (!(value instanceof Date)) {
+    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 const gridDateFormatter = (value, row, column, apiRef) => {
+  if (!value) {
+    return '';
+  }
+  const rowId = gridRowIdSelector(apiRef, row);
+  throwIfNotDateObject({
+    value,
+    columnType: 'date',
+    rowId,
+    field: column.field
+  });
+  return value.toLocaleDateString();
+};
+export const gridDateTimeFormatter = (value, row, column, apiRef) => {
+  if (!value) {
+    return '';
+  }
+  const rowId = gridRowIdSelector(apiRef, row);
+  throwIfNotDateObject({
+    value,
+    columnType: 'dateTime',
+    rowId,
+    field: column.field
+  });
+  return value.toLocaleString();
+};
+export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'date',
+  sortComparator: gridDateComparator,
+  valueFormatter: gridDateFormatter,
+  filterOperators: getGridDateOperators(),
+  renderEditCell: renderEditDateCell,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
+});
+export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'dateTime',
+  sortComparator: gridDateComparator,
+  valueFormatter: gridDateTimeFormatter,
+  filterOperators: getGridDateOperators(true),
+  renderEditCell: renderEditDateCell,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
+});

package/esm/colDef/gridDateOperators.d.ts

@@ -0,0 +1,3 @@
+import { GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/esm/colDef/gridDateOperators.js

@@ -0,0 +1,108 @@
+import { GridFilterInputDate } from "../components/panel/filterPanel/GridFilterInputDate.js";
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+  if (!filterItem.value) {
+    return null;
+  }
+  const date = new Date(filterItem.value);
+  if (showTime) {
+    date.setSeconds(0, 0);
+  } else {
+    // In GMT-X timezone, the date will be one day behind.
+    // For 2022-08-16:
+    // GMT+2: Tue Aug 16 2022 02:00:00 GMT+0200
+    // GMT-4: Mon Aug 15 2022 20:00:00 GMT-0400
+    //
+    // We need to add the offset before resetting the hours.
+    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
+    date.setHours(0, 0, 0, 0);
+  }
+  const time = date.getTime();
+  return value => {
+    if (!value) {
+      return false;
+    }
+    if (keepHours) {
+      return compareFn(value.getTime(), time);
+    }
+
+    // Make a copy of the date to not reset the hours in the original object
+    const dateCopy = new Date(value);
+    if (showTime) {
+      dateCopy.setSeconds(0, 0);
+    } else {
+      dateCopy.setHours(0, 0, 0, 0);
+    }
+    return compareFn(dateCopy.getTime(), time);
+  };
+}
+export const getGridDateOperators = showTime => [{
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 === value2, showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'not',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 !== value2, showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'after',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'onOrAfter',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'before',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'onOrBefore',
+  getApplyFilterFn: filterItem => {
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+  },
+  InputComponent: GridFilterInputDate,
+  InputComponentProps: {
+    type: showTime ? 'datetime-local' : 'date'
+  }
+}, {
+  value: 'isEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value == null;
+    };
+  },
+  requiresFilterValue: false
+}, {
+  value: 'isNotEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value != null;
+    };
+  },
+  requiresFilterValue: false
+}];

package/esm/colDef/gridDefaultColumnTypes.d.ts

@@ -0,0 +1,3 @@
+import type { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
+export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/esm/colDef/gridDefaultColumnTypes.js

@@ -0,0 +1,20 @@
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { GRID_NUMERIC_COL_DEF } from "./gridNumericColDef.js";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.js";
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.js";
+export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
+export const getGridDefaultColumnTypes = () => {
+  const nativeColumnTypes = {
+    string: GRID_STRING_COL_DEF,
+    number: GRID_NUMERIC_COL_DEF,
+    date: GRID_DATE_COL_DEF,
+    dateTime: GRID_DATETIME_COL_DEF,
+    boolean: GRID_BOOLEAN_COL_DEF,
+    singleSelect: GRID_SINGLE_SELECT_COL_DEF,
+    [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
+    custom: GRID_STRING_COL_DEF
+  };
+  return nativeColumnTypes;
+};

package/esm/colDef/gridNumericColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef<number | string | null, string>;

package/esm/colDef/gridNumericColDef.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { isNumber } from "../utils/utils.js";
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from "./gridNumericOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'number',
+  align: 'right',
+  headerAlign: 'right',
+  sortComparator: gridNumberComparator,
+  valueParser: value => value === '' ? null : Number(value),
+  valueFormatter: value => isNumber(value) ? value.toLocaleString() : value || '',
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: getGridNumericQuickFilterFn
+});

package/esm/colDef/gridNumericOperators.d.ts

@@ -0,0 +1,7 @@
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterInputValueProps } from '../models/gridFilterInputComponent';
+import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
+export declare const getGridNumericQuickFilterFn: GetApplyQuickFilterFn<any, number | string | null>;
+export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any, GridFilterInputValueProps & {
+  type?: "number";
+}>[];

package/esm/colDef/gridNumericOperators.js

@@ -0,0 +1,143 @@
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.js";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.js";
+const parseNumericValue = value => {
+  if (value == null) {
+    return null;
+  }
+  return Number(value);
+};
+export const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+  return columnValue => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
+export const getGridNumericOperators = () => [{
+  value: '=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      return parseNumericValue(value) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '!=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      return parseNumericValue(value) !== filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '>',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) > filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '>=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) >= filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '<',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) < filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '<=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) <= filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: 'isEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value == null;
+    };
+  },
+  requiresFilterValue: false
+}, {
+  value: 'isNotEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value != null;
+    };
+  },
+  requiresFilterValue: false
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    return value => {
+      return value != null && filterItem.value.includes(Number(value));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}];