Examples
Case 12: Filling the Parent Element (Responsive Sizing)

Filling the Parent Element (Responsive Sizing)

By default GridSheet sizes itself to its content (capped at sensible defaults). To make it fill its parent element instead, pass a CSS string — most commonly '100%' — to sheetWidth / sheetHeight. The sheet then stretches to the parent and re-measures its pixel size automatically via a ResizeObserver, so it stays responsive when the parent changes size.

Drag the bottom-right corner of the box below to resize it. The sheet fills the parent and re-measures itself on every resize.

Implementation Guide

📄 View Source Code

sheetWidth / sheetHeight accept numbers or CSS strings

Value typeBehavior
numberFixed pixel size (e.g. sheetHeight: 350).
stringPassed through as a CSS dimension and the sheet fills its parent (e.g. '100%', '80vh', 'calc(100% - 40px)'). The rendered pixel size is measured automatically.
<GridSheet
  initialCells={initialCells}
  options={{
    sheetWidth: '100%',
    sheetHeight: '100%',
  }}
/>

Give the parent a height

Width usually resolves on its own, but a percentage height only works when the parent has a resolved height. Wrap the sheet in a container with an explicit (or flex/grid-derived) height:

<div style={{ width: '100%', height: 320 }}>
  <GridSheet
    initialCells={initialCells}
    options={{ sheetWidth: '100%', sheetHeight: '100%' }}
  />
</div>

Use 100vh (or calc(100vh - <header>)) for a full-viewport layout, or place the sheet inside a flex/grid cell that already has a height.

How it works

In string (fill) mode the root container becomes a flex column, the inner sheet area takes the remaining space below the formula bar, and a ResizeObserver feeds the measured pixel size back to the table. No CSS overrides or !important rules are required — when the parent in the demo above is resized, the sheet recomputes its visible rows and columns on the fly.

When a numeric size is provided instead, the sheet keeps that fixed pixel size as before.

Case 11: GitHub Repo Comparison (Async)GridSheet Props