[EuiTable] Add horizontal scrolling support via a new `scrollableInline` prop by tkajtoch · Pull Request #9416 · elastic/eui

tkajtoch · 2026-02-28T00:06:03Z

Summary

Resolves #9392

This PR adds horizontal scrolling support to the EuiTable component as well as EuiBasicTable and EuiInMemoryTable that use it internally.

Why are we making this change?

Part of the tables sweep initiative.

Screenshots #

scrollable = true (and responsiveBreakpoint = "xs" for the purpose of a small screen demo)

Impact to users

Horizontal scrolling is disabled by default right now. Users need to opt in by setting scrollable={true} on the component or in component defaults.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
Docs site QA
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately

weronikaolejniczak

This is such a small PR but it's so impactful! I tested it on exemplary tables in Kibana and it's working as expected 👍🏻 I have some blocking doubts.

Testing notes

The tables would probably need a thorough audit to make sure all cases work with horizontal scrolling but I tested the 3 component types for the time being. And yes, I used an AI agent for this, super helpful 👍🏻

✅ Storybook EuiTable playground story

Kapture.2026-03-02.at.12.45.56.mp4

❌ Storybook EuiBasicTable playground story

Control missing.

Solution

Add to args:

args: {
  // ... existing args
  scrollable: false,
}

then:

moveStorybookControlsToCategory(
  meta,
  ['responsiveBreakpoint', 'tableLayout', 'hasBackground', 'scrollable'],  // ADD 'scrollable'
  'EuiTable props'
);

❌ Storybook EuiInMemoryTable playground story

Control missing.

Solution

Add to args:

args: {
  // ... existing args
  scrollable: false,
}

then:

moveStorybookControlsToCategory(
  meta,
  ['responsiveBreakpoint', 'tableLayout', 'hasBackground', 'scrollable'],  // ADD 'scrollable'
  'EuiTable props'
);

✅ `EuiTable` Kibana usage

File: x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_table/index_table.js
Test path: Stack Management → Index Management

Kapture.2026-03-02.at.12.42.51.mp4

❌ `EuiBasicTable` Kibana usage

File: x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
Test path: Stack Management → Rules

Kapture.2026-03-02.at.13.21.23.mp4

Solution

Destructure scrollable in basic_table.tsx at lines 524 and 551 and pass to EuiTable at line 568.

Kapture.2026-03-02.at.13.33.40.mp4

❌ `EuiInMemoryTable` Kibana usage

File: x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
Test path: Stack Management → Index Management → Data Streams tab
Note: Toggle "Include stats" ON for more columns

Kapture.2026-03-02.at.13.23.58.mp4

Solution

Destructure scrollable in basic_table.tsx at lines 524 and 551 and pass to EuiTable at line 568. This works for EuiInMemoryTable because it uses EuiBasicTable internally, so there's no separate fix.

Kapture.2026-03-02.at.13.26.29.mp4

Other general doubts

scrollable is ambiguous to me. It could relate to "vertically scrollable" as well and be misinterpreted as something to do with pagination. Did you consider the more verbose but meaningful horizontallyScrollable?
Don't we want to document this prop (even if beta) in Responsive tables? We have the convention of using EuiBadge (or actually EuiBetaBadge but we're deprecating it) beside the header to denote beta functionalities. What I fear is that consumers will pass scrollable and expect it to ✨ just work ✨ while we need responsiveBreakpoint={false} and tableLayout="auto". I'd imagine something like "Responsive tables > Card view", "Responsive tables > Horizontal scrolling".
There are no tests covering horizontal scrolling for the 3 components. Should we add them here? Could be for EuiTable and EuiBasicTable only, if we want to be thorough it can also be for EuiInMemoryTable. I would verify there's a scroll.

weronikaolejniczak · 2026-03-02T11:12:12Z

packages/eui/src/components/provider/component_defaults/component_defaults.tsx

no action required:

Very good call on adding this to component defaults. This way, we "defer" the decision to Kibana whether they want to opt-in for all tables or not 👍🏻

weronikaolejniczak · 2026-03-02T11:50:39Z

packages/eui/src/components/table/table.tsx

+  /**
+   * Allow the table to grow over 100% of the container width
+   * and enable horizontal scrolling on overflow.
+   *
+   * This should only be used with [`tableLayout`]{@link EuiTableProps#tableLayout}
+   * set to `auto`.
+   * @beta
+   * @default false
+   */
+  scrollable?: boolean;


semi-blocking: Should we also mention responsiveBreakpoint={false}?

These are technically separate props. There could be uses where you set both to achieve a specific look.

I'm going to write a whole new documentation page on recommended table configurations, where this will be mentioned. Overall, responsiveBreakpoint and the mobile card view should only be used in very specific cases.

…ment in `<div>`

…JSDoc

… defaults

…M structure

… stories

packages/eui/changelogs/upcoming/9416.md

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

tkajtoch · 2026-03-03T10:41:54Z

@weronikaolejniczak Thank you for a detailed review! I pressed "ready for review" too quickly, without thinking much. Friday evenings...

scrollable is ambiguous to me. It could relate to "vertically scrollable" as well and be misinterpreted as something to do with pagination. Did you consider the more verbose but meaningful horizontallyScrollable?

I renamed it to scrollableInline to follow the modern inline/block naming. I'd like to update it in other places, too, but that's a topic for another day.

Don't we want to document this prop (even if beta) in Responsive tables? We have the convention of using EuiBadge (or actually EuiBetaBadge but we're deprecating it) beside the header to denote beta functionalities. What I fear is that consumers will pass scrollable and expect it to ✨ just work ✨ while we need responsiveBreakpoint={false} and tableLayout="auto". I'd imagine something like "Responsive tables > Card view", "Responsive tables > Horizontal scrolling".

I added a section to the docs that describes the new prop and its intended usage. I had to use EuiBetaBadge because the regular EuiBadge shows up in our sidebar as text, which we don't want. We should probably have a docs-only beta component that we can replace all EuiBetaBadge usages with.

There are no tests covering horizontal scrolling for the 3 components. Should we add them here? Could be for EuiTable and EuiBasicTable only, if we want to be thorough it can also be for EuiInMemoryTable. I would verify there's a scroll.

I added tests to cover the updated logic!

packages/website/docs/components/tables/basic.mdx

weronikaolejniczak

LGTM! 🟢 It's working as expected. Thanks for addressing my feedback!

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

elasticmachine · 2026-03-05T22:29:03Z

💚 Build Succeeded

History

💚 Build #2843 succeeded b60c766
💚 Build #2841 succeeded 2e21ee9
💚 Build #2838 succeeded 63bbd97
💚 Build #2826 succeeded 018737d

cc @tkajtoch

elasticmachine · 2026-03-05T22:45:32Z

💚 Build Succeeded

Buildkite Build
Commit: 9ea3350

History

💚 Build #5941 succeeded b60c766
💚 Build #5937 succeeded 63bbd97
💚 Build #5927 succeeded 018737d

cc @tkajtoch

tkajtoch marked this pull request as ready for review February 28, 2026 00:13

tkajtoch requested a review from a team as a code owner February 28, 2026 00:13

tkajtoch self-assigned this Feb 28, 2026

weronikaolejniczak self-requested a review March 2, 2026 10:03

weronikaolejniczak requested changes Mar 2, 2026

View reviewed changes

tkajtoch added 11 commits March 3, 2026 00:16

feat(EuiTable): add scrollable prop and wrap the root <table> ele…

bd25baf

…ment in `<div>`

chore(EuiTable): add component description and documentation link in …

2db6449

…JSDoc

refactor(EuiTable): clean up component defaults logic

00d8828

feat(EuiTable): add scrollable prop to component defaults

ca342ef

feat(EuiTable): add scrollable and tableLayout props to component…

22f2cd0

… defaults

test(EuiTable): update snapshots and assertions due to the updated DO…

0210b8c

…M structure

chore: add changelog

7d4fcc6

feat(EuiBasicTable): pass the scrollable prop to EuiTable

1dcd980

chore: add scrollable control to EuiBasicTable and EuiInMemoryTable…

4586c49

… stories

chore(EuiTable): rename scrollable to scrollableInline

48f3377

test: cover scrollableInline logic

63bbd97

tkajtoch force-pushed the feat/9392-table-horizontal-scrolling branch from 018737d to 63bbd97 Compare March 3, 2026 00:04

weronikaolejniczak reviewed Mar 3, 2026

View reviewed changes

packages/eui/changelogs/upcoming/9416.md Outdated Show resolved Hide resolved

tkajtoch changed the title ~~[EuiTable] Add horizontal scrolling support via a new scrollable prop~~ [EuiTable] Add horizontal scrolling support via a new scrollableInline prop Mar 3, 2026

tkajtoch and others added 2 commits March 3, 2026 11:10

Apply suggestion from @weronikaolejniczak

2e21ee9

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

docs(EuiBasicTable): add docs for the scrollableInline prop

b60c766

tkajtoch requested a review from weronikaolejniczak March 3, 2026 10:41

tkajtoch mentioned this pull request Mar 3, 2026

[EuiBasicTable/EuiInMemoryTable] Add minWidth and maxWidth options to columns #9422

Merged

9 tasks

weronikaolejniczak reviewed Mar 4, 2026

View reviewed changes

packages/website/docs/components/tables/basic.mdx Outdated Show resolved Hide resolved

weronikaolejniczak approved these changes Mar 4, 2026

View reviewed changes

Update packages/website/docs/components/tables/basic.mdx

9ea3350

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

tkajtoch merged commit 8703e43 into elastic:main Mar 5, 2026
5 checks passed

tkajtoch mentioned this pull request Mar 10, 2026

Upgrade EUI to v113.2.1 elastic/kibana#256842

Merged

tkajtoch mentioned this pull request Apr 7, 2026

[BETA] [EuiTable/EuiBasicTable/EuiInMemoryTable] scrollableInline prop #9572

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiTable] Add horizontal scrolling support via a new `scrollableInline` prop#9416

[EuiTable] Add horizontal scrolling support via a new `scrollableInline` prop#9416
tkajtoch merged 14 commits intoelastic:mainfrom
tkajtoch:feat/9392-table-horizontal-scrolling

tkajtoch commented Feb 28, 2026 •

edited

Loading

Uh oh!

weronikaolejniczak left a comment

Uh oh!

weronikaolejniczak Mar 2, 2026

Uh oh!

weronikaolejniczak Mar 2, 2026

Uh oh!

tkajtoch Mar 3, 2026

Uh oh!

Uh oh!

tkajtoch commented Mar 3, 2026

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Uh oh!

elasticmachine commented Mar 5, 2026

Uh oh!

elasticmachine commented Mar 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Testing notes

✅ Storybook EuiTable playground story

❌ Storybook EuiBasicTable playground story

Solution

❌ Storybook EuiInMemoryTable playground story

Solution

✅ EuiTable Kibana usage

❌ EuiBasicTable Kibana usage

Solution

❌ EuiInMemoryTable Kibana usage

Solution

Other general doubts

Uh oh!

weronikaolejniczak Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tkajtoch commented Mar 3, 2026

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 5, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Mar 5, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tkajtoch commented Feb 28, 2026 •

edited

Loading

✅ `EuiTable` Kibana usage

❌ `EuiBasicTable` Kibana usage

❌ `EuiInMemoryTable` Kibana usage