[DataGridPremium] Render aggregation label when renderHeader is used (

#10936)
mui · Nov 9, 2023 · 7359c23 · 7359c23
1 parent 0590e6f
commit 7359c23
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 35 deletions.
diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx
@@ -9,6 +9,7 @@ import {
   GridColumnHeaderParams,
   GridColumnHeaderTitle,
 } from '@mui/x-data-grid';
+import type { GridBaseColDef } from '@mui/x-data-grid/internals';
 import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -66,8 +67,13 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-function GridAggregationHeader(props: GridColumnHeaderParams) {
-  const { colDef, aggregation } = props;
+function GridAggregationHeader(
+  props: GridColumnHeaderParams & {
+    renderHeader: GridBaseColDef['renderHeader'];
+  },
+) {
+  const { renderHeader, ...params } = props;
+  const { colDef, aggregation } = params;
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -86,11 +92,15 @@ function GridAggregationHeader(props: GridColumnHeaderParams) {
 
   return (
     <GridAggregationHeaderRoot ownerState={ownerState} className={classes.root}>
-      <GridColumnHeaderTitle
-        label={colDef.headerName ?? colDef.field}
-        description={colDef.description}
-        columnWidth={colDef.computedWidth}
-      />
+      {renderHeader ? (
+        renderHeader(params)
+      ) : (
+        <GridColumnHeaderTitle
+          label={colDef.headerName ?? colDef.field}
+          description={colDef.description}
+          columnWidth={colDef.computedWidth}
+        />
+      )}
       <GridAggregationFunctionLabel ownerState={ownerState} className={classes.aggregationLabel}>
         {aggregationLabel}
       </GridAggregationFunctionLabel>

diff --git a/...ges/grid/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx b/...ges/grid/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx
@@ -177,11 +177,13 @@ const getWrappedRenderHeader: ColumnPropertyWrapper<'renderHeader'> = ({
   aggregationRule,
 }) => {
   const wrappedRenderHeader: GridBaseColDef['renderHeader'] = (params) => {
-    const aggregation = { aggregationRule };
-    if (renderHeader) {
-      return renderHeader({ ...params, aggregation });
-    }
-    return <GridAggregationHeader {...params} aggregation={aggregation} />;
+    return (
+      <GridAggregationHeader
+        {...params}
+        aggregation={{ aggregationRule }}
+        renderHeader={renderHeader}
+      />
+    );
   };
 
   return wrappedRenderHeader;

diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js
@@ -101,29 +101,11 @@ async function main() {
         // Move cursor offscreen to not trigger unwanted hover effects.
         page.mouse.move(0, 0);
 
-        const pathsToNotWaitForFlagCDN = [
-          '/docs-data-grid-filtering/HeaderFilteringDataGridPro', // No flag column
-          '/docs-data-grid-filtering/CustomHeaderFilterDataGridPro', // No flag column
-          '/docs-data-grid-filtering/CustomHeaderFilterSingleDataGridPro', // No flag column
-          '/docs-data-grid-filtering/SimpleHeaderFilteringDataGridPro', // No flag column
-          '/docs-data-grid-filtering/ServerFilterGrid', // No content rendered
-          '/docs-data-grid-filtering/CustomMultiValueOperator', // No content rendered
-          '/docs-data-grid-filtering/QuickFilteringInitialize', // No content rendered
-          '/docs-data-grid-sorting/FullyCustomSortComparator', // No flag column
-          '/docs-data-grid-sorting/ServerSortingGrid', // No flag column
-          '/docs-data-grid-filtering/QuickFilteringExcludeHiddenColumns', // No flag column
-          '/docs-data-grid-filtering/QuickFilteringDiacritics', // No flag column
-        ];
-
-        if (
-          /^\/docs-data-grid-(filtering|sorting)/.test(pathURL) &&
-          !pathsToNotWaitForFlagCDN.includes(pathURL)
-        ) {
-          // Wait for the flags to load
-          await page.waitForResponse((response) =>
-            response.url().startsWith('https://flagcdn.com'),
-          );
-        }
+        // Wait for the flags to load
+        await page.waitForFunction(() => {
+          const images = Array.from(document.querySelectorAll('img'));
+          return images.every((img) => img.complete);
+        });
 
         if (/^\docs-charts-.*/.test(pathURL)) {
           // Run one tick of the clock to get the final animation state