@mui/x-data-grid 5.2.1 → 5.2.2

package/x-data-grid.d.ts

@@ -243,6 +243,7 @@ interface GridRowParams<R extends GridRowModel = GridRowModel> {
      * @param {GridRowId} id The row id.
      * @param {string} field The field.
      * @returns {GridCellValue} The cell value.
+     * @deprecated Use `params.row` to directly access the fields you want instead.
      */
     getValue: (id: GridRowId, field: string) => GridCellValue;
 }
@@ -1984,12 +1985,18 @@ interface GridDimensionsApi {
     unstable_getViewportPageSize: () => number;
 }
 
+declare const GRID_TREE_DATA_GROUPING_FIELD = "__tree_data_group__";
+
 interface GridPaginationState {
     pageSize: number;
     page: number;
     pageCount: number;
     rowCount: number;
 }
+interface GridPaginationInitialState {
+    pageSize?: number;
+    page?: number;
+}
 /**
  * The apiRef methods handled by `useGridPageSize`
  */
@@ -2061,6 +2068,28 @@ declare const gridPageSizeSelector: ((state: {
 }> & {
     clearCache: () => void;
 };
+declare const gridPageCountSelector: ((state: {
+    rows: GridRowsState;
+    editRows: GridEditRowsModel;
+    pagination: GridPaginationState;
+    columns: GridColumnsState;
+    columnReorder: GridColumnReorderState;
+    columnResize: GridColumnResizeState;
+    columnMenu: GridColumnMenuState;
+    sorting: GridSortingState;
+    focus: GridFocusState;
+    tabIndex: GridTabIndexState;
+    selection: GridSelectionModel;
+    filter: GridFilterState;
+    preferencePanel: GridPreferencePanelState;
+    density: GridDensityState;
+    error?: any;
+    pinnedColumns: GridPinnedColumns;
+}) => number) & reselect.OutputSelectorFields<(args_0: GridPaginationState) => number & {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
 declare const gridPaginationRowRangeSelector: ((state: {
     rows: GridRowsState;
     editRows: GridEditRowsModel;
@@ -2227,6 +2256,7 @@ interface GridState {
     pinnedColumns: GridColumnPinningState;
 }
 interface GridInitialState {
+    pagination?: GridPaginationInitialState;
     sorting?: GridSortingInitialState;
     filter?: GridFilterInitialState;
     preferencePanel?: GridPreferencePanelInitialState;
@@ -3375,11 +3405,20 @@ interface GridColDef {
      * @default false
      */
     hide?: boolean;
+    /**
+     * If `false`, removes the buttons for hiding this column.
+     * @default true
+     */
+    hideable?: boolean;
     /**
      * If `true`, the column is sortable.
      * @default true
      */
     sortable?: boolean;
+    /**
+     * The order of the sorting sequence.
+     */
+    sortingOrder?: GridSortDirection[];
     /**
      * If `true`, the column is resizable.
      * @default true
@@ -3700,6 +3739,7 @@ interface GridCellParams<V = any, R = any, F = V> {
      * @param {GridRowId} id The row id.
      * @param {string} field The field.
      * @returns {GridCellValue} The cell value.
+     * @deprecated Use `params.row` to directly access the fields you want instead.
      */
     getValue: (id: GridRowId, field: string) => GridCellValue;
 }
@@ -3724,15 +3764,7 @@ interface GridRenderEditCellParams extends GridEditCellProps {
 /**
  * Parameters passed when calling `colDef.valueGetter` in the rendering sequence.
  */
-interface GridValueGetterFullParams<V = any, R = any> extends Omit<GridCellParams<V, R>, 'formattedValue' | 'isEditable' | 'getValue'> {
-    /**
-     * Get the cell value of a row and field.
-     * @param {GridRowId} id The row id.
-     * @param {string} field The field.
-     * @returns {GridCellValue} The cell value.
-     * @deprecated Use `params.row` to directly access the fields you want instead.
-     */
-    getValue: (id: GridRowId, field: string) => GridCellValue;
+interface GridValueGetterFullParams<V = any, R = any> extends Omit<GridCellParams<V, R>, 'formattedValue' | 'isEditable'> {
     /**
      * GridApi that let you manipulate the grid.
      */
@@ -3936,6 +3968,7 @@ declare type GridRenderContextProps = GridRenderColumnsProps & GridRenderRowProp
 
 /**
  * Set of icons used in the grid component UI.
+ * TODO: Differentiate community and pro interface
  */
 interface GridIconSlotsComponent {
     /**
@@ -4025,7 +4058,7 @@ interface GridIconSlotsComponent {
 
 /**
  * Grid components React prop interface containing all the overridable components.
- *
+ * TODO: Differentiate community and pro interface
  */
 interface GridSlotsComponent extends GridIconSlotsComponent {
     /**
@@ -4221,6 +4254,22 @@ declare const GridOverlay: React$1.ForwardRefExoticComponent<GridOverlayProps &
 declare type GridToolbarContainerProps = React$1.HTMLAttributes<HTMLDivElement>;
 declare const GridToolbarContainer: React$1.ForwardRefExoticComponent<GridToolbarContainerProps & React$1.RefAttributes<HTMLDivElement>>;
 
+declare enum GridColumnHeaderSeparatorSides {
+    Left = "left",
+    Right = "right"
+}
+interface GridColumnHeaderSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    resizable: boolean;
+    resizing: boolean;
+    height: number;
+    side?: GridColumnHeaderSeparatorSides;
+}
+declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): JSX.Element;
+declare namespace GridColumnHeaderSeparatorRaw {
+    var propTypes: any;
+}
+declare const GridColumnHeaderSeparator: React$1.MemoExoticComponent<typeof GridColumnHeaderSeparatorRaw>;
+
 interface GridColumnHeaderItemProps {
     colIndex: number;
     column: GridStateColDef;
@@ -4236,26 +4285,17 @@ interface GridColumnHeaderItemProps {
     hasFocus?: boolean;
     tabIndex: 0 | -1;
     disableReorder?: boolean;
+    separatorSide?: GridColumnHeaderSeparatorProps['side'];
 }
 declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): JSX.Element;
 declare namespace GridColumnHeaderItem {
     var propTypes: any;
 }
 
-interface GridColumnHeaderSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    resizable: boolean;
-    resizing: boolean;
-    height: number;
-}
-declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): JSX.Element;
-declare namespace GridColumnHeaderSeparatorRaw {
-    var propTypes: any;
-}
-declare const GridColumnHeaderSeparator: React$1.MemoExoticComponent<typeof GridColumnHeaderSeparatorRaw>;
-
 interface GridColumnHeaderSortIconProps {
     direction: GridSortDirection;
     index: number | undefined;
+    sortingOrder: GridSortDirection[];
 }
 declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): JSX.Element | null;
 declare namespace GridColumnHeaderSortIconRaw {
@@ -4648,593 +4688,569 @@ declare function useGridApiRef(apiRefProp: GridApiRef | undefined): GridApiRef;
 
 declare function useGridLogger(apiRef: GridApiRef, name: string): Logger;
 
-declare const useGridRootProps: () => GridComponentProps;
-
-declare function useGridScrollFn(apiRef: GridApiRef, renderingZoneElementRef: React$1.RefObject<HTMLDivElement>, columnHeadersElementRef: React$1.RefObject<HTMLDivElement>): [GridScrollFn];
-
-declare const useGridSelector: <T>(apiRef: GridApiRef, selector: (state: GridState) => T) => T;
-
-/**
- * @deprecated Use `apiRef.current.state`, `apiRef.current.setState` and `apiRef.current.forceUpdate` instead.
- */
-declare const useGridState: (apiRef: GridApiRef) => readonly [GridState, (state: GridState | ((previousState: GridState) => GridState)) => boolean, () => void];
-
-declare const useGridNativeEventListener: <E extends Event>(apiRef: GridApiRef, ref: React$1.MutableRefObject<HTMLDivElement | null> | (() => Element | undefined | null), eventName: string, handler?: ((event: E) => any) | undefined, options?: AddEventListenerOptions | undefined) => void;
-
-declare type GridMergedOptions = {
-    [key in keyof GridProcessedMergedOptions]: Partial<GridProcessedMergedOptions[key]>;
-};
-/**
- * The grid options with a default in value which is merged with the value given through props.
- */
-interface GridProcessedMergedOptions {
+interface GridClasses {
     /**
-     * Overrideable components.
+     * Styles applied to the root element if `autoHeight={true}`.
      */
-    components: GridSlotsComponent;
+    autoHeight: string;
     /**
-     * Set the locale text of the grid.
-     * You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository.
+     * Styles applied to the icon of the boolean cell.
      */
-    localeText: GridLocaleText;
-}
-/**
- * The grid options with a default in value overridable through props
- * None of the entry of this interface should be optional, they all have default values and `GridInputComponentProps` already applies a `Partial<GridSimpleOptions>` for the public interface
- * The controlled model do not have a default value at the prop processing level so they must be defined in `GridComponentOtherProps`
- * TODO: add multiSortKey
- */
-interface GridSimpleOptions {
+    booleanCell: string;
     /**
-     * If `true`, the grid height is dynamic and follow the number of rows in the grid.
-     * @default false
+     * Styles applied to the cell element if the cell is editable.
      */
-    autoHeight: boolean;
+    'cell--editable': string;
     /**
-     * If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
-     * @default false
+     * Styles applied to the cell element if the cell is in edit mode.
      */
-    autoPageSize: boolean;
+    'cell--editing': string;
     /**
-     * If `true`, the grid get a first column with a checkbox that allows to select rows.
-     * @default false
+     * Styles applied to the cell element if `align="center"`.
      */
-    checkboxSelection: boolean;
+    'cell--textCenter': string;
     /**
-     * If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`.
-     * It only works if the pagination is enabled.
-     * @default false
+     * Styles applied to the cell element if `align="left"`.
      */
-    checkboxSelectionVisibleOnly: boolean;
+    'cell--textLeft': string;
     /**
-     * Number of extra columns to be rendered before/after the visible slice.
-     * @default 3
+     * Styles applied to the cell element if `align="right"`.
      */
-    columnBuffer: number;
+    'cell--textRight': string;
     /**
-     * Number of extra rows to be rendered before/after the visible slice.
-     * @default 3
+     * Styles applied to the cell element if the cell has a custom renderer.
      */
-    rowBuffer: number;
+    'cell--withRenderer': string;
     /**
-     * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-     * @default 3
+     * Styles applied to the cell element.
      */
-    rowThreshold: number;
+    cell: string;
     /**
-     * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-     * @default 3
+     * Styles applied to the cell checkbox element.
      */
-    columnThreshold: number;
+    cellCheckbox: string;
     /**
-     * Set the density of the grid.
-     * @default "standard"
+     * Styles applied to the selection checkbox element.
      */
-    density: GridDensity;
+    checkboxInput: string;
     /**
-     * If `true`, rows will not be extended to fill the full width of the grid container.
-     * @default false
+     * Styles applied to the column header if `headerAlign="center"`.
      */
-    disableExtendRowFullWidth: boolean;
+    'columnHeader--alignCenter': string;
     /**
-     * If `true`, column filters are disabled.
-     * @default false
+     * Styles applied to the column header if `headerAlign="left"`.
      */
-    disableColumnFilter: boolean;
+    'columnHeader--alignLeft': string;
     /**
-     * If `true`, the column menu is disabled.
-     * @default false
+     * Styles applied to the column header if `headerAlign="right"`.
      */
-    disableColumnMenu: boolean;
+    'columnHeader--alignRight': string;
     /**
-     * If `true`, reordering columns is disabled.
-     * @default false
+     * Styles applied to the floating column header element when it is dragged.
      */
-    disableColumnReorder: boolean;
+    'columnHeader--dragging': string;
     /**
-     * If `true`, resizing columns is disabled.
-     * @default false
+     * Styles applied to the column header if it is being dragged.
      */
-    disableColumnResize: boolean;
+    'columnHeader--moving': string;
     /**
-     * If `true`, hiding/showing columns is disabled.
-     * @default false
+     * Styles applied to the column header if the type of the column is `number`.
      */
-    disableColumnSelector: boolean;
+    'columnHeader--numeric': string;
     /**
-     * If `true`, the density selector is disabled.
-     * @default false
+     * Styles applied to the column header if the column is sortable.
      */
-    disableDensitySelector: boolean;
+    'columnHeader--sortable': string;
     /**
-     * If `true`, filtering with multiple columns is disabled.
-     * @default false
+     * Styles applied to the column header if the column is sorted.
      */
-    disableMultipleColumnsFiltering: boolean;
+    'columnHeader--sorted': string;
     /**
-     * If `true`, the filtering will only be applied to the top level rows.
-     * @default false
+     * Styles applied to the column header element.
      */
-    disableChildrenFiltering: boolean;
+    columnHeader: string;
     /**
-     * If `true`, multiple selection using the CTRL or CMD key is disabled.
-     * @default false
+     * Styles applied to the header checkbox cell element.
      */
-    disableMultipleSelection: boolean;
+    columnHeaderCheckbox: string;
     /**
-     * If `true`, sorting with multiple columns is disabled.
-     * @default false
+     * Styles applied to the column header's draggable container element.
      */
-    disableMultipleColumnsSorting: boolean;
+    columnHeaderDraggableContainer: string;
     /**
-     * If `true`, the sorting will only be applied to the top level rows.
-     * @default false
+     * Styles applied to the column headers wrapper if a column is being dragged.
      */
-    disableChildrenSorting: boolean;
+    columnHeaderDropZone: string;
     /**
-     * If `true`, the selection on click on a row or cell is disabled.
-     * @default false
+     * Styles applied to the column header's title element;
      */
-    disableSelectionOnClick: boolean;
+    columnHeaderTitle: string;
     /**
-     * If `true`, the virtualization is disabled.
-     * @default false
+     * Styles applied to the column header's title container element.
      */
-    disableVirtualization: boolean;
+    columnHeaderTitleContainer: string;
     /**
-     * If `true`, the column pinning is disabled.
-     * @default false
+     * Styles applied to the column headers.
      */
-    disableColumnPinning: boolean;
+    columnHeaders: string;
     /**
-     * Controls whether to use the cell or row editing.
-     * @default "cell"
+     * Styles applied to the column headers's inner element.
      */
-    editMode: GridEditMode;
+    columnHeadersInner: string;
     /**
-     * Filtering can be processed on the server or client-side.
-     * Set it to 'server' if you would like to handle filtering on the server-side.
-     * @default "client"
+     * Styles applied to the column headers's inner element if there is a horizontal scrollbar.
      */
-    filterMode: GridFeatureMode;
+    'columnHeadersInner--scrollable': string;
     /**
-     * Set the height in pixel of the column headers in the grid.
-     * @default 56
+     * Styles applied to the column header separator if the column is resizable.
      */
-    headerHeight: number;
+    'columnSeparator--resizable': string;
     /**
-     * If `true`, the footer component is hidden.
-     * @default false
+     * Styles applied to the column header separator if the column is being resized.
      */
-    hideFooter: boolean;
+    'columnSeparator--resizing': string;
     /**
-     * If `true`, the pagination component in the footer is hidden.
-     * @default false
+     * Styles applied to the column header separator if the side is "left".
      */
-    hideFooterPagination: boolean;
+    'columnSeparator--sideLeft': string;
     /**
-     * If `true`, the row count in the footer is hidden.
-     * It has no effect if the pagination is enabled.
-     * @default false
+     * Styles applied to the column header separator if the side is "right".
      */
-    hideFooterRowCount: boolean;
+    'columnSeparator--sideRight': string;
     /**
-     * If `true`, the selected row count in the footer is hidden.
-     * @default false
+     * Styles applied to the column header separator element.
      */
-    hideFooterSelectedRowCount: boolean;
+    columnSeparator: string;
     /**
-     * Pass a custom logger in the components that implements the [[Logger]] interface.
-     * @default console
+     * Styles applied to the columns panel element.
      */
-    logger: Logger;
+    columnsPanel: string;
     /**
-     * Allows to pass the logging level or false to turn off logging.
-     * @default "debug"
+     * Styles applied to the columns panel row element.
      */
-    logLevel: keyof Logger | false;
-    /**
-     * If `true`, pagination is enabled.
-     * @default false
-     */
-    pagination: boolean;
-    /**
-     * Pagination can be processed on the server or client-side.
-     * Set it to 'client' if you would like to handle the pagination on the client-side.
-     * Set it to 'server' if you would like to handle the pagination on the server-side.
-     * @default "client"
-     */
-    paginationMode: GridFeatureMode;
-    /**
-     * Set the height in pixel of a row in the grid.
-     * @default 52
-     */
-    rowHeight: number;
-    /**
-     * Select the pageSize dynamically using the component UI.
-     * @default [25, 50, 100]
-     */
-    rowsPerPageOptions: number[];
+    columnsPanelRow: string;
     /**
-     * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
-     * @default false
+     * Styles applied to the panel element.
      */
-    treeData: boolean;
+    panel: string;
     /**
-     * If above 0, the row children will be expanded up to this depth.
-     * If equal to -1, all the row children will be expanded.
-     * @default 0
+     * Styles applied to the panel header element.
      */
-    defaultGroupingExpansionDepth: number;
+    panelHeader: string;
     /**
-     * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
-     * @default 80
+     * Styles applied to the panel wrapper element.
      */
-    scrollEndThreshold: number;
+    panelWrapper: string;
     /**
-     * If `true`, the right border of the cells are displayed.
-     * @default false
+     * Styles applied to the panel content element.
      */
-    showCellRightBorder: boolean;
+    panelContent: string;
     /**
-     * If `true`, the right border of the column headers are displayed.
-     * @default false
+     * Styles applied to the panel footer element.
      */
-    showColumnRightBorder: boolean;
+    panelFooter: string;
     /**
-     * The order of the sorting sequence.
-     * @default ['asc', 'desc', null]
+     * Styles applied to the paper element.
      */
-    sortingOrder: GridSortDirection[];
+    paper: string;
     /**
-     * Sorting can be processed on the server or client-side.
-     * Set it to 'client' if you would like to handle sorting on the client-side.
-     * Set it to 'server' if you would like to handle sorting on the server-side.
-     * @default "client"
+     * Styles applied to root of the boolean edit component.
      */
-    sortingMode: GridFeatureMode;
+    editBooleanCell: string;
     /**
-     * If positive, the Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
-     * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.
-     * @default 0
+     * Styles applied to the root of the filter form component.
      */
-    throttleRowsMs: number;
-}
-
-interface GridClasses {
+    filterForm: string;
     /**
-     * Styles applied to the root element if `autoHeight={true}`.
+     * Styles applied to the root of the input component.
      */
-    autoHeight: string;
+    editInputCell: string;
     /**
-     * Styles applied to the icon of the boolean cell.
+     * Styles applied to the filter icon element.
      */
-    booleanCell: string;
+    filterIcon: string;
     /**
-     * Styles applied to the cell element if the cell is editable.
+     * Styles applied to the footer container element.
      */
-    'cell--editable': string;
+    footerContainer: string;
     /**
-     * Styles applied to the cell element if the cell is in edit mode.
+     * Styles applied to the column header icon's container.
      */
-    'cell--editing': string;
+    iconButtonContainer: string;
     /**
-     * Styles applied to the cell element if `align="center"`.
+     * Styles applied to the column header separator icon element.
      */
-    'cell--textCenter': string;
+    iconSeparator: string;
     /**
-     * Styles applied to the cell element if `align="left"`.
+     * Styles applied to the main container element.
      */
-    'cell--textLeft': string;
+    main: string;
     /**
-     * Styles applied to the cell element if `align="right"`.
+     * Styles applied to the menu element.
      */
-    'cell--textRight': string;
+    menu: string;
     /**
-     * Styles applied to the cell element if the cell has a custom renderer.
+     * Styles applied to the menu icon element.
      */
-    'cell--withRenderer': string;
+    menuIcon: string;
     /**
-     * Styles applied to the cell element.
+     * Styles applied to the menu icon button element.
      */
-    cell: string;
+    menuIconButton: string;
     /**
-     * Styles applied to the cell checkbox element.
+     * Styles applied to the menu icon element if the menu is open.
      */
-    cellCheckbox: string;
+    menuOpen: string;
     /**
-     * Styles applied to the selection checkbox element.
+     * Styles applied to the menu list element.
      */
-    checkboxInput: string;
+    menuList: string;
     /**
-     * Styles applied to the column header if `headerAlign="center"`.
+     * Styles applied to the overlay element.
      */
-    'columnHeader--alignCenter': string;
+    overlay: string;
     /**
-     * Styles applied to the column header if `headerAlign="left"`.
+     * Styles applied to the virtualization container.
      */
-    'columnHeader--alignLeft': string;
+    virtualScroller: string;
     /**
-     * Styles applied to the column header if `headerAlign="right"`.
+     * Styles applied to the virtualization content.
      */
-    'columnHeader--alignRight': string;
+    virtualScrollerContent: string;
     /**
-     * Styles applied to the floating column header element when it is dragged.
+     * Styles applied to the virtualization render zone.
      */
-    'columnHeader--dragging': string;
+    virtualScrollerRenderZone: string;
     /**
-     * Styles applied to the column header if it is being dragged.
+     * Styles applied to the pinned columns.
      */
-    'columnHeader--moving': string;
+    pinnedColumns: string;
     /**
-     * Styles applied to the column header if the type of the column is `number`.
+     * Styles applied to the left pinned columns.
      */
-    'columnHeader--numeric': string;
+    'pinnedColumns--left': string;
     /**
-     * Styles applied to the column header if the column is sortable.
+     * Styles applied to the right pinned columns.
      */
-    'columnHeader--sortable': string;
+    'pinnedColumns--right': string;
     /**
-     * Styles applied to the column header if the column is sorted.
+     * Styles applied to the root element.
      */
-    'columnHeader--sorted': string;
+    root: string;
     /**
-     * Styles applied to the column header element.
+     * Styles applied to the row element if the row is editable.
      */
-    columnHeader: string;
+    'row--editable': string;
     /**
-     * Styles applied to the header checkbox cell element.
+     * Styles applied to the row element if the row is in edit mode.
      */
-    columnHeaderCheckbox: string;
+    'row--editing': string;
     /**
-     * Styles applied to the column header's draggable container element.
+     * Styles applied to the row element.
      */
-    columnHeaderDraggableContainer: string;
+    row: string;
     /**
-     * Styles applied to the column headers wrapper if a column is being dragged.
+     * Styles applied to the footer row count element to show the total number of rows.
+     * Only works when pagination is disabled.
      */
-    columnHeaderDropZone: string;
+    rowCount: string;
     /**
-     * Styles applied to the column header's title element;
+     * Styles applied to both scroll area elements.
      */
-    columnHeaderTitle: string;
+    scrollArea: string;
     /**
-     * Styles applied to the column header's title container element.
+     * Styles applied to the left scroll area element.
      */
-    columnHeaderTitleContainer: string;
+    'scrollArea--left': string;
     /**
-     * Styles applied to the column headers.
+     * Styles applied to the right scroll area element.
      */
-    columnHeaders: string;
+    'scrollArea--right': string;
     /**
-     * Styles applied to the column headers's inner element.
+     * Styles applied to the footer selected row count element.
      */
-    columnHeadersInner: string;
+    selectedRowCount: string;
     /**
-     * Styles applied to the column headers's inner element if there is a horizontal scrollbar.
+     * Styles applied to the sort icon element.
      */
-    'columnHeadersInner--scrollable': string;
+    sortIcon: string;
     /**
-     * Styles applied to the column header separator if the column is resizable.
+     * Styles applied to the toolbar container element.
      */
-    'columnSeparator--resizable': string;
+    toolbarContainer: string;
     /**
-     * Styles applied to the column header separator if the column is being resized.
+     * Styles applied to the toolbar filter list element.
      */
-    'columnSeparator--resizing': string;
+    toolbarFilterList: string;
     /**
-     * Styles applied to the column header separator element.
+     * Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
      */
-    columnSeparator: string;
+    withBorder: string;
     /**
-     * Styles applied to the columns panel element.
+     * Styles applied to the root of the grouping column of the tree data.
      */
-    columnsPanel: string;
+    treeDataGroupingCell: string;
     /**
-     * Styles applied to the columns panel row element.
+     * Styles applied to the toggle of the grouping column of the tree data.
      */
-    columnsPanelRow: string;
+    treeDataGroupingCellToggle: string;
+}
+declare type GridClassKey = keyof GridClasses;
+declare function getDataGridUtilityClass(slot: string): string;
+declare const gridClasses: Record<"actionsCell" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "cell" | "cellCheckbox" | "checkboxInput" | "columnHeader--alignCenter" | "columnHeader--alignLeft" | "columnHeader--alignRight" | "columnHeader--dragging" | "columnHeader--moving" | "columnHeader--numeric" | "columnHeader--sortable" | "columnHeader--sorted" | "columnHeader" | "columnHeaderCheckbox" | "columnHeaderDraggableContainer" | "columnHeaderDropZone" | "columnHeaderTitle" | "columnHeaderTitleContainer" | "columnHeaders" | "columnHeadersInner" | "columnHeadersInner--scrollable" | "columnSeparator--resizable" | "columnSeparator--resizing" | "columnSeparator--sideLeft" | "columnSeparator--sideRight" | "columnSeparator" | "columnsPanel" | "columnsPanelRow" | "panel" | "panelHeader" | "panelWrapper" | "panelContent" | "panelFooter" | "paper" | "editBooleanCell" | "editInputCell" | "filterForm" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "main" | "menu" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "overlay" | "root" | "row--editable" | "row--editing" | "row" | "rowCount" | "scrollArea--left" | "scrollArea--right" | "scrollArea" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle", string>;
+
+/**
+ * The props users can give to the `DataGrid` component.
+ */
+declare type DataGridProps = Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue, DataGridForcedPropsKey> & {
+    pagination?: true;
+};
+/**
+ * The props of the `DataGrid` component after the pre-processing phase.
+ */
+interface DataGridProcessedProps extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue {
+}
+/**
+ * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
+ * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
+ */
+declare type DataGridForcedPropsKey = 'apiRef' | 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection' | 'disableColumnReorder' | 'disableColumnResize' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
+/**
+ * The `DataGrid` options with a default value that must be merged with the value given through props.
+ */
+interface DataGridPropsWithComplexDefaultValueAfterProcessing {
+    components: GridSlotsComponent;
+    localeText: GridLocaleText;
+}
+/**
+ * The `DataGrid` options with a default value that must be merged with the value given through props.
+ */
+interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     /**
-     * Styles applied to the panel element.
+     * Overrideable components.
      */
-    panel: string;
+    components?: Partial<GridSlotsComponent>;
     /**
-     * Styles applied to the panel header element.
+     * Set the locale text of the grid.
+     * You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository.
      */
-    panelHeader: string;
+    localeText?: Partial<GridLocaleText>;
+}
+/**
+ * The `DataGrid` options with a default value overridable through props
+ * None of the entry of this interface should be optional, they all have default values and `DataGridProps` already applies a `Partial<DataGridSimpleOptions>` for the public interface
+ * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
+ * TODO: add multiSortKey
+ */
+interface DataGridPropsWithDefaultValues {
     /**
-     * Styles applied to the panel wrapper element.
+     * If `true`, the grid height is dynamic and follow the number of rows in the grid.
+     * @default false
      */
-    panelWrapper: string;
+    autoHeight: boolean;
     /**
-     * Styles applied to the panel content element.
+     * If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
+     * @default false
      */
-    panelContent: string;
+    autoPageSize: boolean;
     /**
-     * Styles applied to the panel footer element.
+     * If `true`, the grid get a first column with a checkbox that allows to select rows.
+     * @default false
      */
-    panelFooter: string;
+    checkboxSelection: boolean;
     /**
-     * Styles applied to the paper element.
+     * If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`.
+     * It only works if the pagination is enabled.
+     * @default false
      */
-    paper: string;
+    checkboxSelectionVisibleOnly: boolean;
     /**
-     * Styles applied to root of the boolean edit component.
+     * Number of extra columns to be rendered before/after the visible slice.
+     * @default 3
      */
-    editBooleanCell: string;
+    columnBuffer: number;
     /**
-     * Styles applied to the root of the filter form component.
+     * Number of extra rows to be rendered before/after the visible slice.
+     * @default 3
      */
-    filterForm: string;
+    rowBuffer: number;
     /**
-     * Styles applied to the root of the input component.
+     * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
+     * @default 3
      */
-    editInputCell: string;
+    rowThreshold: number;
     /**
-     * Styles applied to the filter icon element.
+     * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
+     * @default 3
      */
-    filterIcon: string;
+    columnThreshold: number;
     /**
-     * Styles applied to the footer container element.
+     * Set the density of the grid.
+     * @default "standard"
      */
-    footerContainer: string;
+    density: GridDensity;
     /**
-     * Styles applied to the column header icon's container.
+     * If `true`, rows will not be extended to fill the full width of the grid container.
+     * @default false
      */
-    iconButtonContainer: string;
+    disableExtendRowFullWidth: boolean;
     /**
-     * Styles applied to the column header separator icon element.
+     * If `true`, column filters are disabled.
+     * @default false
      */
-    iconSeparator: string;
+    disableColumnFilter: boolean;
     /**
-     * Styles applied to the main container element.
+     * If `true`, the column menu is disabled.
+     * @default false
      */
-    main: string;
+    disableColumnMenu: boolean;
     /**
-     * Styles applied to the menu element.
+     * If `true`, hiding/showing columns is disabled.
+     * @default false
      */
-    menu: string;
+    disableColumnSelector: boolean;
     /**
-     * Styles applied to the menu icon element.
+     * If `true`, the density selector is disabled.
+     * @default false
      */
-    menuIcon: string;
+    disableDensitySelector: boolean;
     /**
-     * Styles applied to the menu icon button element.
+     * If `true`, filtering with multiple columns is disabled.
+     * @default false
      */
-    menuIconButton: string;
+    disableMultipleColumnsFiltering: boolean;
     /**
-     * Styles applied to the menu icon element if the menu is open.
+     * If `true`, multiple selection using the CTRL or CMD key is disabled.
+     * @default false
      */
-    menuOpen: string;
+    disableMultipleSelection: boolean;
     /**
-     * Styles applied to the menu list element.
+     * If `true`, sorting with multiple columns is disabled.
+     * @default false
      */
-    menuList: string;
+    disableMultipleColumnsSorting: boolean;
     /**
-     * Styles applied to the overlay element.
+     * If `true`, the selection on click on a row or cell is disabled.
+     * @default false
      */
-    overlay: string;
+    disableSelectionOnClick: boolean;
     /**
-     * Styles applied to the virtualization container.
+     * If `true`, the virtualization is disabled.
+     * @default false
      */
-    virtualScroller: string;
+    disableVirtualization: boolean;
     /**
-     * Styles applied to the virtualization content.
+     * Controls whether to use the cell or row editing.
+     * @default "cell"
      */
-    virtualScrollerContent: string;
+    editMode: GridEditMode;
     /**
-     * Styles applied to the virtualization render zone.
+     * Filtering can be processed on the server or client-side.
+     * Set it to 'server' if you would like to handle filtering on the server-side.
+     * @default "client"
      */
-    virtualScrollerRenderZone: string;
+    filterMode: GridFeatureMode;
     /**
-     * Styles applied to the pinned columns.
+     * Set the height in pixel of the column headers in the grid.
+     * @default 56
      */
-    pinnedColumns: string;
+    headerHeight: number;
     /**
-     * Styles applied to the left pinned columns.
+     * If `true`, the footer component is hidden.
+     * @default false
      */
-    'pinnedColumns--left': string;
+    hideFooter: boolean;
     /**
-     * Styles applied to the right pinned columns.
+     * If `true`, the pagination component in the footer is hidden.
+     * @default false
      */
-    'pinnedColumns--right': string;
+    hideFooterPagination: boolean;
     /**
-     * Styles applied to the root element.
+     * If `true`, the row count in the footer is hidden.
+     * It has no effect if the pagination is enabled.
+     * @default false
      */
-    root: string;
+    hideFooterRowCount: boolean;
     /**
-     * Styles applied to the row element if the row is editable.
+     * If `true`, the selected row count in the footer is hidden.
+     * @default false
      */
-    'row--editable': string;
+    hideFooterSelectedRowCount: boolean;
     /**
-     * Styles applied to the row element if the row is in edit mode.
+     * Pass a custom logger in the components that implements the [[Logger]] interface.
+     * @default console
      */
-    'row--editing': string;
+    logger: Logger;
     /**
-     * Styles applied to the row element.
+     * Allows to pass the logging level or false to turn off logging.
+     * @default "debug"
      */
-    row: string;
+    logLevel: keyof Logger | false;
     /**
-     * Styles applied to the footer row count element to show the total number of rows.
-     * Only works when pagination is disabled.
+     * If `true`, pagination is enabled.
+     * @default false
      */
-    rowCount: string;
+    pagination: boolean;
     /**
-     * Styles applied to both scroll area elements.
+     * Pagination can be processed on the server or client-side.
+     * Set it to 'client' if you would like to handle the pagination on the client-side.
+     * Set it to 'server' if you would like to handle the pagination on the server-side.
+     * @default "client"
      */
-    scrollArea: string;
+    paginationMode: GridFeatureMode;
     /**
-     * Styles applied to the left scroll area element.
+     * Set the height in pixel of a row in the grid.
+     * @default 52
      */
-    'scrollArea--left': string;
+    rowHeight: number;
     /**
-     * Styles applied to the right scroll area element.
+     * Select the pageSize dynamically using the component UI.
+     * @default [25, 50, 100]
      */
-    'scrollArea--right': string;
+    rowsPerPageOptions: number[];
     /**
-     * Styles applied to the footer selected row count element.
+     * If `true`, the right border of the cells are displayed.
+     * @default false
      */
-    selectedRowCount: string;
+    showCellRightBorder: boolean;
     /**
-     * Styles applied to the sort icon element.
+     * If `true`, the right border of the column headers are displayed.
+     * @default false
      */
-    sortIcon: string;
+    showColumnRightBorder: boolean;
     /**
-     * Styles applied to the toolbar container element.
+     * The order of the sorting sequence.
+     * @default ['asc', 'desc', null]
      */
-    toolbarContainer: string;
+    sortingOrder: GridSortDirection[];
     /**
-     * Styles applied to the toolbar filter list element.
+     * Sorting can be processed on the server or client-side.
+     * Set it to 'client' if you would like to handle sorting on the client-side.
+     * Set it to 'server' if you would like to handle sorting on the server-side.
+     * @default "client"
      */
-    toolbarFilterList: string;
+    sortingMode: GridFeatureMode;
     /**
-     * Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
+     * If positive, the Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
+     * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.
+     * @default 0
      */
-    withBorder: string;
+    throttleRowsMs: number;
     /**
-     * Styles applied to the root of the grouping column of the tree data.
+     * If `true`, reordering columns is disabled.
+     * @default false
      */
-    treeDataGroupingCell: string;
+    disableColumnReorder: boolean;
     /**
-     * Styles applied to the toggle of the grouping column of the tree data.
+     * If `true`, resizing columns is disabled.
+     * @default false
      */
-    treeDataGroupingCellToggle: string;
-}
-declare type GridClassKey = keyof GridClasses;
-declare function getDataGridUtilityClass(slot: string): string;
-declare const gridClasses: Record<"actionsCell" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "cell" | "cellCheckbox" | "checkboxInput" | "columnHeader--alignCenter" | "columnHeader--alignLeft" | "columnHeader--alignRight" | "columnHeader--dragging" | "columnHeader--moving" | "columnHeader--numeric" | "columnHeader--sortable" | "columnHeader--sorted" | "columnHeader" | "columnHeaderCheckbox" | "columnHeaderDraggableContainer" | "columnHeaderDropZone" | "columnHeaderTitle" | "columnHeaderTitleContainer" | "columnHeaders" | "columnHeadersInner" | "columnHeadersInner--scrollable" | "columnSeparator--resizable" | "columnSeparator--resizing" | "columnSeparator" | "columnsPanel" | "columnsPanelRow" | "panel" | "panelHeader" | "panelWrapper" | "panelContent" | "panelFooter" | "paper" | "editBooleanCell" | "editInputCell" | "filterForm" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "main" | "menu" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "overlay" | "root" | "row--editable" | "row--editing" | "row" | "rowCount" | "scrollArea--left" | "scrollArea--right" | "scrollArea" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle", string>;
-
-/**
- * The grid component react props before applying the default values.
- */
-interface GridInputComponentProps extends Partial<GridSimpleOptions>, Partial<GridMergedOptions>, GridComponentOtherProps {
+    disableColumnResize: boolean;
 }
 /**
- * The grid component react props after applying the default values.
+ * The `DataGrid` props with no default value.
  */
-interface GridComponentProps extends GridSimpleOptions, GridProcessedMergedOptions, GridComponentOtherProps {
-}
-interface GridComponentOtherProps extends CommonProps {
+interface DataGridPropsWithoutDefaultValue extends CommonProps {
     /**
      * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
      */
@@ -5286,14 +5302,6 @@ interface GridComponentOtherProps extends CommonProps {
      * @returns {boolean} A boolean indicating if the cell is selectable.
      */
     isRowSelectable?: (params: GridRowParams) => boolean;
-    /**
-     * Determines the path of a row in the tree data.
-     * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
-     * Note that all paths must contain at least one element.
-     * @param {GridRowModel} row The row from which we want the path.
-     * @returns {string[]} The path to the row.
-     */
-    getTreeDataPath?: (row: GridRowModel) => string[];
     /**
      * Callback fired when the edit cell value changes.
      * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
@@ -5423,20 +5431,6 @@ interface GridComponentOtherProps extends CommonProps {
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onColumnOrderChange?: GridEventListener<GridEvents.columnOrderChange>;
-    /**
-     * Callback fired while a column is being resized.
-     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
-     * @param {MuiEvent<React.MouseEvent>} event The event object.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     */
-    onColumnResize?: GridEventListener<GridEvents.columnResize>;
-    /**
-     * Callback fired when the width of a column is changed.
-     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
-     * @param {MuiEvent<React.MouseEvent>} event The event object.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     */
-    onColumnWidthChange?: GridEventListener<GridEvents.columnWidthChange>;
     /**
      * Callback fired when a column visibility changes.
      * @param {GridColumnVisibilityChangeParams} params With all properties from [[GridColumnVisibilityChangeParams]].
@@ -5451,13 +5445,6 @@ interface GridComponentOtherProps extends CommonProps {
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onRowClick?: GridEventListener<GridEvents.rowClick>;
-    /**
-     * Callback fired when scrolling to the bottom of the grid viewport.
-     * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
-     * @param {MuiEvent<{}>} event The event object.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     */
-    onRowsScrollEnd?: GridEventListener<GridEvents.rowsScrollEnd>;
     /**
      * Callback fired when a double click event comes from a row container element.
      * @param {GridRowParams} params With all properties from [[RowParams]].
@@ -5543,16 +5530,6 @@ interface GridComponentOtherProps extends CommonProps {
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onSortModelChange?: (model: GridSortModel, details: GridCallbackDetails) => void;
-    /**
-     * The column fields to display pinned to left or right.
-     */
-    pinnedColumns?: GridPinnedColumns;
-    /**
-     * Callback fired when the pinned columns have changed.
-     * @param {GridPinnedColumns} pinnedColumns The changed pinned columns.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     */
-    onPinnedColumnsChange?: (pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void;
     /**
      * The label of the grid.
      */
@@ -5595,22 +5572,127 @@ interface GridComponentOtherProps extends CommonProps {
      * Overrideable components props dynamically passed to the component at rendering.
      */
     componentsProps?: GridSlotsComponentsProps;
-    /**
-     * The grouping column used by the tree data.
-     */
-    groupingColDef?: GridGroupingColDefOverride | ((params: GridGroupingColDefOverrideParams) => GridGroupingColDefOverride | undefined | null);
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
 }
 
-declare const useGridProcessedProps: (inProps: GridInputComponentProps) => GridComponentProps;
+/**
+ * The props of the `DataGridPro` component after the pre-processing phase.
+ */
+interface DataGridProProcessedProps extends DataGridProPropsWithDefaultValue, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridProPropsWithoutDefaultValue {
+}
+/**
+ * The `DataGridPro` options with a default value overridable through props
+ * None of the entry of this interface should be optional, they all have default values and `DataGridProps` already applies a `Partial<DataGridSimpleOptions>` for the public interface
+ * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
+ */
+interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefaultValues {
+    /**
+     * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+     * @default 80
+     */
+    scrollEndThreshold: number;
+    /**
+     * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
+     * @default false
+     */
+    treeData: boolean;
+    /**
+     * If above 0, the row children will be expanded up to this depth.
+     * If equal to -1, all the row children will be expanded.
+     * @default 0
+     */
+    defaultGroupingExpansionDepth: number;
+    /**
+     * Determines if a group should be expanded after its creation.
+     * This prop takes priority over the `defaultGroupingExpansionDepth` prop.
+     * @param {GridRowTreeNodeConfig} node The node of the group to test.
+     * @returns {boolean} A boolean indicating if the group is expanded.
+     */
+    isGroupExpandedByDefault?: (node: GridRowTreeNodeConfig) => boolean;
+    /**
+     * If `true`, the column pinning is disabled.
+     * @default false
+     */
+    disableColumnPinning: boolean;
+    /**
+     * If `true`, the filtering will only be applied to the top level rows.
+     * @default false
+     */
+    disableChildrenFiltering: boolean;
+    /**
+     * If `true`, the sorting will only be applied to the top level rows.
+     * @default false
+     */
+    disableChildrenSorting: boolean;
+}
+interface DataGridProPropsWithoutDefaultValue extends DataGridPropsWithoutDefaultValue {
+    /**
+     * Determines the path of a row in the tree data.
+     * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
+     * Note that all paths must contain at least one element.
+     * @param {GridRowModel} row The row from which we want the path.
+     * @returns {string[]} The path to the row.
+     */
+    getTreeDataPath?: (row: GridRowModel) => string[];
+    /**
+     * Callback fired while a column is being resized.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnResize?: GridEventListener<GridEvents.columnResize>;
+    /**
+     * Callback fired when the width of a column is changed.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnWidthChange?: GridEventListener<GridEvents.columnWidthChange>;
+    /**
+     * Callback fired when scrolling to the bottom of the grid viewport.
+     * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onRowsScrollEnd?: GridEventListener<GridEvents.rowsScrollEnd>;
+    /**
+     * The column fields to display pinned to left or right.
+     */
+    pinnedColumns?: GridPinnedColumns;
+    /**
+     * Callback fired when the pinned columns have changed.
+     * @param {GridPinnedColumns} pinnedColumns The changed pinned columns.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onPinnedColumnsChange?: (pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void;
+    /**
+     * The grouping column used by the tree data.
+     */
+    groupingColDef?: GridGroupingColDefOverride | ((params: GridGroupingColDefOverrideParams) => GridGroupingColDefOverride | undefined | null);
+}
+
+declare const useGridRootProps: () => DataGridProcessedProps | DataGridProProcessedProps;
+
+declare function useGridScrollFn(apiRef: GridApiRef, renderingZoneElementRef: React$1.RefObject<HTMLDivElement>, columnHeadersElementRef: React$1.RefObject<HTMLDivElement>): [GridScrollFn];
+
+declare const useGridSelector: <T>(apiRef: GridApiRef, selector: (state: GridState) => T) => T;
+
+/**
+ * @deprecated Use `apiRef.current.state`, `apiRef.current.setState` and `apiRef.current.forceUpdate` instead.
+ */
+declare const useGridState: (apiRef: GridApiRef) => readonly [GridState, (state: GridState | ((previousState: GridState) => GridState)) => boolean, () => void];
+
+declare const useGridNativeEventListener: <E extends Event>(apiRef: GridApiRef, ref: React$1.MutableRefObject<HTMLDivElement | null> | (() => Element | undefined | null), eventName: string, handler?: ((event: E) => any) | undefined, options?: AddEventListenerOptions | undefined) => void;
 
 interface Localization {
     components: {
         MuiDataGrid: {
-            defaultProps: Pick<GridMergedOptions, 'localeText'>;
+            defaultProps: {
+                localeText: Partial<GridLocaleText>;
+            };
         };
     };
 }
@@ -5631,6 +5713,8 @@ declare const esES: Localization;
 
 declare const faIR: Localization;
 
+declare const fiFI: Localization;
+
 declare const frFR: Localization;
 
 declare const heIL: Localization;
@@ -5659,18 +5743,12 @@ declare const viVN: Localization;
 
 declare const zhCN: Localization;
 
-declare const DataGrid: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<GridInputComponentProps, "apiRef" | "checkboxSelectionVisibleOnly" | "disableColumnResize" | "disableColumnReorder" | "disableMultipleColumnsFiltering" | "disableMultipleColumnsSorting" | "disableMultipleSelection" | "disableChildrenFiltering" | "disableChildrenSorting" | "disableColumnPinning" | "throttleRowsMs" | "hideFooterRowCount" | "options" | "onRowsScrollEnd" | "scrollEndThreshold" | "pinnedColumns" | "onPinnedColumnsChange" | "treeData" | "getTreeDataPath" | "groupingColDef" | "defaultGroupingExpansionDepth" | "signature"> & {
+declare const DataGrid: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue, DataGridForcedPropsKey> & {
     pagination?: true | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>>;
 
-declare const MAX_PAGE_SIZE = 100;
-/**
- * The grid component react props interface.
- */
-declare type DataGridProps = Omit<GridInputComponentProps, 'apiRef' | 'checkboxSelectionVisibleOnly' | 'disableColumnResize' | 'disableColumnReorder' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection' | 'disableChildrenFiltering' | 'disableChildrenSorting' | 'disableColumnPinning' | 'throttleRowsMs' | 'hideFooterRowCount' | 'options' | 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pinnedColumns' | 'onPinnedColumnsChange' | 'treeData' | 'getTreeDataPath' | 'groupingColDef' | 'defaultGroupingExpansionDepth' | 'signature'> & {
-    pagination?: true;
-};
+declare const useDataGridComponent: (apiRef: GridApiRef, props: DataGridProcessedProps) => void;
 
-declare const useDataGridComponent: (apiRef: GridApiRef, props: GridComponentProps) => void;
+declare const MAX_PAGE_SIZE = 100;
 
-export { AutoSizerProps, AutoSizerSize, CursorCoordinates, DEFAULT_GRID_COL_TYPE_KEY, DataGrid, DataGridProps, ElementSize, GRID_ACTIONS_COL_DEF, GRID_BOOLEAN_COL_DEF, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DATETIME_COL_DEF, GRID_DATE_COL_DEF, GRID_DEFAULT_LOCALE_TEXT, GRID_EXPERIMENTAL_ENABLED, GRID_NUMERIC_COL_DEF, GRID_SINGLE_SELECT_COL_DEF, GRID_STRING_COL_DEF, GridActionsCell, GridActionsCellItem, GridActionsCellItemProps, GridActionsColDef, GridAddIcon, GridAlignment, GridApi, GridApiContext, GridApiRef, GridArrowDownwardIcon, GridArrowUpwardIcon, GridAutoSizer, GridBody, GridCallbackDetails, GridCell, GridCellCheckboxForwardRef, GridCellCheckboxRenderer, GridCellClassFn, GridCellClassNamePropType, GridCellEditCommitParams, GridCellEventLookup, GridCellIdentifier, GridCellIndexCoordinates, GridCellMode, GridCellModes, GridCellParams, GridCellProps, GridCellValue, GridCheckCircleIcon, GridCheckIcon, GridClassKey, GridClasses, GridClipboardApi, GridCloseIcon, GridColDef, GridColType, GridColTypeDef, GridColumnApi, GridColumnHeaderClassFn, GridColumnHeaderClassNamePropType, GridColumnHeaderEventLookup, GridColumnHeaderIndexCoordinates, GridColumnHeaderItem, GridColumnHeaderMenu, GridColumnHeaderMenuProps, GridColumnHeaderParams, GridColumnHeaderSeparator, GridColumnHeaderSeparatorProps, GridColumnHeaderSortIcon, GridColumnHeaderSortIconProps, GridColumnHeaderTitle, GridColumnHeaderTitleProps, GridColumnIcon, GridColumnIdentifier, GridColumnLookup, GridColumnMenu, GridColumnMenuApi, GridColumnMenuContainer, GridColumnMenuProps, GridColumnMenuState, GridColumnOrderChangeParams, GridColumnPinningApi, GridColumnPinningMenuItems, GridColumnReorderState, GridColumnResizeParams, GridColumnResizeState, GridColumnTypesRecord, GridColumnVisibilityChangeParams, GridColumns, GridColumnsMenuItem, GridColumnsMeta, GridColumnsPanel, GridColumnsState, GridCommitCellChangeParams, GridComparatorFn, GridComponentProps, GridControlledStateEventLookup, GridCoreApi, GridCsvExportApi, GridCsvExportOptions, GridDensity, GridDensityApi, GridDensityOption, GridDensityState, GridDensityTypes, GridDimensions, GridDimensionsApi, GridDisableVirtualizationApi, GridDragIcon, GridEditCellProps, GridEditCellPropsParams, GridEditCellValueParams, GridEditInputCell, GridEditMode, GridEditModes, GridEditRowApi, GridEditRowProps, GridEditRowsModel, GridEditSingleSelectCell, GridEnrichedColDef, GridErrorHandler, GridEventListener, GridEventLookup, GridEventPublisher, GridEvents, GridEventsStr, GridExpandLessIcon, GridExpandMoreIcon, GridExportFormat, GridExportOptions, GridFeatureMode, GridFeatureModeConstant, GridFilterActiveItemsLookup, GridFilterAltIcon, GridFilterApi, GridFilterForm, GridFilterFormProps, GridFilterInitialState, GridFilterInputDate, GridFilterInputDateProps, GridFilterInputSingleSelect, GridFilterInputSingleSelectProps, GridFilterInputValue, GridFilterInputValueProps, GridFilterItem, GridFilterItemProps, GridFilterListIcon, GridFilterMenuItem, GridFilterModel, GridFilterOperator, GridFilterPanel, GridFilterState, GridFocusApi, GridFocusState, GridFooter, GridFooterContainer, GridFooterContainerProps, GridFooterPlaceholder, GridGroupingColDefOverride, GridGroupingColDefOverrideParams, GridHeader, GridHeaderCheckbox, GridHeaderPlaceholder, GridHeaderSelectionCheckboxParams, GridIconSlotsComponent, GridInitialState, GridInputComponentProps, GridInputSelectionModel, GridKeyValue, GridLinkOperator, GridLoadIcon, GridLoadingOverlay, GridLocaleText, GridLocaleTextApi, GridMenu, GridMenuIcon, GridMenuProps, GridMoreVertIcon, GridNativeColTypes, GridNoRowsOverlay, GridOverlay, GridOverlayProps, GridOverlays, GridPagination, GridPaginationApi, GridPaginationState, GridPanel, GridPanelClasses, GridPanelContent, GridPanelFooter, GridPanelHeader, GridPanelProps, GridPanelWrapper, GridParamsApi, GridPinnedColumns, GridPinnedPosition, GridPreProcessEditCellProps, GridPreferencePanelInitialState, GridPreferencePanelState, GridPreferencePanelsValue, GridPreferencesPanel, GridPreferencesPanelApi, GridPrintExportApi, GridPrintExportOptions, GridRenderCellParams, GridRenderColumnsProps, GridRenderContext, GridRenderContextProps, GridRenderEditCellParams, GridRenderPaginationProps, GridRenderRowProps, GridRoot, GridRootContainerRef, GridRootProps, GridRow, GridRowApi, GridRowCount, GridRowData, GridRowEntry, GridRowEventLookup, GridRowId, GridRowIdGetter, GridRowMode, GridRowModel, GridRowModelUpdate, GridRowModes, GridRowParams, GridRowProps, GridRowScrollEndParams, GridRowSelectionCheckboxParams, GridRowTreeConfig, GridRowTreeNodeConfig, GridRowsLookup, GridRowsProp, GridRowsState, GridSaveAltIcon, GridScrollApi, GridScrollArea, GridScrollFn, GridScrollParams, GridSearchIcon, GridSelectedRowCount, GridSelectionApi, GridSelectionModel, GridSeparatorIcon, GridSignature, GridSlotsComponent, GridSlotsComponentsProps, GridSortApi, GridSortCellParams, GridSortColumnLookup, GridSortDirection, GridSortItem, GridSortModel, GridSortModelParams, GridSortingInitialState, GridSortingState, GridState, GridStateApi, GridStateChangeParams, GridStateColDef, GridTabIndexState, GridTableRowsIcon, GridToolbar, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarContainerProps, GridToolbarDensitySelector, GridToolbarExport, GridToolbarExportProps, GridToolbarFilterButton, GridToolbarFilterButtonProps, GridTranslationKeys, GridTreeDataGroupingCell, GridTripleDotsVerticalIcon, GridTypeFilterInputValueProps, GridUpdateAction, GridValueFormatterParams, GridValueGetterFullParams, GridValueGetterParams, GridValueGetterSimpleParams, GridValueOptionsParams, GridValueSetterParams, GridViewHeadlineIcon, GridViewStreamIcon, HideGridColMenuItem, Logger, MAX_PAGE_SIZE, MuiBaseEvent, MuiEvent, SUBMIT_FILTER_DATE_STROKE_TIME, SUBMIT_FILTER_STROKE_TIME, SortGridMenuItems, allGridColumnsFieldsSelector, allGridColumnsSelector, arSD, bgBG, checkGridRowIdIsValid, createUseGridApiEventHandler, csCZ, deDE, elGR, enUS, esES, faIR, filterableGridColumnsIdsSelector, filterableGridColumnsSelector, frFR, getDataGridUtilityClass, getDefaultGridFilterModel, getGridBooleanOperators, getGridColDef, getGridDateOperators, getGridDefaultColumnTypes, getGridNumericColumnOperators, getGridSingleSelectOperators, getGridStringOperators, gridClasses, gridColumnLookupSelector, gridColumnMenuSelector, gridColumnReorderDragColSelector, gridColumnReorderSelector, gridColumnResizeSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnsTotalWidthSelector, gridDateFormatter, gridDateTimeFormatter, gridDensityHeaderHeightSelector, gridDensityRowHeightSelector, gridDensitySelector, gridDensityValueSelector, gridEditRowsStateSelector, gridFilterActiveItemsLookupSelector, gridFilterActiveItemsSelector, gridFilterModelSelector, gridFilterStateSelector, gridFilteredDescendantCountLookupSelector, gridFocusCellSelector, gridFocusColumnHeaderSelector, gridFocusStateSelector, gridPageSelector, gridPageSizeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridPaginationRowRangeSelector, gridPaginationSelector, gridPanelClasses, gridPreferencePanelStateSelector, gridResizingColumnFieldSelector, gridRowCountSelector, gridRowGroupingNameSelector, gridRowIdsSelector, gridRowTreeDepthSelector, gridRowTreeSelector, gridRowsLookupSelector, gridRowsStateSelector, gridSelectionStateSelector, gridSortColumnLookupSelector, gridSortModelSelector, gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridTabIndexCellSelector, gridTabIndexColumnHeaderSelector, gridTabIndexStateSelector, gridTopLevelRowCountSelector, gridVisibleColumnFieldsSelector, gridVisibleRowCountSelector, gridVisibleRowsLookupSelector, gridVisibleRowsSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedRowIdsSelector, gridVisibleSortedTopLevelRowEntriesSelector, gridVisibleTopLevelRowCountSelector, heIL, itIT, jaJP, koKR, nlNL, plPL, ptBR, renderActionsCell, renderEditInputCell, renderEditSingleSelectCell, ruRU, selectedGridRowsCountSelector, selectedGridRowsSelector, selectedIdsLookupSelector, skSK, trTR, ukUA, useDataGridComponent, useGridApi, useGridApiContext, useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridApiRef, useGridLogger, useGridNativeEventListener, useGridProcessedProps, useGridRootProps, useGridScrollFn, useGridSelector, useGridState, viVN, visibleGridColumnsLengthSelector, visibleGridColumnsSelector, zhCN };
+export { AutoSizerProps, AutoSizerSize, CursorCoordinates, DEFAULT_GRID_COL_TYPE_KEY, DataGrid, DataGridProps, ElementSize, GRID_ACTIONS_COL_DEF, GRID_BOOLEAN_COL_DEF, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DATETIME_COL_DEF, GRID_DATE_COL_DEF, GRID_DEFAULT_LOCALE_TEXT, GRID_EXPERIMENTAL_ENABLED, GRID_NUMERIC_COL_DEF, GRID_SINGLE_SELECT_COL_DEF, GRID_STRING_COL_DEF, GRID_TREE_DATA_GROUPING_FIELD, GridActionsCell, GridActionsCellItem, GridActionsCellItemProps, GridActionsColDef, GridAddIcon, GridAlignment, GridApi, GridApiContext, GridApiRef, GridArrowDownwardIcon, GridArrowUpwardIcon, GridAutoSizer, GridBody, GridCallbackDetails, GridCell, GridCellCheckboxForwardRef, GridCellCheckboxRenderer, GridCellClassFn, GridCellClassNamePropType, GridCellEditCommitParams, GridCellEventLookup, GridCellIdentifier, GridCellIndexCoordinates, GridCellMode, GridCellModes, GridCellParams, GridCellProps, GridCellValue, GridCheckCircleIcon, GridCheckIcon, GridClassKey, GridClasses, GridClipboardApi, GridCloseIcon, GridColDef, GridColType, GridColTypeDef, GridColumnApi, GridColumnHeaderClassFn, GridColumnHeaderClassNamePropType, GridColumnHeaderEventLookup, GridColumnHeaderIndexCoordinates, GridColumnHeaderItem, GridColumnHeaderMenu, GridColumnHeaderMenuProps, GridColumnHeaderParams, GridColumnHeaderSeparator, GridColumnHeaderSeparatorProps, GridColumnHeaderSeparatorSides, GridColumnHeaderSortIcon, GridColumnHeaderSortIconProps, GridColumnHeaderTitle, GridColumnHeaderTitleProps, GridColumnIcon, GridColumnIdentifier, GridColumnLookup, GridColumnMenu, GridColumnMenuApi, GridColumnMenuContainer, GridColumnMenuProps, GridColumnMenuState, GridColumnOrderChangeParams, GridColumnPinningApi, GridColumnPinningMenuItems, GridColumnReorderState, GridColumnResizeParams, GridColumnResizeState, GridColumnTypesRecord, GridColumnVisibilityChangeParams, GridColumns, GridColumnsMenuItem, GridColumnsMeta, GridColumnsPanel, GridColumnsState, GridCommitCellChangeParams, GridComparatorFn, GridControlledStateEventLookup, GridCoreApi, GridCsvExportApi, GridCsvExportOptions, GridDensity, GridDensityApi, GridDensityOption, GridDensityState, GridDensityTypes, GridDimensions, GridDimensionsApi, GridDisableVirtualizationApi, GridDragIcon, GridEditCellProps, GridEditCellPropsParams, GridEditCellValueParams, GridEditInputCell, GridEditMode, GridEditModes, GridEditRowApi, GridEditRowProps, GridEditRowsModel, GridEditSingleSelectCell, GridEnrichedColDef, GridErrorHandler, GridEventListener, GridEventLookup, GridEventPublisher, GridEvents, GridEventsStr, GridExpandLessIcon, GridExpandMoreIcon, GridExportFormat, GridExportOptions, GridFeatureMode, GridFeatureModeConstant, GridFilterActiveItemsLookup, GridFilterAltIcon, GridFilterApi, GridFilterForm, GridFilterFormProps, GridFilterInitialState, GridFilterInputDate, GridFilterInputDateProps, GridFilterInputSingleSelect, GridFilterInputSingleSelectProps, GridFilterInputValue, GridFilterInputValueProps, GridFilterItem, GridFilterItemProps, GridFilterListIcon, GridFilterMenuItem, GridFilterModel, GridFilterOperator, GridFilterPanel, GridFilterState, GridFocusApi, GridFocusState, GridFooter, GridFooterContainer, GridFooterContainerProps, GridFooterPlaceholder, GridGroupingColDefOverride, GridGroupingColDefOverrideParams, GridHeader, GridHeaderCheckbox, GridHeaderPlaceholder, GridHeaderSelectionCheckboxParams, GridIconSlotsComponent, GridInitialState, GridInputSelectionModel, GridKeyValue, GridLinkOperator, GridLoadIcon, GridLoadingOverlay, GridLocaleText, GridLocaleTextApi, GridMenu, GridMenuIcon, GridMenuProps, GridMoreVertIcon, GridNativeColTypes, GridNoRowsOverlay, GridOverlay, GridOverlayProps, GridOverlays, GridPagination, GridPaginationApi, GridPaginationInitialState, GridPaginationState, GridPanel, GridPanelClasses, GridPanelContent, GridPanelFooter, GridPanelHeader, GridPanelProps, GridPanelWrapper, GridParamsApi, GridPinnedColumns, GridPinnedPosition, GridPreProcessEditCellProps, GridPreferencePanelInitialState, GridPreferencePanelState, GridPreferencePanelsValue, GridPreferencesPanel, GridPreferencesPanelApi, GridPrintExportApi, GridPrintExportOptions, GridRenderCellParams, GridRenderColumnsProps, GridRenderContext, GridRenderContextProps, GridRenderEditCellParams, GridRenderPaginationProps, GridRenderRowProps, GridRoot, GridRootContainerRef, GridRootProps, GridRow, GridRowApi, GridRowCount, GridRowData, GridRowEntry, GridRowEventLookup, GridRowId, GridRowIdGetter, GridRowMode, GridRowModel, GridRowModelUpdate, GridRowModes, GridRowParams, GridRowProps, GridRowScrollEndParams, GridRowSelectionCheckboxParams, GridRowTreeConfig, GridRowTreeNodeConfig, GridRowsLookup, GridRowsProp, GridRowsState, GridSaveAltIcon, GridScrollApi, GridScrollArea, GridScrollFn, GridScrollParams, GridSearchIcon, GridSelectedRowCount, GridSelectionApi, GridSelectionModel, GridSeparatorIcon, GridSignature, GridSlotsComponent, GridSlotsComponentsProps, GridSortApi, GridSortCellParams, GridSortColumnLookup, GridSortDirection, GridSortItem, GridSortModel, GridSortModelParams, GridSortingInitialState, GridSortingState, GridState, GridStateApi, GridStateChangeParams, GridStateColDef, GridTabIndexState, GridTableRowsIcon, GridToolbar, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarContainerProps, GridToolbarDensitySelector, GridToolbarExport, GridToolbarExportProps, GridToolbarFilterButton, GridToolbarFilterButtonProps, GridTranslationKeys, GridTreeDataGroupingCell, GridTripleDotsVerticalIcon, GridTypeFilterInputValueProps, GridUpdateAction, GridValueFormatterParams, GridValueGetterFullParams, GridValueGetterParams, GridValueGetterSimpleParams, GridValueOptionsParams, GridValueSetterParams, GridViewHeadlineIcon, GridViewStreamIcon, HideGridColMenuItem, Logger, MAX_PAGE_SIZE, MuiBaseEvent, MuiEvent, SUBMIT_FILTER_DATE_STROKE_TIME, SUBMIT_FILTER_STROKE_TIME, SortGridMenuItems, allGridColumnsFieldsSelector, allGridColumnsSelector, arSD, bgBG, checkGridRowIdIsValid, createUseGridApiEventHandler, csCZ, deDE, elGR, enUS, esES, faIR, fiFI, filterableGridColumnsIdsSelector, filterableGridColumnsSelector, frFR, getDataGridUtilityClass, getDefaultGridFilterModel, getGridBooleanOperators, getGridColDef, getGridDateOperators, getGridDefaultColumnTypes, getGridNumericColumnOperators, getGridSingleSelectOperators, getGridStringOperators, gridClasses, gridColumnLookupSelector, gridColumnMenuSelector, gridColumnReorderDragColSelector, gridColumnReorderSelector, gridColumnResizeSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnsTotalWidthSelector, gridDateFormatter, gridDateTimeFormatter, gridDensityHeaderHeightSelector, gridDensityRowHeightSelector, gridDensitySelector, gridDensityValueSelector, gridEditRowsStateSelector, gridFilterActiveItemsLookupSelector, gridFilterActiveItemsSelector, gridFilterModelSelector, gridFilterStateSelector, gridFilteredDescendantCountLookupSelector, gridFocusCellSelector, gridFocusColumnHeaderSelector, gridFocusStateSelector, gridPageCountSelector, gridPageSelector, gridPageSizeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridPaginationRowRangeSelector, gridPaginationSelector, gridPanelClasses, gridPreferencePanelStateSelector, gridResizingColumnFieldSelector, gridRowCountSelector, gridRowGroupingNameSelector, gridRowIdsSelector, gridRowTreeDepthSelector, gridRowTreeSelector, gridRowsLookupSelector, gridRowsStateSelector, gridSelectionStateSelector, gridSortColumnLookupSelector, gridSortModelSelector, gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridTabIndexCellSelector, gridTabIndexColumnHeaderSelector, gridTabIndexStateSelector, gridTopLevelRowCountSelector, gridVisibleColumnFieldsSelector, gridVisibleRowCountSelector, gridVisibleRowsLookupSelector, gridVisibleRowsSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedRowIdsSelector, gridVisibleSortedTopLevelRowEntriesSelector, gridVisibleTopLevelRowCountSelector, heIL, itIT, jaJP, koKR, nlNL, plPL, ptBR, renderActionsCell, renderEditInputCell, renderEditSingleSelectCell, ruRU, selectedGridRowsCountSelector, selectedGridRowsSelector, selectedIdsLookupSelector, skSK, trTR, ukUA, useDataGridComponent, useGridApi, useGridApiContext, useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridApiRef, useGridLogger, useGridNativeEventListener, useGridRootProps, useGridScrollFn, useGridSelector, useGridState, viVN, visibleGridColumnsLengthSelector, visibleGridColumnsSelector, zhCN };