Summary

Resolves #9393

This PR adds sticky column support to the actions column type as a beta feature. It is currently limited to actions columns being the last column in a table.

I recommend reviewing commit by commit.

• The implementation uses scroll-state container added to <EuiTable /> wrapping div, which allows us to check whether the table is overflowing and adjust styles accordingly
• The hover style for the sticky column doesn't use a darker shade of gray as it does for the remaining cells. It's due to the sticky column needing an opaque background, and the hover background is actually a dark color with 0.04 transparency applied. During my testing, I found that no hover looks better than artificial hover. This is something we might adjust in the future.
• The sticky prop added to EuiTableRowCell, EuiTableHeaderCell, and EuiTableFooterCell is marked as internal and beta. It's not intended to be used outside of the EuiBasicTable/EuiInMemoryTable implementation at this moment.
• The documentation and detailed guidelines describing the new props and behaviors will be added separately

Why are we making this change?

Part of the tables sweep fast-track efforts.

Screenshots #

When there's enough space to fit all columns:

When there isn't enough space to fit all columns - smaller viewports:

Impact to users

This is an opt-in feature. All existing functionality remains unchanged.

QA

• Go to and verify the sticky column works as expected:
  • it renders as without the sticky behavior in desktop viewports
  • it sticks to the right side of the table when the table starts overflowing in smaller viewports
  • it shows a border on the left side of the sticky actions column when overflowing and not scrolled to the end of the table
• Confirm other EuiTable, EuiBasicTable and EuiInMemoryTable look and behave as previously

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
• Docs site QA
  • Added documentation
  • 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