フィルハンドル

fillHandle prop を渡すと、選択範囲(無ければアクティブセル)の右下に小さな四角(フィルハンドル)が出ます。引くと Excel のオートフィルと同じく、元の値の続き(連続データ)か元の値の繰り返し(セルのコピー)で埋めます。既定では無効の opt-in 機能です。

デモ(生産計画 > ロット・日付・曜日を引いて埋める)

• 「ロット」の 2 行を選んで四角を下へ引くと LOT-003, LOT-004 … と続きます。「日付」「曜日」は 1 つからでも 1 日ずつ進みます。
• 「工程」の 3 行を引くと 切削 → 研磨 → 検査 の繰り返し(コピー)になります。
• 「数量」の 2 行(50, 100)を引くと 150, 200 … と等差で続きます。1000 を超える値は validate(reject)で書かれません。
• 「担当」列は編集不可のため、範囲に入っていても書き換わりません。
• 引いている間は埋める範囲が点線で、いちばん遠いセルへ入る値がポインタの近くに出ます。Ctrl(Mac は ⌘)を押すと連続データとコピーが入れ替わり、Escape でやめます。
• 離すと右下にボタンが出ます。押して「連続データ / セルのコピー」を選び直せます。元に戻すは 1 回で埋める前へ戻ります。
• 四角をダブルクリックすると、左隣の列に値が続くところまで下へ埋めます。

使い方

<SpreadsheetGrid rows={rows} onRowsChange={setRows} columns={columns} fillHandle />

書き込み先が要ります。clientSide は onRowsChange、serverSide は dataSource.updateRows が無いとハンドルは出ません。readOnly のときも出ません。選択範囲が合成列だけ、またはラベル行 / グループ行だけのとき(埋める元の値が無いとき)も出ません。

埋める値を差し替える

fillHandle にオブジェクトを渡すと、getFillValue で埋めるセルごとに書く値を決められます。既定のままにするセルは defaultValue を返してください。

fillHandle={{
  getFillValue: ({ column, defaultValue, sourceValues, index, direction, kind }) => {
    // 数量列は 10 の倍数に丸める
    if (column.key === 'qty' && typeof defaultValue === 'number') {
      return Math.round(defaultValue / 10) * 10;
    }
    return defaultValue;
  },
}}

getFillValue は編集できないセルでは呼ばれません。ドラッグ中のツールチップ(いちばん遠いセルの値)を出すときにも呼ぶため、副作用の無い関数にしてください。返した値も validate を通り、validationMode: 'reject' で不正なら書きません。

埋め方の決まり方

列ごと(上下へ引いたとき)/ 行ごと(左右へ引いたとき)に決めます。続き方の分かる値は連続データ、数値 1 つ・数字だけの文字列 1 つ・続き方の無い値はコピーです。Ctrl / ⌘ を押しながら引くとこれが入れ替わります(数値 1 つなら 1 ずつ増える)。

上 / 左へ引いたときは逆向きに続きます(1, 2, 3 を上へ引くと 0, -1 …。元の値が 1 つなら 1 ずつ戻り、2026-11-02 の上は 2026-11-01)。

細かな動き

• 飛ばすもの: ラベル行 / グループ行(位置にも数えない)、行ドラッグ / 展開トグル / 自動グループ列の合成列、合計行。フィルター / ソート中は表示されている順に埋め、隠れた行には書きません。表の末尾より先へ行は増やしません。
• 書き込み: 貼り付けと同じく、編集できないセル(readOnly / editable: false / canEditCell)は飛ばします。clientSide は onRowsChange に 1 回で渡し、undo / redo の対象です。値は型を保って書きます。
• 埋めたあとのボタン: 選択を変える・セルの値が外から変わる・列が変わる・ソート / フィルター / グループの開閉が変わる・編集を始めると消えます。列ごとに埋め方が混ざるときに「連続データ」を選ぶと、すべての列を連続データにします(続き方の無い値はコピーのまま)。連続データにできる値が無いときは「連続データ」を選べません。右下に余地が無い(表の下端・合計行・見えている範囲の下端にかかる)ときは角の上に出します。
• ダブルクリック: ハンドルの見えている四角をダブルクリックします。埋める列にすでに値があるセル、ラベル行 / グループ行、未読み込みの行の手前で止まり、既存の値は上書きしません。
• serverSide: dataSource.updateRows で書き戻します(楽観更新・失敗時のロールバックは編集と同じ)。読み込まれていない行には書かず、元の範囲に読み込まれていない行がある列 / 行は埋めません。undo / redo はありません。ボタンでの選び直しはそのときの行の上に書くため、validate の reject で選び直しでは書かないセルには最初に埋めた値が残ります。
• キーボード: ハンドルはポインタ操作の部品です(支援技術からは隠しています)。キーボードではコピー / 貼り付けで同じことができます。ボタンのメニューは ↑ / ↓ で移動、Escape / Tab で閉じます。

見た目を変える

詳しい仕様は API リファレンスの「フィルハンドル」節を参照してください。