インストール

パッケージのインストール

npm install @ishibashi0112/spreadsheet-grid

react と react-dom の >= 19 が peer dependencies です(アプリ側にインストールされている必要があります)。ランタイム依存の @tanstack/virtual-core(TanStack Virtual のフレームワーク非依存コア)と、グリッド本体のフレームワーク非依存コア @ishibashi0112/spreadsheet-grid-core(v0.39.0 から分離)は自動で入ります。アプリ側で直接 import する必要はありません。

スタイルの読み込み

グリッドの CSS は別ファイルとして同梱されています。アプリのエントリなどで一度だけ import してください。

import '@ishibashi0112/spreadsheet-grid/style.css'

ベーススタイルは .ssg-* クラスにスコープされた通常(未レイヤー)の CSS で、デザイントークンは特異度ゼロ(:where(.ssg-root))で定義されています。そのため import 順序に関係なく、利用側の上書きが常に勝ちます。

Tailwind CSS / HeroUI / Mantine / StyleX との共存

• Tailwind CSS v3(+ HeroUI) — そのまま動きます。Preflight のリセットはクラスセレクタに特異度で負けるため、グリッドを壊せません。

• Tailwind CSS v4(+ HeroUI) — そのまま動きます。! 修飾子なしで Tailwind ユーティリティにグリッドの既定値を上書きさせたい場合は、グリッド CSS を utilities より下のレイヤーに入れます:

  @import 'tailwindcss';
  @import '@ishibashi0112/spreadsheet-grid/style.css' layer(components);

  あるいはレイヤー済みバリアント style.layer.css(全体が @layer ssg-base)を使い、レイヤー順を自分で宣言する方法もあります:

  @layer theme, base, ssg-base, components, utilities;
  @import 'tailwindcss';
  @import '@ishibashi0112/spreadsheet-grid/style.layer.css';

• Mantine — そのまま動きます(クラス名・リセットの衝突なし。グリッドのポップオーバーは z-index: 1000 で Mantine の既定モーダルより上)。

• StyleX — そのまま動きます(reset を持たず、生成クラスは接頭辞 x で衝突しません)。classNames / cellClassName / getRowClassName などのスロットへ stylex.props(...) の戻り値({ className, style })をそのまま渡せます。StyleX の atomic クラスとグリッドの基底クラスは同特異度のため、グリッド CSS を先に・StyleX の出力を後に読み込むか、style.layer.css を使ってください(StyleX 側で useLayers を使う場合は style.layer.css が必須)。詳細はテーマとスタイリング。

プレーン CSS でグリッドの既定値を確実に上書きしたい場合は、グリッドのベースクラスに自分のクラスをチェーンして特異度で勝たせます:

.ssg-body-cell.my-warn-cell {
  background-color: #fff7ed;
}