[EuiTable/EuiBasicTable/EuiInMemoryTable] Add always-visible sticky scrollbar by tkajtoch · Pull Request #9674 · elastic/eui

tkajtoch · 2026-05-21T23:28:28Z

Summary

Resolves #9620

This PR adds an opt-in, always-visible sticky horizontal scrollbar to EuiTable, EuiBasicTable, and EuiInMemoryTable to help users without trackpads scroll table contents horizontally.

Without this, scrolling the table horizontally requires one of the following:

Holding shift when scrolling using the scroll wheel
Using the middle mouse button (holding the scroll wheel button) on Windows
Scrolling to the bottom of the table to grab the native scrollbar track

This feature is disabled by default and can be enabled by setting the stickyScrollbar prop to true. When disabled, it doesn't register any event listeners or observers and doesn't modify the DOM.

Note: The styles applied to the virtual scrollbar are made to resemble the native scrollbar styles as closely as possible, however, every platform renders scrollbars differently. We standardize scrollbar background and track colors in our global styles. It is expected that the virtual scrollbar will not look 100% the same on Windows or Linux - Windows adds left and right buttons, and Linux differs by distro, GUI library, and more.

API Changes

component / parent	prop / child	change	description
`EuiTable`, `EuiBasicTable`, `EuiInMemoryTable`	`stickyScrollbar`	Added	Enable the sticky scrollbar behavior. When enabled, a virtual scrollbar sticking to the bottom of the viewport will be rendered on top of the table when the total table height is larger than the viewport height.

Screenshots

Before	After
sticky.scrollbar.before.mov	sticky.scrollbar.after.mov

Safari:

safari.mov

Chromium on Ubuntu + Gnome:

ubuntu.gnome.chromium.mov

Chromium on Debian + KDE:

debian.kde.chromium.mov

Firefox on Debian + KDE:

debian.kde.firefox.mov

Chromium on Debian + XFCE:

debian.xfce.chromium.mov

Firefox on Debian + XFCE:

debian.xfce.firefox.mov

Performance

Before/Disabled	After/Enabled

Measurements done by manually resizing the viewport - not suitable for 1:1 comparison.
When stickyScrollbar is enabled, rendering and painting time grows by ~60ms, and scripting by ~25ms. This is fully expected and considering that the virtual scrollbar element style refreshes on every resize and scroll event, the resource cost is actually pretty minimal. Using ResizeObserver and IntersectionObserver synchronized with requestAnimationFrame results in grade A performance. I consider these numbers good and see no objections shipping it as-is.

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

~~🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?~~
[ ]~ 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.~
🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
~~🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.~~

Impact level: 🟢 Low to None

Release Readiness

Documentation: {link to docs page(s)}
Figma: {link to Figma or issue}
Migration guide: {steps or link, for breaking/visual changes or deprecations}
Adoption plan (new features): (see parent epic)

QA instructions for reviewer

Go to URL and verify the sticky scrollbar behavior
- Confirm that the virtual scrollbar doesn't appear until the table overflows and stickyScrollbar is enabled
- Confirm that the virtual scrollbar disappears as soon as the table overflow ends - resize browser window in and out
- Confirm that the virtual scrollbar is draggable and simulates the native scrollbar behavior
- Confirm that the virtual scrollbar works in supported browsers

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, Cypress, and VRT
Changelog: Added changelog entry
Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

…lbar` component and the usage to `EuiTable` for best compatibility

… to help jest

tkajtoch · 2026-05-22T09:52:59Z

-        </EuiTableIsResponsiveContext.Provider>
-      </table>
-    </div>
+    <>


This should not result in snapshot changes unless stickyScrollbar is explicitly enabled for a table, which is what we want.

…ct 17

tkajtoch · 2026-05-22T12:18:52Z

-        fireEvent.pointerMove(track, {
-          clientX: 150,
-        });
+      const pointerDownEvent = new MouseEvent('pointerdown', {


This is needed for React 17 test runs. I explored replacing this logic with @testing-library/user-event but it would require upgrading that library.

…de additional context in JSDoc

weronikaolejniczak · 2026-05-22T13:14:47Z

@@ -0,0 +1 @@
+- Added experimental support for always-visible sticky horizontal scrollbars in `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` useful for dense tables that exceed the height of the viewport. This feature is currently opt-in and can be enabled by setting `stickyScrollbar: true`.


If it's experimental, should we mark it as beta, add it to the Beta schedule and add a note in the docs?

It's marked as beta in JSDoc, and yeah, I'm going to add it to our Beta schedule!

Docs update: 7756dd0

…t once

…ated at once

…t from EuiBasicTable docs

acstll

🟢 I tried breaking it but couldn't, works really well. (Did not test on a touch screen device, but there scrolling happens mostly via gestures, no? 🤔). Left a single non-blocking comment for your consideration.

acstll · 2026-05-22T13:30:35Z

+ * This mock doesn't provide a real IntersectionObserver implementation
+ * and should only be used for simple assertions.
+ * Use Cypress to test more complex scenarios end to end.


thanks for adding the comment 💚

elasticmachine · 2026-05-22T14:18:02Z

💚 Build Succeeded

Buildkite Build
Commit: c7eb97c

History

💚 Build #6574 succeeded 7756dd0
💚 Build #6570 succeeded a77626a
💚 Build #6565 succeeded ce53eb3
💔 Build #6560 failed 0b0da2c
💔 Build #6558 failed f601a76
💚 Build #6557 succeeded a3968b2

cc @tkajtoch

elasticmachine · 2026-05-22T14:24:55Z

💚 Build Succeeded

History

💚 Build #3627 succeeded 7756dd0
💚 Build #3623 succeeded a77626a
💚 Build #3618 succeeded ce53eb3
💚 Build #3613 succeeded 0b0da2c
💚 Build #3611 succeeded f601a76
💚 Build #3610 succeeded a3968b2

cc @tkajtoch

tkajtoch added 2 commits May 21, 2026 23:02

feat(EuiBasicTable): early WIP always-visible horizontal scrolling

2b9e477

feat: remove PoC code and move implementation to `EuiTableStickyScrol…

6bcd1b5

…lbar` component and the usage to `EuiTable` for best compatibility

tkajtoch self-assigned this May 21, 2026

tkajtoch changed the title ~~Feat/tables sticky scrollbar~~ [EuiTable/EuiBasicTable/EuiInMemoryTable] Add sticky scrollbar May 21, 2026

tkajtoch added 4 commits May 22, 2026 01:45

feat: use ResizeObserver and IntersectionObserver only when available…

889929e

… to help jest

chore: import from sticky_scrollbar directory

c8f75ac

feat: add stickyScrollbar prop to EuiTable and EuiBasicTable

a3968b2

test(EuiTableStickyScrollbar): add RTL tests

f601a76

tkajtoch changed the title ~~[EuiTable/EuiBasicTable/EuiInMemoryTable] Add sticky scrollbar~~ [EuiTable/EuiBasicTable/EuiInMemoryTable] Add always-visible sticky scrollbar May 22, 2026

tkajtoch commented May 22, 2026

View reviewed changes

Comment thread packages/eui/src/components/basic_table/basic_table.tsx Outdated

tkajtoch added 2 commits May 22, 2026 11:47

test(EuiTableStickyScrollbar): clean up tests

d26081b

chore(EuiBasicTable): revert unrelated change

0b0da2c

tkajtoch commented May 22, 2026

View reviewed changes

acstll self-requested a review May 22, 2026 10:02

test(EuiTableStickyScrollbar): update tests to be compatible with Rea…

ce53eb3

…ct 17

tkajtoch commented May 22, 2026

View reviewed changes

tkajtoch added 2 commits May 22, 2026 14:57

chore: add changelog

fe24a45

test: improve ResizeObserver and IntersectionObserver mocks and provi…

a77626a

…de additional context in JSDoc

tkajtoch marked this pull request as ready for review May 22, 2026 13:12

tkajtoch requested a review from a team as a code owner May 22, 2026 13:12

weronikaolejniczak reviewed May 22, 2026

View reviewed changes

tkajtoch added 4 commits May 22, 2026 15:17

chore: support multiple mock ResizeObserver instances to be created a…

2abf772

…t once

chore: support multiple mock IntersectionObserver instances to be cre…

ed3af3a

…ated at once

chore: move type def

812dade

docs(EuiTable): add sticky horizontal scrollbar section and link to i…

7756dd0

…t from EuiBasicTable docs

tkajtoch mentioned this pull request May 22, 2026

[Meta] Deprecation and Beta schedule #1469

Open

41 tasks

acstll approved these changes May 22, 2026

View reviewed changes

chore: replace hidden attribute with display: none

c7eb97c

tkajtoch merged commit ba2c877 into elastic:main May 22, 2026
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiTable/EuiBasicTable/EuiInMemoryTable] Add always-visible sticky scrollbar#9674

[EuiTable/EuiBasicTable/EuiInMemoryTable] Add always-visible sticky scrollbar#9674
tkajtoch merged 16 commits into
elastic:mainfrom
tkajtoch:feat/tables-sticky-scrollbar

tkajtoch commented May 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

tkajtoch May 22, 2026

Uh oh!

tkajtoch May 22, 2026

Uh oh!

weronikaolejniczak May 22, 2026

Uh oh!

tkajtoch May 22, 2026

Uh oh!

tkajtoch May 22, 2026

Uh oh!

acstll left a comment

Uh oh!

acstll May 22, 2026

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented May 22, 2026

Uh oh!

elasticmachine commented May 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -0,0 +1 @@
		- Added experimental support for always-visible sticky horizontal scrollbars in `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` useful for dense tables that exceed the height of the viewport. This feature is currently opt-in and can be enabled by setting `stickyScrollbar: true`.

Conversation

tkajtoch commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Performance

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

Uh oh!

tkajtoch May 22, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch May 22, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak May 22, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch May 22, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch May 22, 2026

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll May 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented May 22, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented May 22, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tkajtoch commented May 21, 2026 •

edited

Loading