@mui/x-data-grid 7.26.0 → 7.27.1

package/locales/bnBD.js

@@ -0,0 +1,154 @@
+import { bnBD as bnBDCore } from '@mui/material/locale';
+import { getGridLocalization } from "../utils/getGridLocalization.js";
+const bnBDGrid = {
+  // Root
+  noRowsLabel: 'কোনো সারি নেই',
+  noResultsOverlayLabel: 'কোনো ফলাফল পাওয়া যায়নি।',
+  // Density selector toolbar button text
+  toolbarDensity: 'ঘনত্ব',
+  toolbarDensityLabel: 'ঘনত্ব',
+  toolbarDensityCompact: 'সংকুচিত',
+  toolbarDensityStandard: 'মানক',
+  toolbarDensityComfortable: 'স্বাচ্ছন্দ্যদায়ক',
+  // Columns selector toolbar button text
+  toolbarColumns: 'কলাম',
+  toolbarColumnsLabel: 'কলাম নির্বাচন করুন',
+  // Filters toolbar button text
+  toolbarFilters: 'ফিল্টার',
+  toolbarFiltersLabel: 'ফিল্টার দেখান',
+  toolbarFiltersTooltipHide: 'ফিল্টার লুকান',
+  toolbarFiltersTooltipShow: 'ফিল্টার দেখান',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} টি সক্রিয় ফিল্টার` : `${count} টি সক্রিয় ফিল্টার`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'অনুসন্ধান করুন…',
+  toolbarQuickFilterLabel: 'অনুসন্ধান',
+  toolbarQuickFilterDeleteIconLabel: 'পরিষ্কার করুন',
+  // Export selector toolbar button text
+  toolbarExport: 'এক্সপোর্ট',
+  toolbarExportLabel: 'এক্সপোর্ট',
+  toolbarExportCSV: 'CSV হিসাবে ডাউনলোড করুন',
+  toolbarExportPrint: 'প্রিন্ট করুন',
+  toolbarExportExcel: 'Excel হিসাবে ডাউনলোড করুন',
+  // Columns management text
+  columnsManagementSearchTitle: 'অনুসন্ধান',
+  columnsManagementNoColumns: 'কোনো কলাম নেই',
+  columnsManagementShowHideAllText: 'সব দেখান/লুকান',
+  columnsManagementReset: 'রিসেট',
+  columnsManagementDeleteIconLabel: 'পরিষ্কার',
+  // Filter panel text
+  filterPanelAddFilter: 'ফিল্টার যোগ করুন',
+  filterPanelRemoveAll: 'সব সরান',
+  filterPanelDeleteIconLabel: 'মুছুন',
+  filterPanelLogicOperator: 'লজিক অপারেটর',
+  filterPanelOperator: 'অপারেটর',
+  filterPanelOperatorAnd: 'এবং',
+  filterPanelOperatorOr: 'অথবা',
+  filterPanelColumns: 'কলাম',
+  filterPanelInputLabel: 'মান',
+  filterPanelInputPlaceholder: 'ফিল্টার মান',
+  // Filter operators text
+  filterOperatorContains: 'অন্তর্ভুক্ত',
+  filterOperatorDoesNotContain: 'অন্তর্ভুক্ত নয়',
+  filterOperatorEquals: 'সমান',
+  filterOperatorDoesNotEqual: 'সমান নয়',
+  filterOperatorStartsWith: 'দিয়ে শুরু হয়',
+  filterOperatorEndsWith: 'দিয়ে শেষ হয়',
+  filterOperatorIs: 'হচ্ছে',
+  filterOperatorNot: 'হচ্ছে না',
+  filterOperatorAfter: 'পরবর্তী',
+  filterOperatorOnOrAfter: 'এই তারিখ বা পরবর্তী',
+  filterOperatorBefore: 'পূর্ববর্তী',
+  filterOperatorOnOrBefore: 'এই তারিখ বা পূর্ববর্তী',
+  filterOperatorIsEmpty: 'খালি',
+  filterOperatorIsNotEmpty: 'খালি নয়',
+  filterOperatorIsAnyOf: 'এর যেকোনো একটি',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'অন্তর্ভুক্ত',
+  headerFilterOperatorDoesNotContain: 'অন্তর্ভুক্ত নয়',
+  headerFilterOperatorEquals: 'সমান',
+  headerFilterOperatorDoesNotEqual: 'সমান নয়',
+  headerFilterOperatorStartsWith: 'দিয়ে শুরু হয়',
+  headerFilterOperatorEndsWith: 'দিয়ে শেষ হয়',
+  headerFilterOperatorIs: 'হচ্ছে',
+  headerFilterOperatorNot: 'হচ্ছে না',
+  headerFilterOperatorAfter: 'পরবর্তী',
+  headerFilterOperatorOnOrAfter: 'এই তারিখ বা পরবর্তী',
+  headerFilterOperatorBefore: 'পূর্ববর্তী',
+  headerFilterOperatorOnOrBefore: 'এই তারিখ বা পূর্ববর্তী',
+  headerFilterOperatorIsEmpty: 'খালি',
+  headerFilterOperatorIsNotEmpty: 'খালি নয়',
+  headerFilterOperatorIsAnyOf: 'এর যেকোনো একটি',
+  'headerFilterOperator=': 'সমান',
+  'headerFilterOperator!=': 'সমান নয়',
+  'headerFilterOperator>': 'বড়',
+  'headerFilterOperator>=': 'বড় বা সমান',
+  'headerFilterOperator<': 'ছোট',
+  'headerFilterOperator<=': 'ছোট বা সমান',
+  // Filter values text
+  filterValueAny: 'যেকোনো',
+  filterValueTrue: 'সত্য',
+  filterValueFalse: 'মিথ্যা',
+  // Column menu text
+  columnMenuLabel: 'মেনু',
+  columnMenuShowColumns: 'কলাম দেখান',
+  columnMenuManageColumns: 'কলাম পরিচালনা করুন',
+  columnMenuFilter: 'ফিল্টার',
+  columnMenuHideColumn: 'কলাম লুকান',
+  columnMenuUnsort: 'সাজানো বাতিল করুন',
+  columnMenuSortAsc: 'ASC অনুযায়ী সাজান',
+  columnMenuSortDesc: 'DESC অনুযায়ী সাজান',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} টি সক্রিয় ফিল্টার` : `${count} টি সক্রিয় ফিল্টার`,
+  columnHeaderFiltersLabel: 'ফিল্টার দেখান',
+  columnHeaderSortIconLabel: 'সাজান',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} টি সারি নির্বাচিত` : `${count.toLocaleString()} টি সারি নির্বাচিত`,
+  // Total row amount footer text
+  footerTotalRows: 'মোট সারি:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} of ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'চেকবক্স নির্বাচন',
+  checkboxSelectionSelectAllRows: 'সব সারি নির্বাচন করুন',
+  checkboxSelectionUnselectAllRows: 'সব সারি নির্বাচন বাতিল করুন',
+  checkboxSelectionSelectRow: 'সারি নির্বাচন করুন',
+  checkboxSelectionUnselectRow: 'সারি নির্বাচন বাতিল করুন',
+  // Boolean cell text
+  booleanCellTrueLabel: 'হ্যাঁ',
+  booleanCellFalseLabel: 'না',
+  // Actions cell more text
+  actionsCellMore: 'আরও',
+  // Column pinning text
+  pinToLeft: 'বাঁ দিকে পিন করুন',
+  pinToRight: 'ডান দিকে পিন করুন',
+  unpin: 'আনপিন করুন',
+  // Tree Data
+  treeDataGroupingHeaderName: 'গ্রুপ',
+  // treeDataExpand: 'see children',
+  // treeDataCollapse: 'hide children',
+
+  // Grouping columns
+  groupingColumnHeaderName: 'গ্রুপ',
+  groupColumn: name => `${name} অনুসারে গ্রুপ করুন`,
+  unGroupColumn: name => `${name} অনুসারে গ্রুপ বন্ধ করুন`,
+  // Master/detail
+  detailPanelToggle: 'বিস্তারিত প্যানেল টগল করুন',
+  expandDetailPanel: 'সম্প্রসারিত করুন',
+  collapseDetailPanel: 'সংকুচিত করুন',
+  // Row reordering text
+  rowReorderingHeaderName: 'সারি পুনর্বিন্যাস',
+  // Aggregation
+  aggregationMenuItemHeader: 'সংকলন',
+  aggregationFunctionLabelSum: 'যোগফল',
+  aggregationFunctionLabelAvg: 'গড়',
+  aggregationFunctionLabelMin: 'সর্বনিম্ন',
+  aggregationFunctionLabelMax: 'সর্বোচ্চ',
+  aggregationFunctionLabelSize: 'মাপ'
+};
+export const bnBD = getGridLocalization(bnBDGrid, bnBDCore);

package/locales/index.d.ts

@@ -1,6 +1,7 @@
 export * from './arSD';
 export * from './beBY';
 export * from './bgBG';
+export * from './bnBD';
 export * from './csCZ';
 export * from './daDK';
 export * from './deDE';

package/locales/index.js

@@ -2,6 +2,7 @@
 export * from "./arSD.js";
 export * from "./beBY.js";
 export * from "./bgBG.js";
+export * from "./bnBD.js";
 export * from "./csCZ.js";
 export * from "./daDK.js";
 export * from "./deDE.js";

package/locales/plPL.js

@@ -30,12 +30,11 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
+  columnsManagementDeleteIconLabel: 'Wyczyść',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -63,13 +62,12 @@ const plPLGrid = {
   filterOperatorIsEmpty: 'jest pusty',
   filterOperatorIsNotEmpty: 'nie jest pusty',
   filterOperatorIsAnyOf: 'jest jednym z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'równa się',
+  'filterOperator!=': 'nie równa się',
+  'filterOperator>': 'większy niż',
+  'filterOperator>=': 'większy lub równy',
+  'filterOperator<': 'mniejszy niż',
+  'filterOperator<=': 'mniejszy lub równy',
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
   // headerFilterOperatorDoesNotContain: 'Does not contain',
@@ -79,20 +77,19 @@ const plPLGrid = {
   headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równy',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -144,14 +141,13 @@ const plPLGrid = {
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregacja',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'średnia',
+  aggregationFunctionLabelMin: 'minimum',
+  aggregationFunctionLabelMax: 'maximum',
+  aggregationFunctionLabelSize: 'rozmiar'
 };
 export const plPL = getGridLocalization(plPLGrid, plPLCore);

package/locales/ukUA.js

@@ -45,12 +45,11 @@ const ukUAGrid = {
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Завантажити у форматі Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Пошук',
+  columnsManagementNoColumns: 'Немає стовпців',
+  columnsManagementShowHideAllText: 'Показати/Приховати всі',
+  columnsManagementReset: 'Скинути',
+  columnsManagementDeleteIconLabel: 'Очистити',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelRemoveAll: 'Видалити всі',
@@ -64,9 +63,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не містить',
   filterOperatorEquals: 'дорівнює',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не дорівнює',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -86,9 +85,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не містить',
   headerFilterOperatorEquals: 'Дорівнює',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не дорівнює',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/models/api/gridRowApi.d.ts

@@ -69,7 +69,6 @@ export interface GridRowApi {
     getRowId: <R extends GridValidRowModel = any>(row: R) => GridRowId;
     /**
      * Gets the row node from the internal tree structure.
-     * TODO rows v6: Rename `getTreeNode`
      * @param {GridRowId} id The id of the row.
      * @returns {GridTreeNode} The tree node.
      */

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,5 @@
 import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
+import type { DataGridProps } from './props/DataGridProps';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
 import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
@@ -7,11 +8,17 @@ import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFi
 import type { GridColumnResizeState } from '../hooks/features/columnResize';
 import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
 import type { GridListViewState } from '../hooks/features/listView/useGridListView';
+/**
+ * Some props are passed on the state to enable grid selectors to select
+ * and react to them.
+ */
+type GridStateProps = Pick<DataGridProps, 'getRowId'>;
 /**
  * The state of Data Grid.
  */
 export interface GridStateCommunity {
     isRtl: boolean;
+    props: GridStateProps;
     dimensions: GridDimensionsState;
     rows: GridRowsState;
     visibleRowsLookup: GridVisibleRowsLookupState;
@@ -50,3 +57,4 @@ export interface GridInitialStateCommunity {
         left: number;
     };
 }
+export {};

package/models/props/DataGridProps.d.ts

@@ -267,6 +267,12 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default "client"
      */
     paginationMode: GridFeatureMode;
+    /**
+     * If `true`, the page is set to 0 after each sorting or filtering.
+     * This prop will be removed in the next major version and resetting the page will become the default behavior.
+     * @default false
+     */
+    resetPageOnSortFilter: boolean;
     /**
      * Set of rows of type [[GridRowsProp]].
      * @default []
@@ -737,6 +743,8 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     columns: readonly GridColDef<R>[];
     /**
      * Return the id of a given [[GridRowModel]].
+     * Ensure the reference of this prop is stable to avoid performance implications.
+     * It could be done by either defining the prop outside of the component or by memoizing it.
      */
     getRowId?: GridRowIdGetter<R>;
     /**

package/modern/DataGrid/DataGrid.js

@@ -282,6 +282,8 @@ DataGridRaw.propTypes = {
   getRowHeight: PropTypes.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: PropTypes.func,
   /**
@@ -661,6 +663,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/modern/DataGrid/useDataGridComponent.js

@@ -29,6 +29,7 @@ import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/
 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";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -41,10 +42,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -4,6 +4,7 @@ import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCell
 import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
 import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.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, {
@@ -22,7 +23,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef.current.state, row);
     return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),

package/modern/colDef/gridDateColDef.js

@@ -3,6 +3,7 @@ import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.j
 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,
@@ -17,7 +18,7 @@ export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -30,7 +31,7 @@ export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/modern/colDef/gridSingleSelectColDef.js

@@ -4,6 +4,7 @@ import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSel
 import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.js";
 import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 import { isObject } from "../utils/utils.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
@@ -18,8 +19,7 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
   valueFormatter(value, row, colDef, apiRef) {
-    // const { id, field, value, api } = params;
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef.current.state, row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }

package/modern/constants/dataGridPropsDefaultValues.js

@@ -44,6 +44,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/modern/hooks/core/gridPropsSelectors.js

@@ -0,0 +1,14 @@
+import { GRID_ID_AUTOGENERATED } from "../features/rows/gridRowsUtils.js";
+
+/**
+ * Get the row id for a given row
+ * @param state - The grid state
+ * @param {GridRowModel} row - The row to get the id for
+ * @returns {GridRowId} The row id
+ */
+export const gridRowIdSelector = (state, row) => {
+  if (GRID_ID_AUTOGENERATED in row) {
+    return row[GRID_ID_AUTOGENERATED];
+  }
+  return state.props.getRowId ? state.props.getRowId(row) : row.id;
+};

package/modern/hooks/core/index.js

@@ -1 +1 @@
-export {};
+export { gridRowIdSelector } from "./gridPropsSelectors.js";

package/modern/hooks/core/useGridInitialization.js

@@ -6,6 +6,7 @@ import { useGridLocaleText } from "./useGridLocaleText.js";
 import { useGridPipeProcessing } from "./pipeProcessing/index.js";
 import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
 import { useGridStateInitialization } from "./useGridStateInitialization.js";
+import { useGridProps } from "./useGridProps.js";
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -13,6 +14,7 @@ import { useGridStateInitialization } from "./useGridStateInitialization.js";
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
   useGridRefs(privateApiRef);
+  useGridProps(privateApiRef, props);
   useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);

package/modern/hooks/core/useGridProps.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+export const propsStateInitializer = (state, props) => {
+  return _extends({}, state, {
+    props: {
+      getRowId: props.getRowId
+    }
+  });
+};
+export const useGridProps = (apiRef, props) => {
+  React.useEffect(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      props: {
+        getRowId: props.getRowId
+      }
+    }));
+  }, [apiRef, props.getRowId]);
+};

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -91,6 +91,6 @@ export const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -125,8 +125,7 @@ export function useGridDimensions(apiRef, props) {
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
-    const rootElement = apiRef.current.rootElementRef.current;
-    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
     const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
@@ -287,28 +286,28 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
   };
 }
 const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(rootElement, scrollbarSize) {
+function measureScrollbarSize(element, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null) {
+  if (element === null) {
     return 0;
   }
-  const cachedSize = scrollbarSizeCache.get(rootElement);
+  const cachedSize = scrollbarSizeCache.get(element);
   if (cachedSize !== undefined) {
     return cachedSize;
   }
-  const doc = ownerDocument(rootElement);
+  const doc = ownerDocument(element);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
   scrollDiv.style.height = '99px';
   scrollDiv.style.position = 'absolute';
   scrollDiv.style.overflow = 'scroll';
   scrollDiv.className = 'scrollDiv';
-  rootElement.appendChild(scrollDiv);
+  element.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  rootElement.removeChild(scrollDiv);
-  scrollbarSizeCache.set(rootElement, size);
+  element.removeChild(scrollDiv);
+  scrollbarSizeCache.set(element, size);
   return size;
 }
 function areElementSizesEqual(a, b) {