elastic/eui

DataGrid width is more than a container with customBodyRender

logeekal opened this issue · 4 comments

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.

custom_body_render_width_issue.mp4

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

@logeekal We're trying to determine priority on this - is this something you could see fixing as part of your draft PR? Or is this blocking your current work? If not I'm not sure when our team will have time to work on this, as we have several other datagrid efforts we're currently prioritizing instead.

Thanks @cee-chen for pointing it out. It makes sense and I will try to get it with my currently open PR.

Hey @logeekal, just curious, when are your changes targeted for in Kibana?

Hey @JasonStoltz , apologies for late revert. I am planning mainly changes required for #8002 for 8.16. I am trying to see what is important to improve experience on that front and fix that first and if I see that this can be included. I will do that.