[EuiTable] Add horizontal scrolling support via a new scrollable prop#9416
[EuiTable] Add horizontal scrolling support via a new scrollable prop#9416tkajtoch wants to merge 11 commits intoelastic:mainfrom
scrollable prop#9416Conversation
weronikaolejniczak
left a comment
There was a problem hiding this comment.
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
scrollableis 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 meaningfulhorizontallyScrollable?- Don't we want to document this prop (even if beta) in Responsive tables? We have the convention of using
EuiBadge(or actuallyEuiBetaBadgebut we're deprecating it) beside the header to denote beta functionalities. What I fear is that consumers will passscrollableand expect it to ✨ just work ✨ while we needresponsiveBreakpoint={false}andtableLayout="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
EuiTableandEuiBasicTableonly, if we want to be thorough it can also be forEuiInMemoryTable. I would verify there's a scroll.
There was a problem hiding this comment.
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 👍🏻
| /** | ||
| * 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; |
There was a problem hiding this comment.
semi-blocking: Should we also mention responsiveBreakpoint={false}?
018737d to
63bbd97
Compare
💚 Build SucceededHistory
cc @tkajtoch |
💚 Build Succeeded
History
cc @tkajtoch |
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(andresponsiveBreakpoint = "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
@defaultif default values are missing) and playground toggles