Skip to content

feat: add minScrollableWidth option to Table stickyColumns#4812

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-sticky-first-column
Draft

feat: add minScrollableWidth option to Table stickyColumns#4812
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-sticky-first-column

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds an opt-in stickyColumns.minScrollableWidth option to the Table component so consumers can control the minimum scrollable space that must remain next to the sticky columns for the feature to stay active.

Background — this fills a gap in the existing feature, it does not add a new one. The Table already fully supports sticky first (and last) columns via stickyColumns={{ first, last }}. However, the feature silently deactivates whenever the remaining scrollable space drops below a hard-coded 148px (MINIMUM_SCROLLABLE_SPACE), and there is no way for a consumer to influence that threshold. On narrower tables this means a first column that the developer explicitly asked to pin simply stops being sticky, with no signal.

This PR exposes that threshold:

<Table
  stickyColumns={{ first: 1, minScrollableWidth: 0 }}  // keep the first column pinned even on narrow tables
  ...
/>
  • New optional TableProps.StickyColumns.minScrollableWidth?: number (pixels).
  • Threaded through useStickyColumns into the enablement check (isEnabled).
  • Defaults to the existing MINIMUM_SCROLLABLE_SPACE (148) when omitted — fully backward compatible, no behavior change for existing consumers.

Files touched:

  • src/table/interfaces.tsx — public StickyColumns.minScrollableWidth + doc comment.
  • src/table/sticky-columns/interfaces.ts — internal StickyColumnsProps.minScrollableWidth.
  • src/table/sticky-columns/use-sticky-columns.ts — plumbed into the store + isEnabled guard.
  • src/table/internal.tsx — passes the prop from the public API into the hook.
  • pages/table/sticky-columns-min-scrollable-width.page.tsx — new dev page.
  • unit tests + documenter snapshot updated.

⚠️ Ticket mismatch note: This work was requested against SIM AWSUI-61614, but that ticket is actually "Feature request: Allow excess whitespace in warning text" (FormField/Alert) and is already auto-resolved — it is unrelated to Table sticky columns. Per the task instructions I implemented the described "Table sticky first column" feature and am flagging the discrepancy here. Since Table already ships sticky first columns, I filled the closest genuine gap (minScrollableWidth) rather than duplicating existing functionality.

Related links, issue #, if available: SIM AWSUI-61614 (see mismatch note above)

How has this been tested?

  • New unit tests in src/table/sticky-columns/__tests__/use-sticky-columns.test.tsx:
    • minScrollableWidth=0 keeps sticky columns active when the default 148px threshold would deactivate them.
    • a large minScrollableWidth deactivates sticky columns even when the default threshold would allow them.
  • Full Table unit suite green: 539 passed / 42 suites.
  • npm run quick-build and full gulp build succeed; ESLint clean on all touched files.
  • Manual verification via the new dev page (#/light/table/sticky-columns-min-scrollable-width), toggling minScrollableWidth on a narrow (600px) horizontally-scrollable table.
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

The stickyColumns feature silently deactivates when the remaining
scrollable space drops below a hard-coded 148px threshold, with no way
for consumers to influence it. This adds an opt-in
stickyColumns.minScrollableWidth to override that minimum, allowing the
first (or last) column(s) to stay pinned on narrower tables (e.g. set to
0) or to deactivate sooner.

The option is threaded through useStickyColumns into the enablement
check and defaults to the existing MINIMUM_SCROLLABLE_SPACE, so behavior
is unchanged when the property is omitted (backward compatible).

Adds unit tests and a dev page.
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (e49ba79).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4812   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      952           
  Lines       30816    30818    +2     
  Branches    11318    11320    +2     
=======================================
+ Hits        30081    30083    +2     
  Misses        688      688           
  Partials       47       47           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

1 participant