Skip to content

Pinning Fixed Width Columns#2964

Open
hellovolcano wants to merge 53 commits into
mainfrom
users/vgleason/pinned-column
Open

Pinning Fixed Width Columns#2964
hellovolcano wants to merge 53 commits into
mainfrom
users/vgleason/pinned-column

Conversation

@hellovolcano

@hellovolcano hellovolcano commented May 21, 2026

Copy link
Copy Markdown
Contributor

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. Multiple fixed width columns can be pinned.

  • Implemented pinned-column rendering/layout in the table so pinned columns are separated from scrollable columns, rendered as sticky, and sized from pixel widths.
  • Updated row/group-row behavior so indentation is applied at the first non-pinned column and group rows account for pinned-column offset.
  • Added table validation for pinned-column configuration (invalidPinnedColumnConfiguration) to catch pinned columns without a resolvable fixed width.
  • Updated table update tracking so pinned state changes trigger required layout/focus recalculations.
  • Updated Storybook mapping-column docs/examples to expose pinned property.
  • Added angular and blazor wrappers

🧪 Testing

Added unit tests for pinned columns to table test spec
Added matrix tests to catch multiple combinations of table configuration
Manually verified:

  • Pinned column appears correctly when grouping, multi-select, and hierarchy are enabled
  • First non-pinned column has hierarchy indentation applied correctly
  • Pinned column is the only sticky column

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@hellovolcano hellovolcano mentioned this pull request May 21, 2026
1 task
@hellovolcano hellovolcano marked this pull request as ready for review May 29, 2026 16:43

@jattasNI jattasNI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I ran out of time to do a full review today. Just pointing out a couple things I noticed when playing with storybook.

@mollykreis

mollykreis commented May 29, 2026

Copy link
Copy Markdown
Contributor

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)

image

Comment thread packages/storybook/src/nimble/table-column/base/table-column.stories.ts Outdated
…tories.ts

Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>
Comment thread packages/nimble-components/src/table/components/row/styles.ts Outdated
Comment thread packages/nimble-components/src/table/components/row/template.ts
Comment thread packages/nimble-components/src/table/models/table-layout-manager.ts Outdated
Comment thread packages/nimble-components/src/table/template.ts
Comment thread packages/nimble-components/src/table-column/base/index.ts Outdated
Comment thread packages/nimble-components/src/table/components/group-row/styles.ts Outdated
Comment thread packages/nimble-components/src/table-column/base/index.ts Outdated
Comment thread packages/nimble-components/src/table-column/base/index.ts Outdated
Comment thread packages/nimble-components/src/table/components/row/template.ts
Comment thread packages/nimble-components/src/table/models/table-validator.ts Outdated
Comment thread packages/nimble-components/src/table/index.ts Outdated
Comment thread packages/nimble-components/src/table/index.ts
@hellovolcano hellovolcano requested a review from mollykreis June 18, 2026 17:10
Comment thread packages/nimble-components/src/table-column/mixins/pinnable-column.ts Outdated
Comment thread packages/nimble-components/src/table/template.ts Outdated
Comment thread packages/storybook/src/nimble/table/table-pinned-columns.matrix.stories.ts Outdated
@hellovolcano hellovolcano requested a review from mollykreis June 18, 2026 21:03
Comment thread packages/nimble-components/src/table/template.ts Outdated
Comment thread packages/nimble-components/src/table/models/table-update-tracker.ts Outdated
@hellovolcano hellovolcano requested a review from mollykreis June 18, 2026 22:41
Comment thread packages/nimble-components/src/table/template.ts Outdated
@rajsite

rajsite commented Jun 19, 2026

Copy link
Copy Markdown
Member

@hellovolcano I wasn't able to complete a review today, I do expect to review Monday

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants