Skip to content

[DataGrid] Add debounce for columns panel search #18719

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 23 commits into from
Jul 23, 2025
Merged

[DataGrid] Add debounce for columns panel search #18719

merged 23 commits into from
Jul 23, 2025

Conversation

noherczeg
Copy link
Contributor

We have encountered a situation where we have a huge amount of columns and I noticed that the columns search is blocking the rendering of the whole columns panel. This intends to solve that issue.

The implementation might be a bit naive, please advise if necessary!

@zannager zannager added the scope: data grid Changes related to the data grid. label Jul 8, 2025
@noherczeg
Copy link
Contributor Author

@zannager Can I have some info on when you guys will have time to look into this? I'd love to know if this has a chance to get into MUI or not. Cheers!

@noherczeg
Copy link
Contributor Author

@oliviertassinari can I have some feedback on this? I need to know whether this is a valid candidate or not, because right now we need to work around this limitation. Thank you!

@zannager
Copy link
Member

@cherniavskii Could you please take a look? Should @noherczeg create an issue and link it here?

@noherczeg
Copy link
Contributor Author

Guys, can I get some response? Pretty please?

@mui-bot
Copy link

mui-bot commented Jul 23, 2025 •
edited
Loading

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

Bundle size report

Total Size Change: 🔺+951B(+0.01%) - Total Gzip Change: 🔺+365B(+0.01%)
Files: 122 total (0 added, 0 removed, 6 changed)

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

@mui/x-data-grid-pro parsed: 🔺+170B(+0.04%) gzip: 🔺+70B(+0.05%)
@mui/x-data-grid parsed: 🔺+169B(+0.04%) gzip: 🔺+61B(+0.06%)
@mui/x-data-grid-pro/DataGridPro parsed: 🔺+169B(+0.04%) gzip: 🔺+57B(+0.04%)
@mui/x-data-grid/DataGrid parsed: 🔺+169B(+0.05%) gzip: 🔺+50B(+0.05%)
@mui/x-data-grid-premium parsed: 🔺+137B(+0.02%) gzip: 🔺+69B(+0.04%)
@mui/x-data-grid-premium/DataGridPremium parsed: 🔺+137B(+0.03%) gzip: 🔺+58B(+0.04%)
@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 94bbca7

cherniavskii
cherniavskii approved these changes Jul 23, 2025
View reviewed changes
Copy link
Member

@cherniavskii cherniavskii left a comment

Choose a reason for hiding this comment

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

Sorry for taking so long to review the PR and thank you for your contribution!

@cherniavskii cherniavskii added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. performance feature: Column visibility labels Jul 23, 2025
@cherniavskii cherniavskii changed the title [DataGrid] Add debounce for column searches [DataGrid] Add debounce for columns panel search Jul 23, 2025
@cherniavskii cherniavskii merged commit ba4e443 into mui:master Jul 23, 2025
28 checks passed
A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Jul 25, 2025
@noherczeg @cherniavskii @A-s-h-o-k
[DataGrid] Add debounce for columns panel search (mui#18719)
84eea8c 
Co-authored-by: Andrew Cherniavskii <andrew@mui.com>
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
feature: Column visibility performance 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.
4 participants
@noherczeg @zannager @mui-bot @cherniavskii