[Data Grid] Add new includeHeaderFilters flag to include header filters when autosizing columns

[siriwatknp]

closes #13802
preview: https://deploy-preview-20510--material-ui-x.netlify.app/x/react-data-grid/column-dimensions/#autosizing-header-filters

🎯 Main Purpose

Adds a new includeHeaderFilters option to autosizeOptions that makes the column autosize algorithm consider header filter widths, preventing filter inputs from being squeezed when columns have short content.

🔍 Problem & Solution Context

Issue: When using header filters with columns that have short headers and short content, the autosize feature would make columns too narrow, causing the filter input to become unusable.

Example scenario: A column with header "ID" and values like "1", "2", "3" would autosize to a very narrow width, leaving no room for the filter input.

Solution: New includeHeaderFilters: true option tells autosize to also measure the header filter cell width and include it in the column width calculation.

🔧 Key Changes

• Feature: New includeHeaderFilters boolean option in autosizeOptions (defaults to false)
• API: Added findGridHeaderFilter() utility to locate header filter elements
• Styles: CSS adjustments to allow proper width measurement during autosizing
• Docs: New section and demo showing the feature usage
• Test: Verification that columns are wider when header filters are included

📁 Important Files

• useGridColumnResize.tsx - Core width measurement logic; adds header filter width to the pool of widths considered during autosizing
• GridRootStyles.ts - Adds CSS overrides for header filter cells during autosize measurement (uses !important to override flex layout)

📋 Usage Example

<DataGridPremium
  headerFilters
  autosizeOptions={{
    includeHeaderFilters: true,
  }}
/>

Or programmatically:

apiRef.current.autosizeColumns({
  includeHeaderFilters: true,
});

🚀 Impact

• Non-breaking: New optional flag defaults to false
• Plan: Pro/Premium only (header filters are a Pro feature)
• Closes: [data grid] How to autosize and header filters work well? #13802

💡 Implementation Notes

Why flex: none and width: unset in CSS?

Header filter cells normally use flex: 1 and a fixed width which constrains them to their column width. During autosizing, we need to measure the natural content width (how wide the filter input wants to be), not the constrained width. Setting flex: none and width: unset allows the element to expand to its intrinsic size so scrollWidth returns the true content width.

Why window.getComputedStyle for padding instead of getBoundingClientRect or clientWidth?

• getBoundingClientRect().width returns the rendered width (constrained by flex/column width), not the content's natural width
• clientWidth includes padding but still reflects the constrained rendered width
• scrollWidth gives the full content width including overflow, but excludes padding
• getComputedStyle is used specifically to get the padding values to add to scrollWidth, giving us: scrollWidth + paddingLeft + paddingRight = true natural width

This matches the existing pattern used for header cells in the same file.

Note

The !important in GridRootStyles is scoped to the .MuiDataGrid--autosizing state and only affects header filter cells during measurement.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Deploy preview: https://deploy-preview-20510--material-ui-x.netlify.app/

Updated pages:

• docs/data/data-grid/column-dimensions/column-dimensions.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+433B(+0.11%)	🔺+80B(+0.07%)
@mui/x-data-grid-pro	🔺+461B(+0.09%)	🔺+97B(+0.06%)
@mui/x-data-grid-premium	🔺+433B(+0.07%)	🔺+99B(+0.05%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 34c559b