行と列

行と列のサイズ変更、挿入・削除、表示・非表示、自動フィットの方法を説明します。

Live Demo

サイズ変更

ColumnHandle / RowHandle

const ws = grid.worksheet

// 列幅 — プロパティ代入またはチェーン可能な setter
ws.column(0).width = 200
ws.column('A').setWidth(200)          // A1 形式のラベルも使えます
const w = ws.column(0).width          // 200

// 行高
ws.row(0).height = 40
ws.row(0).setHeight(40)
const h = ws.row(0).height            // 40

低レベル getter

// 現在の幅・高さを取得
const width = ws.getColumnWidth(0)
const height = ws.getRowHeight(0)

一括設定

// 複数列の幅を一度に設定
ws.applyColumnWidths(new Map([
  [0, 150],  // A列
  [1, 100],  // B列
  [2, 200],  // C列
]))

// 複数行の高さを一度に設定
ws.applyRowHeights(new Map([
  [0, 40],   // 1行目
  [5, 30],   // 6行目
]))

自動フィット

セルの内容に合わせて列幅・行高を自動調整します。

// 全列を自動フィット
ws.autoFitColumns()

// 特定の列のみ
ws.autoFitColumns({ columns: [0, 1, 2] })

// 手動設定済みの幅を尊重
ws.autoFitColumns({ respectCustomWidth: true })

// 行の自動フィット
ws.autoFitRows()
ws.autoFitRows({ rows: [0, 1, 2] })

挿入・削除

構造変更は worksheet.rows / worksheet.columns コレクション経由で行います：

// 3行目の位置から2行挿入（既存行は下にシフト）
ws.rows.insertAt(2, 2)

// 5行目から3行削除
ws.rows.deleteAt(4, 3)

// B列の前に1列挿入
ws.columns.insertAt(1, 1)

// D列から2列削除
ws.columns.deleteAt(3, 2)

特定の行・列を基準にした挿入・削除には RowHandle / ColumnHandle も使えます：

ws.row(2).insertAbove(2)       // 3行目の上に2行追加
ws.row(10).insertBelow()       // 11行目の下に1行追加
ws.row(4).delete()             // 5行目を削除

ws.column('B').insertBefore()    // B列の前に1列追加
ws.column(3).insertAfter(2)      // D列の後に2列追加
ws.column(3).delete()            // D列を削除

挿入・削除は数式のセル参照を自動的に更新します。

表示・非表示

// ハンドル経由で個別操作
ws.row(2).hide()
ws.row(2).show()
ws.column('B').hide()
ws.column('B').show()

// プロパティ形式
ws.row(2).hidden = true
const hidden = ws.row(2).hidden     // boolean

// コレクション経由で一括操作
ws.rows.hide(2, 3)                  // 2,3,4 行目を非表示
ws.rows.show(2, 3)
ws.columns.hide(1, 2)               // B,C 列を非表示
ws.columns.setHidden([1, 5, 7], true)  // 任意のインデックスを非表示

// 読み取り専用チェック（worksheet 上に残っています）
const rowHidden = ws.isRowHidden(2)
const colHidden = ws.isColumnHidden(1)

グリッドサイズの変更

行数・列数を変更します。

ws.setGridSize(200, 30) // 200行 × 30列

// 現在のサイズ
console.log(ws.rowCount)    // 200
console.log(ws.columnCount) // 30

// コレクション経由でも取得可能
console.log(ws.rows.count)    // 200
console.log(ws.columns.count) // 30

行数・列数を個別に変更することもできます（コレクション経由）：

// 行数のみ変更（列数は変わらない）
ws.rows.setCount(500)

// 列数のみ変更（行数は変わらない）
ws.columns.setCount(50)

両軸を同時に変更したい場合は ws.setGridSize(rows, cols) を使ってください — 構造変更イベントを2回ではなく1回で発火できます。

可視範囲の取得

スクロール位置に基づいた現在の表示範囲を取得できます。

// 表示中の行範囲
const rowRange = ws.getVisibleRowRange()
console.log(rowRange.start, rowRange.end)

// 表示中の列範囲
const colRange = ws.getVisibleColumnRange()
console.log(colRange.start, colRange.end)

// 非表示行を除いた実際の表示行インデックス
const visibleRows = ws.getVisibleRowIndices()

プロパティ参照

// 全列幅の配列（読み取り専用）
const widths: readonly number[] = ws.columnWidths

// 全行高の配列（読み取り専用）
const heights: readonly number[] = ws.rowHeights

// ヘッダーサイズ
const headerWidth = ws.headerColumnWidth   // 左ヘッダーの幅
const headerHeight = ws.headerRowHeight    // 上ヘッダーの高さ

使用例：請求書レイアウト

const ws = grid.worksheet

ws.suspendRender()

// 列幅の設定
ws.column(0).width = 40   // No.
ws.column(1).width = 200  // 品名
ws.column(2).width = 80   // 数量
ws.column(3).width = 100  // 単価
ws.column(4).width = 120  // 金額

// ヘッダー行の高さ
ws.row(0).height = 50

// データ行の高さ
for (let r = 1; r <= 10; r++) {
  ws.row(r).height = 28
}

ws.resumeRender()

行と列