[DataGrid] Add columnGroupHeaderHeight prop for sizing column group…

… headers (mui#14637)
arthurbalduini · Sep 30, 2024 · 24b566f · 24b566f
1 parent e8bc9a9
commit 24b566f
Show file tree

Hide file tree

Showing 22 changed files with 254 additions and 1 deletion.
diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.js b/docs/data/data-grid/column-groups/GroupHeaderHeight.js
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const columns = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function GroupHeaderHeight() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnGroupingModel={columnGroupingModel}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel: GridColumnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function GroupHeaderHeight() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnGroupingModel={columnGroupingModel}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview
@@ -0,0 +1,6 @@
+<DataGrid
+  rows={rows}
+  columns={columns}
+  columnGroupingModel={columnGroupingModel}
+  columnGroupHeaderHeight={36}
+/>
diff --git a/docs/data/data-grid/column-groups/column-groups.md b/docs/data/data-grid/column-groups/column-groups.md
@@ -57,6 +57,14 @@ In addition to the required `groupId` and `children`, you can use the following
 
 {{"demo": "CustomizationDemo.js", "bg": "inline"}}
 
+## Group header height
+
+By default, column group headers are the same height as [column headers](/x/react-data-grid/column-header/#header-height). This will be the default 56 pixels or a custom value set with the `columnHeaderHeight` prop.
+
+The `columnGroupHeaderHeight` prop can be used to size column group headers independently of column headers.
+
+{{"demo": "GroupHeaderHeight.js", "bg": "inline"}}
+
 ## Column reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 By default, the columns that are part of a group cannot be dragged to outside their group.

diff --git a/docs/data/data-grid/column-header/HeaderHeight.js b/docs/data/data-grid/column-header/HeaderHeight.js
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: '@MUI',
+    age: 20,
+  },
+];
+
+const columns = [
+  {
+    field: 'username',
+    headerName: 'Username',
+    description:
+      'The identification used by the person with access to the online service.',
+  },
+  { field: 'age', headerName: 'Age' },
+];
+
+export default function HeaderHeight() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx b/docs/data/data-grid/column-header/HeaderHeight.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: '@MUI',
+    age: 20,
+  },
+];
+
+const columns: GridColDef[] = [
+  {
+    field: 'username',
+    headerName: 'Username',
+    description:
+      'The identification used by the person with access to the online service.',
+  },
+  { field: 'age', headerName: 'Age' },
+];
+
+export default function HeaderHeight() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx.preview b/docs/data/data-grid/column-header/HeaderHeight.tsx.preview
@@ -0,0 +1 @@
+<DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
diff --git a/docs/data/data-grid/column-header/column-header.md b/docs/data/data-grid/column-header/column-header.md
@@ -34,6 +34,14 @@ const columns: GridColDef[] = [
 
 {{"demo": "RenderHeaderGrid.js", "bg": "inline"}}
 
+## Header height
+
+By default, column headers have a height of 56 pixels. This matches the height from the [Material Design guidelines](https://m2.material.io/components/data-tables).
+
+The `columnHeaderHeight` prop can be used to override the default value.
+
+{{"demo": "HeaderHeight.js", "bg": "inline"}}
+
 ## Styling header
 
 You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information.

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -33,6 +33,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -22,6 +22,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -21,6 +21,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "density": {

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -39,6 +39,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -32,6 +32,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -29,6 +29,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },

diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -170,6 +170,11 @@ DataGridPremiumRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.

diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -148,6 +148,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.

diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -152,6 +152,11 @@ DataGridRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.

diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
@@ -511,6 +511,7 @@ GridRow.propTypes = {
       height: PropTypes.number.isRequired,
       width: PropTypes.number.isRequired,
     }).isRequired,
+    groupHeaderHeight: PropTypes.number.isRequired,
     hasScrollX: PropTypes.bool.isRequired,
     hasScrollY: PropTypes.bool.isRequired,
     headerFilterHeight: PropTypes.number.isRequired,

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -456,7 +456,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           depth={depth}
           isLastColumn={headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length}
           maxDepth={headerGroupingMaxDepth}
-          height={dimensions.headerHeight}
+          height={dimensions.groupHeaderHeight}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
           pinnedPosition={pinnedPosition}

diff --git a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
@@ -62,6 +62,10 @@ export interface GridDimensions {
    * Height of one column header.
    */
   headerHeight: number;
+  /**
+   * Height of one column group header.
+   */
+  groupHeaderHeight: number;
   /**
    * Height of header filters.
    */

diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -42,6 +42,7 @@ type RootProps = Pick<
   | 'rowHeight'
   | 'resizeThrottleMs'
   | 'columnHeaderHeight'
+  | 'columnGroupHeaderHeight'
   | 'headerFilterHeight'
 >;
 
@@ -59,6 +60,7 @@ const EMPTY_DIMENSIONS: GridDimensions = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -92,6 +94,9 @@ export function useGridDimensions(
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor(
+    (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor,
+  );
   const headerFilterHeight = Math.floor(
     (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
   );
@@ -248,6 +253,7 @@ export function useGridDimensions(
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -275,6 +281,7 @@ export function useGridDimensions(
     rowsMeta.currentPageTotalHeight,
     rowHeight,
     headerHeight,
+    groupHeaderHeight,
     headerFilterHeight,
     columnsTotalWidth,
     headersTotalHeight,