ソートとフィルター

列のソートとオートフィルターによるドロップダウン制御でデータを絞り込む方法を説明します。

ソートとフィルターはPro版で利用可能です。

列ソート

const ws = grid.worksheet

// 昇順ソート
ws.sortColumn(0, 'asc')

// 降順ソート
ws.sortColumn(0, 'desc')

// ソート状態の取得
const state = ws.getSortState()
// { column: 0, order: 'asc' } or null

ソートはオートフィルターの範囲内で動作します。フィルターが設定されていない場合はシート全体がソートされます。

オートフィルター

ヘッダー行にドロップダウンを表示し、データを絞り込みます。

フィルターの作成

const filter = ws.createAutoFilter({
  headerRow: 0,
  startColumn: 0,
  endColumn: 4,
})

フィルターの操作

// 列のユニーク値を取得
const values = filter.getColumnValues(1)
// ['Tokyo', 'Osaka', 'Nagoya', ...]

// フィルター条件を設定（選択した値のみ表示）
filter.setColumnFilter(1, new Set(['Tokyo', 'Osaka']))

// フィルターを適用
filter.apply()

// 特定の列のフィルター状態を取得
const colFilter = filter.getColumnFilter(1)
// { selectedValues: Set, ... } or null

// アクティブなフィルターがあるか
const hasFilters = filter.hasActiveFilters()

// すべてのフィルターをクリア
filter.clearAll()

フィルター内でのソート

filter.sortColumn(0, 'asc')
const sortState = filter.getSortState()

イベント

フィルター変更の購読

filter.onFilterChange((event) => {
  console.log('Hidden rows:', event.hiddenRowCount)
})

フィルタードロップダウンのクリック

ws.onFilterDropdownClick((column) => {
  console.log('Filter dropdown clicked for column:', column)
  // カスタムフィルター UI を表示するなど
})

フィルターの削除

ws.removeAutoFilter()

// フィルターの取得
const currentFilter = ws.getAutoFilter() // AutoColumnFilter | null

使用例：データテーブル

const ws = grid.worksheet

ws.suspendRender()

// ヘッダー
const headers = ['ID', '名前', '部署', '入社年', '売上']
headers.forEach((h, i) => {
  ws.cell(0, i).setValue(h).setStyle({ bold: true })
})

// データ
const data = [
  [1, '田中', '営業', 2020, 1200000],
  [2, '鈴木', '開発', 2019, 980000],
  [3, '佐藤', '営業', 2021, 1500000],
  // ...
]
data.forEach((row, r) => {
  row.forEach((val, c) => {
    ws.setCellInput(r + 1, c, String(val))
  })
})

// ヘッダー行を固定
ws.setFrozenRows(1)

// 交互行カラー
ws.setAlternateRowColors({ evenColor: '#ffffff', oddColor: '#f8fafc' })

// オートフィルター設定
const filter = ws.createAutoFilter({
  headerRow: 0,
  startColumn: 0,
  endColumn: 4,
})

ws.resumeRender()

// フィルター操作の例 — 営業部のみ表示
filter.setColumnFilter(2, new Set(['営業']))
filter.apply()

注意事項

• ソートはオートフィルターの範囲内で動作します。フィルターが設定されていない場合はシート全体がソートされます。
• フィルターは行の表示・非表示を切り替えることで実現されます。非表示行のデータは保持されます。