サイズ(高さ)

height / maxHeight でグリッドの高さを決める。'100%' で親要素に収める

グリッドの高さは height と maxHeight の 2 つの prop で決めます。どちらも指定しないと、スクロール領域は内容の高さになり、480px を超えるとスクロールします。

`height` の値と意味

height が何の高さを決めるかは、値の種類で変わります。

`height` の値	何の高さか	結果
`%` を含む文字列(`'100%'` / `'50%'` / `'calc(100% - 40px)'`)	トップバー・フィルターチップバー・スクロール領域・ボトムバーを含むグリッド全体	グリッドが親に収まる。バーは自身の高さを保ち、残りがスクロール領域になる
`number`(px)、`%` を含まない文字列(`'400px'` / `'50vh'` / `'calc(100vh - 120px)'`)	スクロール領域だけ	グリッド全体はバーの分だけ高くなる(`height={400}` → 既定のバーで約 473px)
未指定	—	スクロール領域は内容の高さで、上限 `maxHeight`(既定 `480px`)でクリップ

デモ(`height="100%"`)

親の高さ360pxトップバー / ボトムバー1,000 行 — 点線枠が親要素です

ToolbarRows: 1000 / 1000Columns: 3 / 3Sort: なし

Rows: 1000 / 1000Columns: 3 / 3

Active: なしSelection: なしCells: 0 / Rows: 0Cols: 0

親の高さを変えても、グリッド全体(バー込み)が点線枠に収まります。
バーを消すと、その分だけスクロール領域が広がります。
1,000 行ありますが、描画されるのは見えている行だけです(仮想化)。

よく使うパターン

高さの決まった親いっぱいに収める

<div style={{ height: 600 }}>
  <SpreadsheetGrid rows={rows} columns={columns} height="100%" />
</div>

flex column の残りを埋める(ページヘッダーの下など)

<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
  <header>…</header>
  <div style={{ flex: 1, minHeight: 0 }}>
    <SpreadsheetGrid rows={rows} columns={columns} height="100%" />
  </div>
</div>

flex: 1 の子には minHeight: 0 を付けます。付けないと、子が内容(全行)の高さまで伸びます。

スクロール領域を固定の高さにする

<SpreadsheetGrid rows={rows} columns={columns} height={400} />

数値はスクロール領域の高さです。グリッド全体はバーの分だけ高くなります。

`maxHeight`(スクロール領域の上限)

maxHeight は height の種類に関わらず、常にスクロール領域の上限です(バーは含みません)。

組み合わせ	スクロール領域の高さ
`maxHeight` のみ	内容の高さ。ただし `maxHeight` が上限
`height={400} maxHeight={300}`	`min(400, 300)` = 300px
`height="100%" maxHeight={300}`	`min(300, 親の高さ − バー)`。親が大きいとグリッド全体はバー + 300px に縮む

`%` 指定のルールとよくある誤り

親要素は高さが確定している必要があります(固定の height、100vh、minHeight: 0 付きで大きさの決まった flex 子など)。親の高さが auto だと % は auto に解決されます。するとグリッドは全行分の高さまで伸び、行の仮想化が効かなくなります(全行が描画される)。これは CSS の一般則のため、ライブラリ側では解決できません。
高さは height prop で指定してください。 ルートへの style={{ height }} や className だけでは、スクロール領域の高さは決まりません(既定の 480px 上限が残り、バーが切れることがあります)。
'50vh' / 'calc(100vh - 120px)' のように % を含まない文字列は、親ではなくビューポートなどを基準にしたスクロール領域の高さです。グリッド全体をビューポートに収めたいときは、高さ 100vh のラッパーを置き、その中で height="100%" を使います。

動作確認(DOM での検証)

テストや自動検証では、次の点を確かめると設定の誤りを検出できます。

% 指定のとき、ルート要素(.ssg-root)に ssg-root--fill-height クラスが付いている。
表示しきれない行数があるとき、.ssg-scroll-container の scrollHeight > clientHeight になっている(スクロールできる)。
描画された行(.ssg-body-row)の数が、全行数ではなく見えている行数程度になっている。全行が描画されていたら、親の高さが確定していません。
.ssg-root の高さが親の高さを超えていない。

jsdom はレイアウトを計算しないため、実寸の確認は実ブラウザ(Playwright など)で行ってください。

サイズ(高さ)

On this page