elastic / elastic/eui

[EuiDataGrid] Cell actions toolbar is clipped on the first row when header is hidden

Open
#9,564 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Reported by**

@tfcmarques

**Describe the bug**

When using `EuiDataGrid` with `headerVisibility` set to hide the column header row, the cell actions popover toolbar is clipped/cut off on the first row of cells. The toolbar appears behind or outside the grid's overflow boundary because the header is no longer present to provide the necessary spacing/offset.

**Impact and severity**

🟠 Cell actions are partially or fully invisible on the first row when the grid header is hidden, making those actions **inaccessible without a workaround**.

A workaround exists using custom CSS, so **it is not a blocker** but it is expected to be fixed in EUI.

**Environment and versions**

- EUI version: latest
- React version: -
- Kibana version (if applicable): -
- Browser: -
- Operating System: -

**Minimum reproducible sandbox**

[Codesandbox](https://codesandbox.io/p/sandbox/euidatagrid-toolbar-is-cut-off-when-no-header-kcw7t8)

**To Reproduce**

1. Render an `EuiDataGrid` with the column header hidden via the `headerVisibility` prop.
2. Hover over a cell in the **first row**.
3. Observe the cell actions popover toolbar. **It is cut off/clipped at the top of the grid**.

**Expected behavior**

The cell actions popover toolbar should be fully visible on the first row, no matter if the column header is shown or hidden.

**Screenshots (Optional)**

https://github.com/user-attachments/assets/535cfc5d-804e-4a67-a3c3-faf2cc4ad5dc

**Additional context (Optional)**

- Kibana issue: https://github.com/elastic/kibana/issues/248314
- Kibana workaround PR: https://github.com/elastic/kibana/pull/260692 - the workaround works but the fix should be made in EUI so that consumers don't have to patch it themselves.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.