Skip to content

[EuiDataGrid][EuiTable] Add "marked" token for row highlight #8825

@mgadewoll

Description

@mgadewoll

Description

To support additional highlighting in EUI table and datagrid components, we want to add an additional component level background token that should be called "marked", e.g. dataGridBackgroundMarked.

Currently neither EuiTable nor EuiDataGrid handle row highlighting internally which means that the new token would not internally be used but would be only available for consumers to use. To make usage a bit more stream lined, we can provide the required styles already as class, similar to what was done for EuiDataGrid's selected state (code, docs)

Screen.Recording.2025-06-27.at.13.16.46.mov

Use Case

Example use case on Kibana side:

the color isn’t meant to indicate a “selected” state—it’s there to highlight the alerts that only appear when the “Include building block alerts” filter is applied to the table

Value / Impact

It's a small update that makes it easier to unify usages and ensure more consistency as we can reduce the custom styles consumers need to apply.

Urgency

It's not urgent but would be good to tackle soon anyway. There are workarounds but it would be nicer if we provide a centralized solution to applying this style.

Do alternatives or workarounds exist?

Consumers can apply styles manually by adding additional classes to the rows.

Designs or Specs (Optional)

Image

🎨 Figma

Metadata

Metadata

Assignees

No fields configured for Enhancement.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions