[DataGridPremium] Fix print export not working with row grouping (#12957

)
mui · May 2, 2024 · f895c93 · f895c93
1 parent 2c397c5
commit f895c93
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 16 deletions.
diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json
@@ -161,7 +161,7 @@
   },
   {
     "name": "gridExpandedSortedRowEntriesSelector",
-    "returnType": "{ id: GridRowId; model: GridValidRowModel }[]",
+    "returnType": "GridRowEntry<GridValidRowModel>[]",
     "category": "Filtering",
     "description": "Get the id and the model of the rows accessible after the filtering process.\nDoes not contain the collapsed children.",
     "supportsApiRef": true
@@ -196,7 +196,7 @@
   },
   {
     "name": "gridFilteredSortedRowEntriesSelector",
-    "returnType": "{ id: GridRowId; model: GridValidRowModel }[]",
+    "returnType": "GridRowEntry<GridValidRowModel>[]",
     "category": "Filtering",
     "description": "Get the id and the model of the rows accessible after the filtering process.\nContains the collapsed children.",
     "supportsApiRef": true
@@ -210,7 +210,7 @@
   },
   {
     "name": "gridFilteredSortedTopLevelRowEntriesSelector",
-    "returnType": "{ id: GridRowId; model: GridValidRowModel }[]",
+    "returnType": "GridRowEntry<GridValidRowModel>[]",
     "category": "Filtering",
     "description": "Get the id and the model of the top level rows accessible after the filtering process.",
     "supportsApiRef": true
@@ -299,7 +299,7 @@
   },
   {
     "name": "gridPaginatedVisibleSortedGridRowEntriesSelector",
-    "returnType": "{ id: GridRowId; model: GridValidRowModel }[]",
+    "returnType": "GridRowEntry<GridValidRowModel>[]",
     "category": "Pagination",
     "description": "Get the id and the model of each row to include in the current page if the pagination is enabled.",
     "supportsApiRef": true
@@ -446,7 +446,7 @@
   },
   {
     "name": "gridSortedRowEntriesSelector",
-    "returnType": "{ id: GridRowId; model: GridValidRowModel }[]",
+    "returnType": "GridRowEntry<GridValidRowModel>[]",
     "category": "Sorting",
     "description": "Get the id and the model of the rows after the sorting process.",
     "supportsApiRef": true

diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
@@ -7,14 +7,15 @@ import { gridExpandedRowCountSelector } from '../filter/gridFilterSelector';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrintExportOptions } from '../../../models/gridExport';
 import { GridValidRowModel } from '../../../models/gridRows';
-import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
+import { GridInitialStateCommunity, GridStateCommunity } from '../../../models/gridStateCommunity';
 import {
   gridColumnDefinitionsSelector,
   gridColumnVisibilityModelSelector,
 } from '../columns/gridColumnsSelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { GRID_ID_AUTOGENERATED } from '../rows/gridRowsUtils';
 import { defaultGetRowsToExport, getColumnsToExport } from './utils';
 import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
 import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -71,6 +72,7 @@ export const useGridPrintExport = (
   const previousGridState = React.useRef<GridInitialStateCommunity | null>(null);
   const previousColumnVisibility = React.useRef<{ [key: string]: boolean }>({});
   const previousRows = React.useRef<GridValidRowModel[]>([]);
+  const previousVirtualizationState = React.useRef<GridStateCommunity['virtualization']>();
 
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef!.current!);
@@ -106,7 +108,15 @@ export const useGridPrintExport = (
   const updateGridRowsForPrint = React.useCallback(
     (getRowsToExport: NonNullable<GridPrintExportOptions['getRowsToExport']>) => {
       const rowsToExportIds = getRowsToExport({ apiRef });
-      const newRows = rowsToExportIds.map((id) => apiRef.current.getRow(id));
+
+      const newRows = rowsToExportIds.reduce<GridValidRowModel[]>((acc, id) => {
+        const row = apiRef.current.getRow(id);
+        if (!row[GRID_ID_AUTOGENERATED]) {
+          acc.push(row);
+        }
+        return acc;
+      }, [] as GridValidRowModel[]);
+
       apiRef.current.setRows(newRows);
     },
     [apiRef],
@@ -130,7 +140,7 @@ export const useGridPrintExport = (
 
       const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
 
-      const gridRootElement = apiRef.current.rootElementRef!.current;
+      const gridRootElement = apiRef.current.rootElementRef.current;
       const gridClone = gridRootElement!.cloneNode(true) as HTMLElement;
 
       // Allow to overflow to not hide the border of the last row
@@ -181,6 +191,8 @@ export const useGridPrintExport = (
       // prevents us to do it
       const container = document.createElement('div');
       container.appendChild(gridClone);
+      // To avoid an empty page in start on Chromium based browsers
+      printDoc.body.style.marginTop = '0px';
       printDoc.body.innerHTML = container.innerHTML;
 
       const defaultPageStyle =
@@ -271,7 +283,10 @@ export const useGridPrintExport = (
         apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
       }
 
-      apiRef.current.unstable_setVirtualization(true);
+      apiRef.current.setState((state) => ({
+        ...state,
+        virtualization: previousVirtualizationState.current!,
+      }));
       apiRef.current.setRows(previousRows.current);
 
       // Clear local state
@@ -293,7 +308,9 @@ export const useGridPrintExport = (
       previousGridState.current = apiRef.current.exportState();
       // It appends that the visibility model is not exported, especially if columnVisibility is not controlled
       previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
-      previousRows.current = apiRef.current.getSortedRows();
+      previousRows.current = apiRef.current
+        .getSortedRows()
+        .filter((row) => !row[GRID_ID_AUTOGENERATED]);
 
       if (props.pagination) {
         const visibleRowCount = gridExpandedRowCountSelector(apiRef);
@@ -313,8 +330,16 @@ export const useGridPrintExport = (
             ),
           },
         }));
-        apiRef.current.forceUpdate();
       }
+      previousVirtualizationState.current = apiRef.current.state.virtualization;
+      apiRef.current.setState((state) => ({
+        ...state,
+        virtualization: {
+          ...state.virtualization,
+          enabled: false,
+          enabledForColumns: false,
+        },
+      }));
 
       await updateGridColumnsForPrint(
         options?.fields,
@@ -324,7 +349,6 @@ export const useGridPrintExport = (
 
       updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
 
-      apiRef.current.unstable_setVirtualization(false);
       await raf(); // wait for the state changes to take action
       const printWindow = buildPrintWindow(options?.fileName);
       if (process.env.NODE_ENV === 'test') {

diff --git a/packages/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts b/packages/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts
@@ -1,7 +1,9 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { GridSortDirection, GridSortModel } from '../../../models/gridSortModel';
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+import { gridRowTreeSelector, gridRowsLookupSelector } from '../rows/gridRowsSelector';
+import { GRID_ID_AUTOGENERATED, isAutoGeneratedRow } from '../rows/gridRowsUtils';
+import type { GridStateCommunity } from '../../../models/gridStateCommunity';
+import type { GridValidRowModel, GridRowEntry } from '../../../models/gridRows';
 
 /**
  * @category Sorting
@@ -25,8 +27,19 @@ export const gridSortedRowIdsSelector = createSelector(
 export const gridSortedRowEntriesSelector = createSelectorMemoized(
   gridSortedRowIdsSelector,
   gridRowsLookupSelector,
-  // TODO rows v6: Is this the best approach ?
-  (sortedIds, idRowsLookup) => sortedIds.map((id) => ({ id, model: idRowsLookup[id] ?? {} })),
+  gridRowTreeSelector,
+  (sortedIds, idRowsLookup, rowTree) =>
+    sortedIds.reduce<GridRowEntry<GridValidRowModel>[]>((acc, id) => {
+      const model = idRowsLookup[id];
+      if (model) {
+        acc.push({ id, model });
+      }
+      const rowNode = rowTree[id];
+      if (rowNode && isAutoGeneratedRow(rowNode)) {
+        acc.push({ id, model: { [GRID_ID_AUTOGENERATED]: id } });
+      }
+      return acc;
+    }, [] as GridRowEntry<GridValidRowModel>[]),
 );
 
 /**