mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard
verified publisher icon mui

[DataGrid] Add scroll shadows and fix scrollbar overlap

Open kenanyusuf opened this issue 11 months ago • 6 comments

  • Adds conditional scroll shadows when there are pinned columns and rows
  • Fixes https://github.com/mui/mui-x/issues/13286
  • Update vertical scrollbar positioning to cover pinned rows (previous discussion #16379)

Closes #10001

Browser Before After
Chrome, macOS mac chrome before mac chrome after
Edge, Windows 11 windows edge before windows edge after
Chrome, Windows 11 windows chrome before windows chrome after

kenanyusuf avatar Feb 05 '25 16:02 kenanyusuf

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

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+2.3KB(+0.59%) 🔺+577B(+0.49%)
@mui/x-data-grid-pro 🔺+2.64KB(+0.56%) 🔺+595B(+0.42%)
@mui/x-data-grid-premium 🔺+2.49KB(+0.40%) 🔺+603B(+0.32%)
@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 :no_entry_sign: dangerJS against 612f4209db6531238067eeeacd9926c406c41a72

mui-bot avatar Feb 05 '25 16:02 mui-bot

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Feb 05 '25 20:02 github-actions[bot]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Feb 11 '25 10:02 github-actions[bot]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Feb 18 '25 00:02 github-actions[bot]

Tbh I love the design as it is. I feel like it makes the grid with pinned rows a bit more readable as to which is the pinned vs unpinned section. I wonder if we could use the current styling for a grid with pinned rows, and the new styling for the case when there's no pinned rows?

romgrk avatar May 23 '25 17:05 romgrk

I feel like it makes the grid with pinned rows a bit more readable as to which is the pinned vs unpinned section

@romgrk it does, but I think scroll shadows are a better indicator — I plan to add this back in at the same time https://github.com/mui/mui-x/issues/10001

kenanyusuf avatar May 23 '25 18:05 kenanyusuf

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Jun 03 '25 09:06 github-actions[bot]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Jul 29 '25 23:07 github-actions[bot]

This pull request has been inactive for 30 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 15 days.

github-actions[bot] avatar Sep 09 '25 03:09 github-actions[bot]

OK, this PR is ready for review again. @romgrk any objections on your side?

cherniavskii avatar Sep 17 '25 10:09 cherniavskii