About ReactGrig embedding, virtual scrolling and sticky panes pinning

ReactGrid component isn't limited by height and width so its behaviour can change a little bit depending on its scrollable parent element.

ReactGrid appends scroll event to its immediate scrollable parent and lets itself expand to full height/width with the option of constant observation of available viewport size.

Limiting the size of ReactGrid can be achieved by adding CSS class listed below (bear in mind that the total rows height must be bigger than scrollable element height)

.reactgrid-wrapper {
    height: 100px;
    overflow: scroll;
}

Multiple nested scrollable elements can cause unexpected experience like incorrect cell editor position, wrong focus location etc.

Example: ReactGrid component limited by the height of its parent

Code

const App = () => <LimitedHeightByParentSample/>
render(<App/>)

Preview

In this case, not all the passed rows can be rendered, so scrollbar appears and sticky pane is pinned directly to the top of the parent element.

Example: ReactGrid component NOT limited by the height of its parent

Code

const App = () => <NotLimitedHeightByParentSample/>
render(<App/>)

Preview

ReactGrid renders all the passed rows and columns if sticky panes are passed - they are pinned directly to the edge of body element.