[EuiDataGrid] Cell actions toolbar is clipped on the first row when header is hidden
- 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
Assessment
This issue has not been assessed yet.