DataTable pin/sticky header behavior confined parent container when overflow is used

[danielm-hpe]

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

1. create a box with overflow=auto prop and place the datatable in it with pin=header
2. constrain the vertical height of the browser window to the point where there's a page level vertical scroll bar, but not a scroll bar for the box containing the datatable
3. vertically scroll the page. Observe that the header does not remain "sticky" as the page is scrolled.

Your Environment

• Grommet version: present as of grommet 2.36.1. Currently using grommet 2.33.1.
• Browser Name and version: chrome
• Operating System and version (desktop or mobile): windows 10