[EuiTable] Add optional transparent table via hasBackground prop

[mgadewoll]

Summary

closes #9186
closes #8231

This PR updates EuiTable and the more specific EuiBasicTable and EuiInMemoryTable components by adding support for the prop hasBackground.
This prop controls the appliance of a background color on the table component and respective sub components. When hasBackground=true, the table has no background color besides state backgrounds (hover, selected, marked).
Mobile tables (which look like panels) with hasBackground=false will have no background, no shadow and borders instead.

API changes

prop	type	default value	description
hasBackground	boolean	true	Toggles the table's background on/off

Additional changes

• replaces a few deprecated theme tokens
  • adds euiTheme.components.tableFooterBackground to handle the custom background color definitions (we might want to check these eventually, if they should be aligned with existing tokens)
  • updates the text color token for . euiTableRowCell__mobileHeader which results in a slight color change in dark mode (#7186A8 -> #98A8C3
• fixes an alignment bug for table actions when switching color modes. The reason for the bug was an updated Emotion style order due to equal specificity. By ensuring a higher specificity we ensure a stable style appliance.

Why are we making this change?

💅 UI updates: This update is part of the design work 🔒 to update the look and feel of the UI. This update on EuiTable specifically will support creating more clean page/table layouts.

Screenshots #

hasBackground

hasBackground=true (default)	hasBackground=false

Updated .euiTableRowCell__mobileHeader color

before	after

Mobile table action buttons alignment bug

before	after
Screen.Recording.2025-11-19.at.09.39.05.mov	Screen.Recording.2025-11-19.at.09.39.31.mov

Impact to users

🟢 There are no code updates required by consumers.

ℹ️ Due to the added hasBackground prop and related Emotion class, snapshot tests may fail and require updates.

QA

🧪 Storybook:

• EuiTable
• EuiBasicTable
• EuiInMemoryTable

Checks:

• verify hasBackground applies correctly:
  • tables have no background
  • table footer has no background
  • expanded rows have no background
  • state backgrounds for hover, marked, selected etc still work as expected
• verify that there is no unexpected regression for hasBackground=true and production
• verify that the action buttons in mobile tables don't change position when toggling between color modes

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
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[JoseLuisGJ]

LGTM 👍

[acstll]

A 👻 and a question. Code looks correct and everything is working nicely as expected, couldn't find any regressions compared to production (went through all QA steps).

[acstll]

🟢 Thanks for addressing my comments!

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: d9807ae
• Documentation website
• Storybook

History

• 💔 Build #2019 failed 95914c1
• 💚 Build #2012 succeeded 2320663
• 💚 Build #1992 succeeded a74366a

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: d9807ae

History

• 💚 Build #5274 succeeded 2320663
• 💚 Build #5258 succeeded a74366a

cc @mgadewoll