AdvancedTable - First column pinning #3104

dchyun · 2025-08-11T13:50:09Z

📌 Summary

If merged, this PR would support allowing the user to pin and unpin the first column of the AdvancedTable. It also has a few other alterations and fixes for the Advanced table for translating text in the context menu, and fixing a CSS issues in the scroll indicator.

Preview page

🛠️ Detailed description

Column pinning

If the existing @hasStickyFirstColumn argument is true currently the first column is sticky/pinned, but the user can does not have the ability to change that, or to pin a column that started as unpinned.

With the changes in this PR, @hasStickyFirstColumn would have the following interactions:

if true, the first column is sticky and the user can toggle its pinned state with the context menu
if false, the first column is not sticky and the user can toggle its pinned state with the context menu
if undefined, the first column is not sticky and there is no menu option to pin it

Additionally as part of the filtering implementation all text in the ThContextMenu has been converted to use translations.

Design considerations

With the changes proposed here, a user would be able to change a first column set as sticky to not sticky with the context menu. It would not be possible to have a sticky column that the user can not change the state of.

Scroll indicator CSS issue

While implementing the column pinning feature, it was noticed that when the column was sticky there was a slight gap present between the left scroll indicator, and the border of the sticky cells.

This is an existing issue caused when the width of the first column is set to a fixed px width. When the first column width is set to auto this issue is not seen.

The cause of this issue is that when the first column is set to auto its width grows slightly when sticky as the border widths of it are increased. However, the offset calculated for the scroll indicator uses the smaller pre-scrolled width of the cell in its calculations. This allows the offset of the scroll indicator to be slightly less than the cell width and be hidden appropriately.

Not sticky

Sticky

When the width of a column is set to a fixed px value, the width of the cell does not increase when sticky. When this occurs the scroll indicator is not positioned correctly since it is not hidden slightly under the cell.

To fix this issue, an update has been made to reduce the left offset of the scroll indicator by 1px when the first column has a px width.

📸 Screenshots

🔗 External links

Jira ticket: HDS-5237

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2025-08-11T13:50:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Aug 21, 2025 1:14pm
hds-website	Ready	Preview	Aug 21, 2025 1:14pm

shleewhite

Overall, the interaction looks great. I think it would be good to add an example where you can unpin the column and it starts as pinned, currently all the examples have it default unpinned.

Also, could you add this feature to the full page demo?

packages/components/src/components/hds/advanced-table/index.hbs

packages/components/src/components/hds/advanced-table/th-context-menu.ts

showcase/app/templates/page-components/advanced-table.hbs

zamoore

Seems to work pretty well so far

packages/components/src/components/hds/advanced-table/index.hbs

packages/components/src/components/hds/advanced-table/th-context-menu.ts

zamoore · 2025-08-12T00:05:07Z

packages/components/src/components/hds/advanced-table/th-context-menu.ts

+      onPinFirstColumn();
+    }
+
+    dropdownCloseCallback?.();


Nit: I think I like the style of typeof === 'function' for nil checking functions, but I think we should stick to one style of checking inside of one function

Also, I know this is my own code, but I think dropdownCloseCallback should always be present, right?

Looking at other components typeof functionName === 'function' seems to be the style used for nil checking functions. Was there another way of checking you wanted to use?

dropdownCloseCallback has to be marked as optional, because in the Dropdown blocks close is marked as optional. When setting it to required in the context menu the following errors get thrown.

This would be fixed by #3118

@shleewhite As part of your PR should we update the dropdownCloseCallback to be required?

Yeah, the PR already makes it so D.close which is used here is always defined

design-system/packages/components/src/components/hds/advanced-table/th-context-menu.hbs

Line 17 in cf13cb9

{{on "click" (fn option.action @column D.close)}}

Yeah, the PR already makes it so D.close is always defined

design-system/packages/components/src/components/hds/advanced-table/th-context-menu.hbs

Line 17 in cf13cb9

{{on "click" (fn option.action @column D.close)}}

packages/components/src/components/hds/advanced-table/index.hbs

packages/components/src/components/hds/advanced-table/th-sort.ts

Copilot

Pull Request Overview

This PR adds support for first column pinning in the AdvancedTable component, allowing users to toggle the pinned state of the first column through a context menu. The changes enhance the existing @hasStickyFirstColumn argument to support user interaction while also adding internationalization support for context menu strings.

Key changes:

Enhanced @hasStickyFirstColumn to support user-controlled pinning/unpinning via context menu
Added internationalization support for context menu options
Extended context menu functionality to include pin/unpin options for the first column

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`packages/components/src/components/hds/advanced-table/index.ts`	Core component logic for managing first column pinning state and user interactions
`packages/components/src/components/hds/advanced-table/th-context-menu.ts`	Context menu component with new pin/unpin options and i18n support
`packages/components/src/components/hds/advanced-table/th.ts`	Updated header cell component to support context menu for sticky columns
`packages/components/src/components/hds/advanced-table/th-sort.ts`	Updated sortable header cell component with context menu support
`packages/components/translations/hds/components/advanced-table/th-context-menu/en-us.yaml`	Translation file for context menu strings
`showcase/app/templates/page-components/advanced-table.hbs`	Showcase page demonstrating the new pinnable column functionality
`showcase/tests/integration/components/hds/advanced-table/index-test.js`	Comprehensive test coverage for the new pinning functionality
`.changeset/tangy-bushes-matter.md`	Changelog entry documenting the new features

packages/components/src/components/hds/advanced-table/th-context-menu.ts

packages/components/src/components/hds/advanced-table/index.ts

hashibot-hds added packages/components showcase labels Aug 11, 2025

vercel bot deployed to Preview – hds-showcase August 11, 2025 14:57 View deployment

vercel bot deployed to Preview – hds-website August 11, 2025 15:00 View deployment

shleewhite reviewed Aug 11, 2025

View reviewed changes

vercel bot deployed to Preview – hds-showcase August 11, 2025 19:19 View deployment

vercel bot deployed to Preview – hds-website August 11, 2025 19:21 View deployment

zamoore reviewed Aug 12, 2025

View reviewed changes

vercel bot deployed to Preview – hds-showcase August 12, 2025 16:23 View deployment

vercel bot deployed to Preview – hds-showcase August 12, 2025 16:26 View deployment

vercel bot deployed to Preview – hds-website August 12, 2025 16:31 View deployment

vercel bot deployed to Preview – hds-showcase August 12, 2025 16:33 View deployment

vercel bot deployed to Preview – hds-website August 12, 2025 16:36 View deployment

shleewhite reviewed Aug 12, 2025

View reviewed changes

packages/components/src/components/hds/advanced-table/index.hbs Show resolved Hide resolved

packages/components/src/components/hds/advanced-table/th-sort.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – hds-showcase August 12, 2025 20:57 View deployment

vercel bot deployed to Preview – hds-website August 12, 2025 20:59 View deployment

dchyun force-pushed the dchyun/adv-table-pin-col branch from 5f01434 to be88bbb Compare August 13, 2025 13:28

dchyun requested a review from Copilot August 13, 2025 13:28

vercel bot deployed to Preview – hds-showcase August 13, 2025 13:29 View deployment

vercel bot deployed to Preview – hds-website August 13, 2025 13:32 View deployment

dchyun requested review from Copilot and removed request for Copilot August 13, 2025 13:58

dchyun marked this pull request as ready for review August 13, 2025 14:25

dchyun requested a review from a team as a code owner August 13, 2025 14:25

vercel bot deployed to Preview – hds-showcase August 13, 2025 14:26 View deployment

vercel bot deployed to Preview – hds-website August 13, 2025 14:28 View deployment

This comment was marked as outdated.

Sign in to view

dchyun requested a review from Copilot August 13, 2025 16:46

Copilot AI reviewed Aug 13, 2025

View reviewed changes

vercel bot deployed to Preview – hds-website August 19, 2025 21:03 View deployment

vercel bot deployed to Preview – hds-showcase August 20, 2025 11:29 View deployment

vercel bot deployed to Preview – hds-website August 20, 2025 11:31 View deployment

shleewhite approved these changes Aug 20, 2025

View reviewed changes

jorytindall approved these changes Aug 20, 2025

View reviewed changes

dchyun added 17 commits August 21, 2025 09:09

HDS-5327 AdvancedTable first column pinning

f5c5d2f

Fix: Showcase heading levels

9c69166

Feat: Refactor to remove hasPinnableFirstColumn arg

8b0cefc

Feat: Add hasStickyColumn=true examples to showcase

e47c11c

Feat: Add translations for ThContextMenu

174a7d9

Fix: Use column.isfirst to set @isStickyColumn

50da829

Fix: Refactor to remove passing hasStickyFirstColumn to Th

5e7b921

Feat: Add integration tests for pinning columns

9e3b454

Chore Add changeset

ba66d31

Fix: Linting

b071fff

Fix: Refactor showContextMenu logic

27f69f8

Fix: Refactor _isStickyColumn

684cb70

Fix: ThContextMenu reset column width translation

748fa6b

Fix: Left scroll indicator position for sticky + px width col

3182f0d

Chore: Update changeset

f072265

Fix: Update comment

474f13d

Fix: Column pinning when scrolled style issues

cf13cb9

dchyun force-pushed the dchyun/adv-table-pin-col branch from 093b7b7 to cf13cb9 Compare August 21, 2025 13:10

vercel bot deployed to Preview – hds-showcase August 21, 2025 13:12 View deployment

vercel bot deployed to Preview – hds-website August 21, 2025 13:14 View deployment

dchyun merged commit 815882a into main Aug 21, 2025
16 checks passed

dchyun deleted the dchyun/adv-table-pin-col branch August 21, 2025 13:44

hashibot-hds mentioned this pull request Aug 21, 2025

Version Packages #3114

Merged

dchyun mentioned this pull request Aug 21, 2025

PopoverPrimitive, RichTooltip, Dropdown: add optional event argument to the close callback #3118

Merged

5 tasks

alex-ju added this to the [email protected] milestone Sep 4, 2025

AdvancedTable - First column pinning #3104

AdvancedTable - First column pinning #3104

Uh oh!

Conversation

dchyun commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

Column pinning

Design considerations

Scroll indicator CSS issue

📸 Screenshots

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shleewhite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zamoore left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zamoore Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

zamoore Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

dchyun Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

shleewhite Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

dchyun Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

shleewhite Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

shleewhite Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dchyun commented Aug 11, 2025 •

edited

Loading

vercel bot commented Aug 11, 2025 •

edited

Loading

shleewhite Aug 21, 2025 •

edited

Loading