@mui/x-data-grid 7.3.1 → 7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/CHANGELOG.md +141 -5
  2. package/DataGrid/DataGrid.js +1 -1
  3. package/components/cell/GridCell.js +5 -4
  4. package/components/columnsManagement/GridColumnsManagement.js +1 -1
  5. package/constants/localeTextConstants.js +1 -0
  6. package/hooks/features/columnHeaders/useGridColumnHeaders.js +5 -3
  7. package/hooks/features/export/useGridPrintExport.js +22 -5
  8. package/hooks/features/filter/gridFilterSelector.d.ts +3 -12
  9. package/hooks/features/focus/useGridFocus.js +1 -1
  10. package/hooks/features/pagination/gridPaginationSelector.d.ts +1 -4
  11. package/hooks/features/rows/useGridRows.js +9 -1
  12. package/hooks/features/sorting/gridSortingSelector.d.ts +4 -6
  13. package/hooks/features/sorting/gridSortingSelector.js +21 -8
  14. package/index.js +1 -1
  15. package/locales/arSD.js +1 -0
  16. package/locales/beBY.js +1 -0
  17. package/locales/bgBG.js +1 -0
  18. package/locales/csCZ.js +1 -0
  19. package/locales/daDK.js +3 -1
  20. package/locales/deDE.js +2 -0
  21. package/locales/elGR.js +1 -0
  22. package/locales/esES.js +2 -0
  23. package/locales/faIR.js +2 -0
  24. package/locales/fiFI.js +1 -0
  25. package/locales/frFR.js +2 -0
  26. package/locales/heIL.js +1 -0
  27. package/locales/hrHR.js +1 -0
  28. package/locales/huHU.js +1 -0
  29. package/locales/itIT.js +1 -0
  30. package/locales/jaJP.js +2 -0
  31. package/locales/koKR.js +1 -0
  32. package/locales/nbNO.js +1 -0
  33. package/locales/nlNL.js +1 -0
  34. package/locales/plPL.js +1 -0
  35. package/locales/ptBR.js +2 -0
  36. package/locales/ptPT.js +1 -0
  37. package/locales/roRO.js +1 -0
  38. package/locales/ruRU.js +1 -0
  39. package/locales/skSK.js +4 -3
  40. package/locales/svSE.js +2 -0
  41. package/locales/trTR.js +1 -0
  42. package/locales/ukUA.js +1 -0
  43. package/locales/urPK.js +1 -0
  44. package/locales/viVN.js +1 -0
  45. package/locales/zhCN.js +1 -0
  46. package/locales/zhHK.js +1 -0
  47. package/locales/zhTW.js +1 -0
  48. package/models/api/gridLocaleTextApi.d.ts +1 -0
  49. package/models/props/DataGridProps.d.ts +1 -1
  50. package/modern/DataGrid/DataGrid.js +1 -1
  51. package/modern/components/cell/GridCell.js +5 -4
  52. package/modern/components/columnsManagement/GridColumnsManagement.js +1 -1
  53. package/modern/constants/localeTextConstants.js +1 -0
  54. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +5 -3
  55. package/modern/hooks/features/export/useGridPrintExport.js +22 -5
  56. package/modern/hooks/features/focus/useGridFocus.js +1 -1
  57. package/modern/hooks/features/rows/useGridRows.js +9 -1
  58. package/modern/hooks/features/sorting/gridSortingSelector.js +21 -8
  59. package/modern/index.js +1 -1
  60. package/modern/locales/arSD.js +1 -0
  61. package/modern/locales/beBY.js +1 -0
  62. package/modern/locales/bgBG.js +1 -0
  63. package/modern/locales/csCZ.js +1 -0
  64. package/modern/locales/daDK.js +3 -1
  65. package/modern/locales/deDE.js +2 -0
  66. package/modern/locales/elGR.js +1 -0
  67. package/modern/locales/esES.js +2 -0
  68. package/modern/locales/faIR.js +2 -0
  69. package/modern/locales/fiFI.js +1 -0
  70. package/modern/locales/frFR.js +2 -0
  71. package/modern/locales/heIL.js +1 -0
  72. package/modern/locales/hrHR.js +1 -0
  73. package/modern/locales/huHU.js +1 -0
  74. package/modern/locales/itIT.js +1 -0
  75. package/modern/locales/jaJP.js +2 -0
  76. package/modern/locales/koKR.js +1 -0
  77. package/modern/locales/nbNO.js +1 -0
  78. package/modern/locales/nlNL.js +1 -0
  79. package/modern/locales/plPL.js +1 -0
  80. package/modern/locales/ptBR.js +2 -0
  81. package/modern/locales/ptPT.js +1 -0
  82. package/modern/locales/roRO.js +1 -0
  83. package/modern/locales/ruRU.js +1 -0
  84. package/modern/locales/skSK.js +4 -3
  85. package/modern/locales/svSE.js +2 -0
  86. package/modern/locales/trTR.js +1 -0
  87. package/modern/locales/ukUA.js +1 -0
  88. package/modern/locales/urPK.js +1 -0
  89. package/modern/locales/viVN.js +1 -0
  90. package/modern/locales/zhCN.js +1 -0
  91. package/modern/locales/zhHK.js +1 -0
  92. package/modern/locales/zhTW.js +1 -0
  93. package/node/DataGrid/DataGrid.js +1 -1
  94. package/node/components/cell/GridCell.js +5 -4
  95. package/node/components/columnsManagement/GridColumnsManagement.js +1 -1
  96. package/node/constants/localeTextConstants.js +1 -0
  97. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +5 -3
  98. package/node/hooks/features/export/useGridPrintExport.js +22 -5
  99. package/node/hooks/features/focus/useGridFocus.js +1 -1
  100. package/node/hooks/features/rows/useGridRows.js +9 -1
  101. package/node/hooks/features/sorting/gridSortingSelector.js +20 -6
  102. package/node/index.js +1 -1
  103. package/node/locales/arSD.js +1 -0
  104. package/node/locales/beBY.js +1 -0
  105. package/node/locales/bgBG.js +1 -0
  106. package/node/locales/csCZ.js +1 -0
  107. package/node/locales/daDK.js +3 -1
  108. package/node/locales/deDE.js +2 -0
  109. package/node/locales/elGR.js +1 -0
  110. package/node/locales/esES.js +2 -0
  111. package/node/locales/faIR.js +2 -0
  112. package/node/locales/fiFI.js +1 -0
  113. package/node/locales/frFR.js +2 -0
  114. package/node/locales/heIL.js +1 -0
  115. package/node/locales/hrHR.js +1 -0
  116. package/node/locales/huHU.js +1 -0
  117. package/node/locales/itIT.js +1 -0
  118. package/node/locales/jaJP.js +2 -0
  119. package/node/locales/koKR.js +1 -0
  120. package/node/locales/nbNO.js +1 -0
  121. package/node/locales/nlNL.js +1 -0
  122. package/node/locales/plPL.js +1 -0
  123. package/node/locales/ptBR.js +2 -0
  124. package/node/locales/ptPT.js +1 -0
  125. package/node/locales/roRO.js +1 -0
  126. package/node/locales/ruRU.js +1 -0
  127. package/node/locales/skSK.js +4 -3
  128. package/node/locales/svSE.js +2 -0
  129. package/node/locales/trTR.js +1 -0
  130. package/node/locales/ukUA.js +1 -0
  131. package/node/locales/urPK.js +1 -0
  132. package/node/locales/viVN.js +1 -0
  133. package/node/locales/zhCN.js +1 -0
  134. package/node/locales/zhHK.js +1 -0
  135. package/node/locales/zhTW.js +1 -0
  136. package/package.json +2 -2
package/locales/huHU.js CHANGED
@@ -33,6 +33,7 @@ const huHUGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Szűrő hozzáadása',
package/locales/itIT.js CHANGED
@@ -33,6 +33,7 @@ const itITGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Aggiungi un filtro',
package/locales/jaJP.js CHANGED
@@ -33,6 +33,8 @@ const jaJPGrid = {
33
33
  columnsManagementSearchTitle: '検索',
34
34
  columnsManagementNoColumns: 'カラムなし',
35
35
  columnsManagementShowHideAllText: 'すべて表示/非表示',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'フィルター追加',
38
40
  filterPanelRemoveAll: 'すべて削除',
package/locales/koKR.js CHANGED
@@ -33,6 +33,7 @@ const koKRGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: '필터 추가',
package/locales/nbNO.js CHANGED
@@ -33,6 +33,7 @@ const nbNOGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Legg til filter',
package/locales/nlNL.js CHANGED
@@ -33,6 +33,7 @@ const nlNLGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Filter toevoegen',
package/locales/plPL.js CHANGED
@@ -33,6 +33,7 @@ const plPLGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Dodaj filtr',
package/locales/ptBR.js CHANGED
@@ -33,6 +33,8 @@ const ptBRGrid = {
33
33
  columnsManagementSearchTitle: 'Buscar',
34
34
  columnsManagementNoColumns: 'Nenhuma coluna',
35
35
  columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Adicionar filtro',
38
40
  filterPanelRemoveAll: 'Remover todos',
package/locales/ptPT.js CHANGED
@@ -33,6 +33,7 @@ const ptPTGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Adicionar filtro',
package/locales/roRO.js CHANGED
@@ -33,6 +33,7 @@ const roROGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Adăugare filtru',
package/locales/ruRU.js CHANGED
@@ -42,6 +42,7 @@ const ruRUGrid = {
42
42
  // columnsManagementSearchTitle: 'Search',
43
43
  // columnsManagementNoColumns: 'No columns',
44
44
  // columnsManagementShowHideAllText: 'Show/Hide All',
45
+ // columnsManagementReset: 'Reset',
45
46
 
46
47
  // Filter panel text
47
48
  filterPanelAddFilter: 'Добавить фильтр',
package/locales/skSK.js CHANGED
@@ -38,9 +38,10 @@ const skSKGrid = {
38
38
  toolbarExportPrint: 'Vytlačiť',
39
39
  toolbarExportExcel: 'Stiahnuť ako Excel',
40
40
  // Columns management text
41
- // columnsManagementSearchTitle: 'Search',
42
- // columnsManagementNoColumns: 'No columns',
43
- // columnsManagementShowHideAllText: 'Show/Hide All',
41
+ columnsManagementSearchTitle: 'Vyhľadať',
42
+ columnsManagementNoColumns: 'Žiadne stĺpce',
43
+ columnsManagementShowHideAllText: 'Zobraziť/Skryť všetko',
44
+ // columnsManagementReset: 'Reset',
44
45
 
45
46
  // Filter panel text
46
47
  filterPanelAddFilter: 'Pridať filter',
package/locales/svSE.js CHANGED
@@ -33,6 +33,8 @@ const svSEGrid = {
33
33
  columnsManagementSearchTitle: 'Sök',
34
34
  columnsManagementNoColumns: 'Inga kolumner',
35
35
  columnsManagementShowHideAllText: 'Visa/Dölj alla',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Lägg till filter',
38
40
  filterPanelRemoveAll: 'Ta bort alla',
package/locales/trTR.js CHANGED
@@ -33,6 +33,7 @@ const trTRGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Filtre Ekle',
package/locales/ukUA.js CHANGED
@@ -47,6 +47,7 @@ const ukUAGrid = {
47
47
  // columnsManagementSearchTitle: 'Search',
48
48
  // columnsManagementNoColumns: 'No columns',
49
49
  // columnsManagementShowHideAllText: 'Show/Hide All',
50
+ // columnsManagementReset: 'Reset',
50
51
 
51
52
  // Filter panel text
52
53
  filterPanelAddFilter: 'Додати фільтр',
package/locales/urPK.js CHANGED
@@ -33,6 +33,7 @@ const urPKGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'نیا فلٹر',
package/locales/viVN.js CHANGED
@@ -33,6 +33,7 @@ const viVNGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Thêm bộ lọc',
package/locales/zhCN.js CHANGED
@@ -33,6 +33,7 @@ const zhCNGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: '添加筛选器',
package/locales/zhHK.js CHANGED
@@ -33,6 +33,7 @@ const zhHKGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: '新增過濾器',
package/locales/zhTW.js CHANGED
@@ -33,6 +33,7 @@ const zhTWGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: '增加篩選器',
@@ -34,6 +34,7 @@ export interface GridLocaleText {
34
34
  columnsManagementSearchTitle: string;
35
35
  columnsManagementNoColumns: string;
36
36
  columnsManagementShowHideAllText: string;
37
+ columnsManagementReset: string;
37
38
  filterPanelAddFilter: React.ReactNode;
38
39
  filterPanelRemoveAll: React.ReactNode;
39
40
  filterPanelDeleteIconLabel: string;
@@ -698,7 +698,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
698
698
  */
699
699
  getRowId?: GridRowIdGetter<R>;
700
700
  /**
701
- * If `true`, a loading overlay is displayed.
701
+ * If `true`, a loading overlay is displayed.
702
702
  */
703
703
  loading?: boolean;
704
704
  /**
@@ -327,7 +327,7 @@ DataGridRaw.propTypes = {
327
327
  */
328
328
  keepNonExistentRowsSelected: PropTypes.bool,
329
329
  /**
330
- * If `true`, a loading overlay is displayed.
330
+ * If `true`, a loading overlay is displayed.
331
331
  */
332
332
  loading: PropTypes.bool,
333
333
  /**
@@ -131,8 +131,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
131
131
  cellMode,
132
132
  hasFocus,
133
133
  isEditable = false,
134
- value,
135
- formattedValue
134
+ value
136
135
  } = cellParamsWithAPI;
137
136
  const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
138
137
  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
@@ -156,7 +155,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
156
155
  if (getCellClassName) {
157
156
  classNames.push(getCellClassName(cellParamsWithAPI));
158
157
  }
159
- const valueToRender = formattedValue == null ? value : formattedValue;
158
+ const valueToRender = cellParamsWithAPI.formattedValue ?? value;
160
159
  const cellRef = React.useRef(null);
161
160
  const handleRef = useForkRef(ref, cellRef);
162
161
  const focusElementRef = React.useRef(null);
@@ -268,8 +267,10 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
268
267
 
269
268
  // eslint-disable-next-line @typescript-eslint/naming-convention
270
269
  const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
270
+ const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
271
271
  const params = _extends({}, cellParamsWithAPI, {
272
- row: updatedRow
272
+ row: updatedRow,
273
+ formattedValue
273
274
  }, editCellStateRest);
274
275
  children = column.renderEditCell(params);
275
276
  classNames.push(gridClasses['cell--editing']);
@@ -170,7 +170,7 @@ function GridColumnsManagement(props) {
170
170
  onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
171
171
  disabled: isResetDisabled
172
172
  }, rootProps.slotProps?.baseButton, {
173
- children: "Reset"
173
+ children: apiRef.current.getLocaleText('columnsManagementReset')
174
174
  })) : null]
175
175
  }) : null]
176
176
  });
@@ -31,6 +31,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
31
31
  columnsManagementSearchTitle: 'Search',
32
32
  columnsManagementNoColumns: 'No columns',
33
33
  columnsManagementShowHideAllText: 'Show/Hide All',
34
+ columnsManagementReset: 'Reset',
34
35
  // Filter panel text
35
36
  filterPanelAddFilter: 'Add filter',
36
37
  filterPanelRemoveAll: 'Remove all',
@@ -12,6 +12,7 @@ import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelect
12
12
  import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
13
13
  import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
14
14
  import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
15
+ import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
15
16
  import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
16
17
  import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
17
18
  import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
@@ -44,8 +45,9 @@ export const useGridColumnHeaders = props => {
44
45
  const apiRef = useGridPrivateApiContext();
45
46
  const theme = useTheme();
46
47
  const rootProps = useGridRootProps();
47
- const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
48
48
  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
49
+ const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
50
+ const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
49
51
  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
50
52
  const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
51
53
  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
@@ -214,13 +216,13 @@ export const useGridColumnHeaders = props => {
214
216
  } = columnsToRender;
215
217
  const rowStructure = columnGroupsHeaderStructure[depth];
216
218
  const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
217
- const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
219
+ const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
218
220
  const firstGroupIndex = rowStructure.findIndex(({
219
221
  groupId,
220
222
  columnFields
221
223
  }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
222
224
  const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
223
- const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
225
+ const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
224
226
  const lastGroupIndex = rowStructure.findIndex(({
225
227
  groupId,
226
228
  columnFields
@@ -7,6 +7,7 @@ import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from
7
7
  import { gridClasses } from '../../../constants/gridClasses';
8
8
  import { useGridApiMethod } from '../../utils/useGridApiMethod';
9
9
  import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
10
+ import { GRID_ID_AUTOGENERATED } from '../rows/gridRowsUtils';
10
11
  import { defaultGetRowsToExport, getColumnsToExport } from './utils';
11
12
  import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
12
13
  import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -42,6 +43,7 @@ export const useGridPrintExport = (apiRef, props) => {
42
43
  const previousGridState = React.useRef(null);
43
44
  const previousColumnVisibility = React.useRef({});
44
45
  const previousRows = React.useRef([]);
46
+ const previousVirtualizationState = React.useRef();
45
47
  React.useEffect(() => {
46
48
  doc.current = ownerDocument(apiRef.current.rootElementRef.current);
47
49
  }, [apiRef]);
@@ -71,7 +73,13 @@ export const useGridPrintExport = (apiRef, props) => {
71
73
  const rowsToExportIds = getRowsToExport({
72
74
  apiRef
73
75
  });
74
- const newRows = rowsToExportIds.map(id => apiRef.current.getRow(id));
76
+ const newRows = rowsToExportIds.reduce((acc, id) => {
77
+ const row = apiRef.current.getRow(id);
78
+ if (!row[GRID_ID_AUTOGENERATED]) {
79
+ acc.push(row);
80
+ }
81
+ return acc;
82
+ }, []);
75
83
  apiRef.current.setRows(newRows);
76
84
  }, [apiRef]);
77
85
  const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
@@ -124,6 +132,8 @@ export const useGridPrintExport = (apiRef, props) => {
124
132
  // prevents us to do it
125
133
  const container = document.createElement('div');
126
134
  container.appendChild(gridClone);
135
+ // To avoid an empty page in start on Chromium based browsers
136
+ printDoc.body.style.marginTop = '0px';
127
137
  printDoc.body.innerHTML = container.innerHTML;
128
138
  const defaultPageStyle = typeof normalizeOptions.pageStyle === 'function' ? normalizeOptions.pageStyle() : normalizeOptions.pageStyle;
129
139
  if (typeof defaultPageStyle === 'string') {
@@ -192,7 +202,9 @@ export const useGridPrintExport = (apiRef, props) => {
192
202
  // if the apiRef.current.exportState(); did not exported the column visibility, we update it
193
203
  apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
194
204
  }
195
- apiRef.current.unstable_setVirtualization(true);
205
+ apiRef.current.setState(state => _extends({}, state, {
206
+ virtualization: previousVirtualizationState.current
207
+ }));
196
208
  apiRef.current.setRows(previousRows.current);
197
209
 
198
210
  // Clear local state
@@ -208,7 +220,7 @@ export const useGridPrintExport = (apiRef, props) => {
208
220
  previousGridState.current = apiRef.current.exportState();
209
221
  // It appends that the visibility model is not exported, especially if columnVisibility is not controlled
210
222
  previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
211
- previousRows.current = apiRef.current.getSortedRows();
223
+ previousRows.current = apiRef.current.getSortedRows().filter(row => !row[GRID_ID_AUTOGENERATED]);
212
224
  if (props.pagination) {
213
225
  const visibleRowCount = gridExpandedRowCountSelector(apiRef);
214
226
  const paginationModel = {
@@ -222,11 +234,16 @@ export const useGridPrintExport = (apiRef, props) => {
222
234
  'DataGridPro', paginationModel)
223
235
  })
224
236
  }));
225
- apiRef.current.forceUpdate();
226
237
  }
238
+ previousVirtualizationState.current = apiRef.current.state.virtualization;
239
+ apiRef.current.setState(state => _extends({}, state, {
240
+ virtualization: _extends({}, state.virtualization, {
241
+ enabled: false,
242
+ enabledForColumns: false
243
+ })
244
+ }));
227
245
  await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
228
246
  updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
229
- apiRef.current.unstable_setVirtualization(false);
230
247
  await raf(); // wait for the state changes to take action
231
248
  const printWindow = buildPrintWindow(options?.fileName);
232
249
  if (process.env.NODE_ENV === 'test') {
@@ -252,7 +252,7 @@ export const useGridFocus = (apiRef, props) => {
252
252
  apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
253
253
  }, [apiRef]);
254
254
  const handleBlur = React.useCallback((_, event) => {
255
- if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
255
+ if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
256
256
  return;
257
257
  }
258
258
  logger.debug(`Clearing focus`);
@@ -39,6 +39,7 @@ export const useGridRows = (apiRef, props) => {
39
39
  const logger = useGridLogger(apiRef, 'useGridRows');
40
40
  const currentPage = useGridVisibleRows(apiRef, props);
41
41
  const lastUpdateMs = React.useRef(Date.now());
42
+ const lastRowCount = React.useRef(props.rowCount);
42
43
  const timeout = useTimeout();
43
44
  const getRow = React.useCallback(id => {
44
45
  const model = gridRowsLookupSelector(apiRef)[id];
@@ -400,6 +401,11 @@ export const useGridRows = (apiRef, props) => {
400
401
  isFirstRender.current = false;
401
402
  return;
402
403
  }
404
+ let isRowCountPropUpdated = false;
405
+ if (props.rowCount !== lastRowCount.current) {
406
+ isRowCountPropUpdated = true;
407
+ lastRowCount.current = props.rowCount;
408
+ }
403
409
  const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === props.rows;
404
410
  const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
405
411
  const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
@@ -426,7 +432,9 @@ export const useGridRows = (apiRef, props) => {
426
432
  apiRef.current.caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
427
433
  apiRef.current.forceUpdate();
428
434
  }
429
- return;
435
+ if (!isRowCountPropUpdated) {
436
+ return;
437
+ }
430
438
  }
431
439
  logger.debug(`Updating all rows, new length ${props.rows.length}`);
432
440
  throttledRowsChange({
@@ -1,6 +1,6 @@
1
1
  import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
2
- import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
3
-
2
+ import { gridRowTreeSelector, gridRowsLookupSelector } from '../rows/gridRowsSelector';
3
+ import { GRID_ID_AUTOGENERATED, isAutoGeneratedRow } from '../rows/gridRowsUtils';
4
4
  /**
5
5
  * @category Sorting
6
6
  * @ignore - do not document.
@@ -17,12 +17,25 @@ export const gridSortedRowIdsSelector = createSelector(gridSortingStateSelector,
17
17
  * Get the id and the model of the rows after the sorting process.
18
18
  * @category Sorting
19
19
  */
20
- export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRowIdsSelector, gridRowsLookupSelector,
21
- // TODO rows v6: Is this the best approach ?
22
- (sortedIds, idRowsLookup) => sortedIds.map(id => ({
23
- id,
24
- model: idRowsLookup[id] ?? {}
25
- })));
20
+ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRowIdsSelector, gridRowsLookupSelector, gridRowTreeSelector, (sortedIds, idRowsLookup, rowTree) => sortedIds.reduce((acc, id) => {
21
+ const model = idRowsLookup[id];
22
+ if (model) {
23
+ acc.push({
24
+ id,
25
+ model
26
+ });
27
+ }
28
+ const rowNode = rowTree[id];
29
+ if (rowNode && isAutoGeneratedRow(rowNode)) {
30
+ acc.push({
31
+ id,
32
+ model: {
33
+ [GRID_ID_AUTOGENERATED]: id
34
+ }
35
+ });
36
+ }
37
+ return acc;
38
+ }, []));
26
39
 
27
40
  /**
28
41
  * Get the current sorting model.
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v7.3.1
2
+ * @mui/x-data-grid v7.4.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -33,6 +33,7 @@ const arSDGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'إضافة مرشِح',
@@ -47,6 +47,7 @@ const beBYGrid = {
47
47
  // columnsManagementSearchTitle: 'Search',
48
48
  // columnsManagementNoColumns: 'No columns',
49
49
  // columnsManagementShowHideAllText: 'Show/Hide All',
50
+ // columnsManagementReset: 'Reset',
50
51
 
51
52
  // Filter panel text
52
53
  filterPanelAddFilter: 'Дадаць фільтр',
@@ -33,6 +33,7 @@ const bgBGGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Добави Филтър',
@@ -41,6 +41,7 @@ const csCZGrid = {
41
41
  // columnsManagementSearchTitle: 'Search',
42
42
  // columnsManagementNoColumns: 'No columns',
43
43
  // columnsManagementShowHideAllText: 'Show/Hide All',
44
+ // columnsManagementReset: 'Reset',
44
45
 
45
46
  // Filter panel text
46
47
  filterPanelAddFilter: 'Přidat filtr',
@@ -32,7 +32,9 @@ const daDKGrid = {
32
32
  // Columns management text
33
33
  columnsManagementSearchTitle: 'Søg',
34
34
  columnsManagementNoColumns: 'Ingen søjler',
35
- columnsManagementShowHideAllText: 'Vis/Shjul Alle',
35
+ columnsManagementShowHideAllText: 'Vis/Skjul Alle',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Tilføj filter',
38
40
  filterPanelRemoveAll: 'Fjern alle',
@@ -33,6 +33,8 @@ const deDEGrid = {
33
33
  columnsManagementSearchTitle: 'Suche',
34
34
  columnsManagementNoColumns: 'Keine Spalten',
35
35
  columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Filter hinzufügen',
38
40
  filterPanelRemoveAll: 'Alle entfernen',
@@ -33,6 +33,7 @@ const elGRGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Προσθήκη φίλτρου',
@@ -33,6 +33,8 @@ const esESGrid = {
33
33
  columnsManagementSearchTitle: 'Buscar',
34
34
  columnsManagementNoColumns: 'Sin columnas',
35
35
  columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Agregar filtro',
38
40
  filterPanelRemoveAll: 'Remover todos',
@@ -33,6 +33,8 @@ const faIRGrid = {
33
33
  columnsManagementSearchTitle: 'جستجو',
34
34
  columnsManagementNoColumns: 'بدون سطر',
35
35
  columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'افزودن فیلتر',
38
40
  filterPanelRemoveAll: 'حذف همه',
@@ -33,6 +33,7 @@ const fiFIGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Lisää suodatin',
@@ -33,6 +33,8 @@ const frFRGrid = {
33
33
  columnsManagementSearchTitle: 'Rechercher',
34
34
  columnsManagementNoColumns: 'Pas de colonnes',
35
35
  columnsManagementShowHideAllText: 'Afficher/masquer toutes',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'Ajouter un filtre',
38
40
  filterPanelRemoveAll: 'Tout supprimer',
@@ -33,6 +33,7 @@ const heILGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'הוסף מסנן',
@@ -33,6 +33,7 @@ const hrHRGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Dodajte filter',
@@ -33,6 +33,7 @@ const huHUGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Szűrő hozzáadása',
@@ -33,6 +33,7 @@ const itITGrid = {
33
33
  // columnsManagementSearchTitle: 'Search',
34
34
  // columnsManagementNoColumns: 'No columns',
35
35
  // columnsManagementShowHideAllText: 'Show/Hide All',
36
+ // columnsManagementReset: 'Reset',
36
37
 
37
38
  // Filter panel text
38
39
  filterPanelAddFilter: 'Aggiungi un filtro',
@@ -33,6 +33,8 @@ const jaJPGrid = {
33
33
  columnsManagementSearchTitle: '検索',
34
34
  columnsManagementNoColumns: 'カラムなし',
35
35
  columnsManagementShowHideAllText: 'すべて表示/非表示',
36
+ // columnsManagementReset: 'Reset',
37
+
36
38
  // Filter panel text
37
39
  filterPanelAddFilter: 'フィルター追加',
38
40
  filterPanelRemoveAll: 'すべて削除',