MudDataGrid: SCSS, Clean Up Sticky Columns#11800
Conversation
- Added `mud-table-dense` to thead in MudTable and MudDataGrid - Updated `_table.scss` with new styles for sticky headers and loading states, including conditional handling for dense layouts. - Introduced `DataGridStickyHeaderTest.razor` to demonstrate sticky headers with a sample `MudDataGrid` setup, including loading and filter mode toggles.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors sticky header functionality in MudDataGrid and MudTable components to improve SCSS organization and fix sticky column positioning issues. The changes address visual problems with sticky headers when using different table configurations.
- Streamlined SCSS for sticky headers by consolidating duplicate rules and improving maintainability
- Fixed sticky column positioning for filter rows and loading indicators across all table modes
- Added proper Dense property support to table headers for consistent styling
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/MudBlazor/Styles/components/_table.scss |
Consolidated sticky header SCSS rules, removed duplicate dense-specific styles, and fixed positioning calculations for filter rows and loading indicators |
src/MudBlazor/Components/Table/MudTableBase.cs |
Added Dense class to table header and cleaned up unused imports |
src/MudBlazor/Components/DataGrid/MudDataGrid.razor.cs |
Added Dense class to DataGrid table header for consistency with MudTable |
src/MudBlazor.UnitTests.Viewer/TestComponents/DataGrid/DataGridStickyHeaderTest.razor |
Added test component for visual verification of sticky header behavior across different configurations |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the SCSS for sticky headers in MudDataGrid and MudTable to improve maintainability and add support for dense mode. The changes centralize the sticky header logic, correctly apply the mud-table-dense class, and use the modern :has() CSS selector for more robust positioning. The code changes in the C# files are clean and align with the goal of the PR. My main feedback is on the SCSS file, suggesting improvements for clarity and maintainability by separating CSS rules and addressing hardcoded pixel values. Overall, this is a great improvement to the table components' styling.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dev #11800 +/- ##
==========================================
- Coverage 91.34% 91.33% -0.01%
==========================================
Files 468 468
Lines 14762 14764 +2
Branches 2877 2877
==========================================
+ Hits 13484 13485 +1
Misses 636 636
- Partials 642 643 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
vernou
left a comment
vernou
left a comment
There was a problem hiding this comment.
I am not good at CSS to review this changes.
I tested in local with the viewer. The bug is fixed and I found no problem.
github-actions
bot
added
bug
Adjusted MudDataGrid and MudTable to include the mud-table-dense css selector on the thead element as well, allowing me to reduce overall scss burden and streamline SCSS problems with Sticky Headers.
Corrected Sticky column behavior, now filter row when ColumnFilterRow is selected sticks to the 2nd row of Sticky column and Loading sticks to the second or third row depending of ColumnFilterRow is used. Also now all 6 different modes respect the Dense property.
Resolves #11786
Visually tested all Docs for both MudTable and MudDataGrid in Docs.Server as well as UnitTests.Viewer
DataGridStickyColumns.mp4
Checklist:
dev).