DataTable pin/sticky header behavior confined parent container when overflow is used #7175
Labels
enhancement
A suggestion to add to or change behavior
needs attention
To alert grommet team that a PR has been waiting for the author for a while
It is a common use case to wrap datatables in a box with overflow=auto for the scenario where the browser is narrow, and collisions with other elements need to be avoided in favor of a horizontal scroll bar for the table. When overflow is used on a parent container of the datatable, it disables the pin behavior of having the header scroll down the page's outer scrollable area, instead the header is only "sticky" inside the container with the overflow prop.
Expected Behavior
When using pin on a datatable that is wrapped in a box with the overflow prop, the header should remain "sticky" as the user scrolls down the page.
Actual Behavior
The header is only sticky if the box's height with the overflow prop is limited to the point where you get a double scroll bar. The header is sticky only when scrolling the box's scrollable region. Having a vertical scroll bar for the datatable is not desirable, and we would prefer to instead have only the single vertical scroll bar for the page.
URL, screen shot, or Codepen exhibiting the issue
The issue can be seen in the datatable storybook
The desired behavior that is seen when not using a box with overflow was recorded from this code sandbox. The sandbox and recording was created by @taysea and shared in the design system slack workspace.
Steps to Reproduce
Your Environment
The text was updated successfully, but these errors were encountered: