[DataGrid] Rework column headers and virtual scroller positioning (#7001

)

Closes #602

docs/data/data-grid/accessibility/accessibility.md

@@ -31,7 +31,7 @@ To hide the density selector, add the `disableDensitySelector` prop to the Data
 ### Density prop
 
 Set the vertical density of the Data Grid using the `density` prop.
-This prop applies the values determined by the `rowHeight` and `headerHeight` props, if supplied.
+This prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied.
 The user can override this setting with the optional toolbar density selector.
 
 The following demo shows a Data Grid with the default density set to `compact`:

docs/data/data-grid/layout/FlexLayoutGrid.js

@@ -11,7 +11,7 @@ export default function FlexLayoutGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <div style={{ display: 'flex', height: '100%' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div style={{ flexGrow: 1 }}>
           <DataGrid {...data} />
         </div>

docs/data/data-grid/layout/FlexLayoutGrid.tsx

@@ -11,7 +11,7 @@ export default function FlexLayoutGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <div style={{ display: 'flex', height: '100%' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div style={{ flexGrow: 1 }}>
           <DataGrid {...data} />
         </div>

docs/data/data-grid/layout/FlexLayoutGrid.tsx.preview

@@ -1,4 +1,4 @@
-<div style={{ display: 'flex', height: '100%' }}>
+<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
   <div style={{ flexGrow: 1 }}>
     <DataGrid {...data} />
   </div>

docs/data/data-grid/row-height/ExpandableCells.js

@@ -84,7 +84,7 @@ for (let i = 0; i < 10; i += 1) {
 
 export default function ExpandableCells() {
   return (
-    <div style={{ height: 400, width: 800 }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}

docs/data/data-grid/row-height/ExpandableCells.tsx

@@ -75,7 +75,7 @@ for (let i = 0; i < 10; i += 1) {
 
 export default function ExpandableCells() {
   return (
-    <div style={{ height: 400, width: 800 }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}

docs/data/data-grid/row-height/row-height.md

@@ -81,7 +81,7 @@ Add padding to the cells to increase the space between the content and the cell
 ## Row density
 
 Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable.
-Density is calculated based on the `rowHeight` and/or `headerHeight` props, when present.
+Density is calculated based on the `rowHeight` and/or `columnHeaderHeight` props, when present.
 See [Density](https://mui.com/x/react-data-grid/accessibility/#density) for details.
 
 ## Row spacing

docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md

@@ -57,6 +57,7 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
   | `disableMultipleSelection` | `disableMultipleRowSelection` |
   | `showCellRightBorder`      | `showCellVerticalBorder`      |
   | `showColumnRightBorder`    | `showColumnVerticalBorder`    |
+  | `headerHeight`             | `columnHeaderHeight`          |
 
 ### Removed props
 

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -30,6 +30,7 @@
     },
     "classes": { "type": { "name": "object" } },
     "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnThreshold": { "type": { "name": "number" }, "default": "3" },
     "columnTypes": { "type": { "name": "object" } },
     "columnVisibilityModel": { "type": { "name": "object" } },
@@ -98,7 +99,6 @@
     "getRowSpacing": { "type": { "name": "func" } },
     "getTreeDataPath": { "type": { "name": "func" } },
     "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
-    "headerHeight": { "type": { "name": "number" }, "default": "56" },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
     "hideFooterRowCount": {

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -21,6 +21,7 @@
     },
     "classes": { "type": { "name": "object" } },
     "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnThreshold": { "type": { "name": "number" }, "default": "3" },
     "columnTypes": { "type": { "name": "object" } },
     "columnVisibilityModel": { "type": { "name": "object" } },
@@ -83,7 +84,6 @@
     "getRowSpacing": { "type": { "name": "func" } },
     "getTreeDataPath": { "type": { "name": "func" } },
     "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
-    "headerHeight": { "type": { "name": "number" }, "default": "56" },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
     "hideFooterRowCount": {

docs/pages/x/api/data-grid/data-grid.json

@@ -14,6 +14,7 @@
     "checkboxSelection": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
     "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnThreshold": { "type": { "name": "number" }, "default": "3" },
     "columnTypes": { "type": { "name": "object" } },
     "columnVisibilityModel": { "type": { "name": "object" } },
@@ -61,7 +62,6 @@
     "getRowHeight": { "type": { "name": "func" } },
     "getRowId": { "type": { "name": "func" } },
     "getRowSpacing": { "type": { "name": "func" } },
-    "headerHeight": { "type": { "name": "number" }, "default": "56" },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
     "hideFooterSelectedRowCount": { "type": { "name": "bool" } },

docs/translations/api-docs/data-grid/data-grid-premium-pt.json

@@ -14,6 +14,7 @@
     "checkboxSelectionVisibleOnly": "If <code>true</code>, the &quot;Select All&quot; header checkbox selects only the rows on the current page. To be used in combination with <code>checkboxSelection</code>. It only works if the pagination is enabled.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.",
+    "columnHeaderHeight": "Set the height in pixel of the column headers in the grid.",
     "columns": "Set of columns of type GridColDef[].",
     "columnThreshold": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered.",
     "columnTypes": "Extend native column types with your new column types.",
@@ -57,7 +58,6 @@
     "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: R) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
-    "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",

docs/translations/api-docs/data-grid/data-grid-premium-zh.json

@@ -14,6 +14,7 @@
     "checkboxSelectionVisibleOnly": "If <code>true</code>, the &quot;Select All&quot; header checkbox selects only the rows on the current page. To be used in combination with <code>checkboxSelection</code>. It only works if the pagination is enabled.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.",
+    "columnHeaderHeight": "Set the height in pixel of the column headers in the grid.",
     "columns": "Set of columns of type GridColDef[].",
     "columnThreshold": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered.",
     "columnTypes": "Extend native column types with your new column types.",
@@ -57,7 +58,6 @@
     "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: R) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
-    "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",

docs/translations/api-docs/data-grid/data-grid-premium.json

@@ -14,6 +14,7 @@
     "checkboxSelectionVisibleOnly": "If <code>true</code>, the &quot;Select All&quot; header checkbox selects only the rows on the current page. To be used in combination with <code>checkboxSelection</code>. It only works if the pagination is enabled.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.",
+    "columnHeaderHeight": "Sets the height in pixel of the column headers in the grid.",
     "columns": "Set of columns of type GridColDef[].",
     "columnThreshold": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered.",
     "columnTypes": "Extend native column types with your new column types.",
@@ -56,7 +57,6 @@
     "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: R) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
-    "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",
@@ -125,7 +125,7 @@
     "rowCount": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.",
     "rowGroupingColumnMode": "If <code>single</code>, all the columns that are grouped are represented in the same grid column. If <code>multiple</code>, each column that is grouped is represented in its own grid column.",
     "rowGroupingModel": "Set the row grouping model of the grid.",
-    "rowHeight": "Set the height in pixel of a row in the grid.",
+    "rowHeight": "Sets the height in pixel of a row in the grid.",
     "rowModesModel": "Controls the modes of the rows.",
     "rowReordering": "If <code>true</code>, the reordering of rows is enabled.",
     "rows": "Set of rows of type GridRowsProp.",

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -11,6 +11,7 @@
     "checkboxSelectionVisibleOnly": "If <code>true</code>, the &quot;Select All&quot; header checkbox selects only the rows on the current page. To be used in combination with <code>checkboxSelection</code>. It only works if the pagination is enabled.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.",
+    "columnHeaderHeight": "Set the height in pixel of the column headers in the grid.",
     "columns": "Set of columns of type GridColDef[].",
     "columnThreshold": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered.",
     "columnTypes": "Extend native column types with your new column types.",
@@ -51,7 +52,6 @@
     "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: R) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
-    "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -11,6 +11,7 @@
     "checkboxSelectionVisibleOnly": "If <code>true</code>, the &quot;Select All&quot; header checkbox selects only the rows on the current page. To be used in combination with <code>checkboxSelection</code>. It only works if the pagination is enabled.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.",
+    "columnHeaderHeight": "Set the height in pixel of the column headers in the grid.",
     "columns": "Set of columns of type GridColDef[].",
     "columnThreshold": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered.",
     "columnTypes": "Extend native column types with your new column types.",
@@ -51,7 +52,6 @@
     "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: R) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
-    "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",