行と列

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

サイズ変更

ColumnHandle / RowHandle

const ws = grid.worksheet

// 列幅
ws.column(0).width = 200
const w = ws.column(0).width // 200

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

低レベル API

// 個別設定
ws.setColumnWidth(0, 200)
ws.setRowHeight(0, 40)

// 取得
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] })

挿入・削除

// 行の挿入（3行目の前に2行挿入）
ws.insertRows(2, 2)

// 行の削除（5行目から3行削除）
ws.deleteRows(4, 3)

// 列の挿入（B列の前に1列挿入）
ws.insertColumns(1, 1)

// 列の削除（D列から2列削除）
ws.deleteColumns(3, 2)

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

表示・非表示

// 行の非表示
ws.setRowHidden(2, true)

// 複数行を一括非表示
ws.setRowsHidden([2, 3, 4], true)

// 行の再表示
ws.setRowHidden(2, false)

// 非表示状態の確認
const hidden = ws.isRowHidden(2) // boolean

// 列の非表示・再表示
ws.setColumnHidden(1, true)
ws.setColumnsHidden([1, 2], true)
ws.setColumnHidden(1, false)
const colHidden = ws.isColumnHidden(1)

グリッドサイズの変更

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

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

// 現在のサイズ
console.log(ws.rows)    // 200
console.log(ws.columns) // 30

可視範囲の取得

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

// 表示中の行範囲
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()