elastic / elastic/eui

[EuiDataGrid] width is more than a container with customBodyRender

Open
#8,038 8 comments 0 reactions 0 assignees View on GitHub
data grid stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Describe the bug**
When grid has a static height and `customBodyRender` , the table width is more than the container which results in a horizontal scrollbar. This phenomenon is also visible in the docs page. Below i have attached a codesandbox link also.

https://github.com/user-attachments/assets/f72b2e20-fe8e-4b07-aeef-357b1b805ad5

**Impact and severity**

This results in degraded user experience because security solution needs to have both static height and custom body render.

One related issue is : #8002

**Environment and versions**
- EUI version: 95.10.1 and older
- React version: 17
- Kibana version (if applicable):
- Browser: Firefox, chrome

**To Reproduce**
Steps to reproduce the behavior:
1. Go to codesandbox : https://codesandbox.io/p/sandbox/custom-body-render-width-issue-svtl3t?file=%2Fdemo.tsx
2. Switch Static height On and off and see the scrollbar appearing.
3. See the bottom of the table and note the horizontal scrollbar.

**Expected behavior**
When columns have auto width, table should be contained in the scrollbar.

**Minimum reproducible sandbox**
https://codesandbox.io/p/sandbox/custom-body-render-width-issue-svtl3t?file=%2Fdemo.tsx

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.