Pinning Fixed Width Columns#2964
Conversation
hellovolcano
requested review from
jattasNI,
mollykreis,
msmithNI and
rajsite
as code owners
jattasNI
left a comment
jattasNI
left a comment
There was a problem hiding this comment.
I ran out of time to do a full review today. Just pointing out a couple things I noticed when playing with storybook.
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
Looks like there are still some styling opacity issues with group rows on hover when there is a pinned column. (Note the arrow button lighter grey on the hovered row)
| description: widthModeDescription, | ||
| table: { category: apiCategory.attributes } | ||
| }, | ||
| pinned: { |
There was a problem hiding this comment.
I think the right place for these docs is in Table Column Configuration. That's where we describe the common column API and provide examples of each capability in actual use.
|
I also ran out of time to review this today, but an additional observation from looking at storybook is that I think the "Collapse All" button in the table header should be pinned so it stays aligned with the "collapse" button on each group row (or at least the rows with the outer-most level of grouping) 
|
| @@ -73,6 +73,7 @@ interface MappingColumnTableArgs extends SharedTableArgs { | |||
| fieldName: string; | |||
There was a problem hiding this comment.
We should try to beef up our visual test coverage to validate as many of the corner cases that require custom styling as we can.
Ideally that would involve a matrix test that shows a pinned column along with various states for selection, grouping, hierarchy, hover, and themes. Ideally the content would be scrolled horizontally to make sure the clipping behind the pinned column is working.
There might be some gaps in our infrastructure to achieve all of that. For example: matrix tests may not yet support a Storybook play() function which would be the natural way to perform the horizontal scroll. And it might not be possible to put shadow dom parts like rows in the hover state. If you hit roadblocks like that feel free to reach out to one of us to brainstorm.
| visibility: visible; | ||
| } | ||
|
|
||
| .pinned-columns-header-container { |
There was a problem hiding this comment.
Molly, Milan, and shared an opinion that the way unpinned columns are clipped behind the pinned column looks a bit abrupt right now. You mentioned you're working with VxD on styling. Could you check if they have ideas how to delineate pinned and unpinned columns with some sort of shadow or divider to avoid sharply clipped content?
| "> | ||
| <div role="rowgroup" class="header-row-container"> | ||
| <div class="header-row" role="row"> | ||
| <div class="pinned-columns-header-container"> |
There was a problem hiding this comment.
In Firefox (I saw it on macOS, Molly saw it on Windows), we noticed that the header of the pinned column isn't laying out correctly. It scrolls with the unpinned headers initially. Then if you hover over it, its position refreshes to correctly be pinned.
Screen.Recording.2026-06-01.at.2.06.54.PM.mov
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
FYI I left some API design feedback in the linked isue: #848 (comment)
Some of it requires changes to the approach in the PR, hopefully not too big though. The main thing is changing the attribute from a boolean to a string enum.
3 participants
Pull Request
🤨 Rationale
This PR adds support for pinning fixed-width table columns to the left side of the Nimble table, with primary support for icon-sized mapping columns.
Works toward addressing #848.
👩💻 Implementation
Added a sticky pinned column. When a column is pinned, it is the only thing that is sticky.
🧪 Testing
Added unit tests for pinned columns to table test spec
Manually verified:
✅ Checklist