Skip to content

[DataGrid] Fix styling virtualized column headers #18603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 1, 2025
Merged

[DataGrid] Fix styling virtualized column headers #18603

merged 1 commit into from
Jul 1, 2025

Conversation

KenanYusuf
Copy link
Member

@KenanYusuf KenanYusuf commented Jun 30, 2025 •
edited
Loading

@KenanYusuf KenanYusuf added scope: data grid Changes related to the data grid. customization: css Design CSS customizability. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Jun 30, 2025
@mui-bot
Copy link

mui-bot commented Jun 30, 2025 •
edited
Loading

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

Bundle size report

Total Size Change: ▼-688B(-0.01%) - Total Gzip Change: ▼-180B(0.00%)
Files: 122 total (0 added, 0 removed, 6 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-data-grid-premium parsed: ▼-116B(-0.02%) gzip: ▼-20B(-0.01%)
@mui/x-data-grid-premium/DataGridPremium parsed: ▼-116B(-0.02%) gzip: ▼-48B(-0.03%)
@mui/x-data-grid-pro/DataGridPro parsed: ▼-116B(-0.03%) gzip: ▼-41B(-0.03%)
@mui/x-data-grid-pro parsed: ▼-114B(-0.02%) gzip: ▼-25B(-0.02%)
@mui/x-data-grid parsed: ▼-113B(-0.03%) gzip: ▼-22B(-0.02%)
@mui/x-data-grid/DataGrid parsed: ▼-113B(-0.03%) gzip: ▼-24B(-0.02%)
@mui/x-charts parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/BarChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartsToolbarPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartZoomSlider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/FunnelChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/Heatmap parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/LineChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/PieChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/RadarChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ScatterChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/BarChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartContainer parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartDataProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsAxisHighlight parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsClipPath parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsGrid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLegend parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsOverlay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsReferenceLine parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsSurface parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsTooltip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsXAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsYAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/Gauge parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/LineChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/PieChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/RadarChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ScatterChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/SparkLineChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/Toolbar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/TimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateTimeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DayCalendarSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MonthCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickersActionBar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickersCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 8024802

@KenanYusuf KenanYusuf requested a review from a team June 30, 2025 09:38
cherniavskii
cherniavskii approved these changes Jun 30, 2025
View reviewed changes
packages/x-data-grid/src/components/containers/GridRootStyles.ts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know why there are still white gaps when scrolling to the right?

Screen.Recording.2025-06-30.at.14.12.57.mov

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, it was missing the background color on the filler cell, good spot. Updated the demo.

@KenanYusuf KenanYusuf merged commit fbd7eae into mui:master Jul 1, 2025
28 checks passed
@KenanYusuf KenanYusuf deleted the fix-styling-virtualized-header branch July 1, 2025 08:27
@KenanYusuf KenanYusuf mentioned this pull request Jul 1, 2025
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cherniavskii cherniavskii cherniavskii approved these changes

Assignees
No one assigned
Labels
customization: css Design CSS customizability. scope: data grid Changes related to the data grid. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[data grid] Issue when styling virtualized column header row
3 participants
@KenanYusuf @mui-bot @cherniavskii