Web SDK

アウトライン

アウトライン機能（グループ化またはディメンションアウトラインとも呼ばれます）を使用すると、ワークシート内の行または列をグループ化できます。これは、折りたたみ可能なセクションを作成することで、大量のデータを整理および要約するのに役立ちます。

はじめに

Univer Sheets では、アウトライン機能を使用すると以下が可能です：

  • 行または列のグループ化：行または列の階層グループを作成してデータを整理します。
  • グループの折りたたみと展開：クリック一つでグループ化された行または列を表示または非表示にします。
  • ネストされたグループ：複雑なデータ階層に対して複数レベルのグループを作成します。

アウトライン機能は、通常以下のシナリオで使用されます：

  • 詳細データの要約：詳細な行を集計行の下にグループ化して、よりクリーンなビューを作成します。
  • 大規模データセットの整理：関連する列や行をまとめて、ナビゲーションを容易にします。
  • 折りたたみ可能なレポートの作成：ユーザーが必要に応じてレポートのセクションを展開または折りたためるようにします。

プラグインモード

インストール

Shell
pnpm add @univerjs-pro/sheets-outline @univerjs-pro/sheets-outline-ui

使用方法

TypeScript
import { UniverSheetsOutlinePlugin } from '@univerjs-pro/sheets-outline'import { UniverSheetsOutlineUIPlugin } from '@univerjs-pro/sheets-outline-ui'import SheetsOutlineUIJaJP from '@univerjs-pro/sheets-outline-ui/locale/ja-JP'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/sheets-outline/facade'import '@univerjs-pro/sheets-outline-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      SheetsOutlineUIJaJP,     ),  },})univer.registerPlugin(UniverSheetsOutlinePlugin)univer.registerPlugin(UniverSheetsOutlineUIPlugin)

Univer の商用ライセンスをお持ちの場合は、クライアントでのライセンス使用を参照して設定してください。

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs-pro/sheets-outline-uiUniverSheetsOutlineUIPluginUniverSheetsOutlineMobileUIPlugin

プリセットモード

アウトライン機能は @univerjs/preset-sheets-advanced プリセットに含まれています。

インストール

Shell
pnpm add @univerjs/preset-sheets-advanced

使用方法

TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedJaJP from '@univerjs/preset-sheets-advanced/locales/ja-JP'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsAdvancedJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsAdvancedPreset(),   ],})

Univer の商用ライセンスをお持ちの場合は、クライアントでのライセンス使用を参照して設定してください。

Facade API

完全な Facade API の型定義は FacadeAPI を参照してください。

インポート

プラグインモード注意

Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

TypeScript
import '@univerjs-pro/sheets-outline/facade'

行アウトラインの作成

Facade API を使用して行アウトライングループを作成できます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 2〜6行目をグループ化（0ベースのインデックス：startRow=1, numRows=5）fWorksheet.addRowOutline(1, 5)

列アウトラインの作成

同様に、列アウトライングループを作成できます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B〜E列をグループ化（0ベースのインデックス：startColumn=1, numColumns=4）fWorksheet.addColumnOutline(1, 4)

アウトラインの折りたたみと展開

プログラムでアウトライングループを折りたたんだり展開したりできます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rowOutlines = fWorksheet.getDimensionOutlines(univerAPI.Enum.DimensionOutlineAxis.ROW)if (rowOutlines.length > 0) {  // 最初の行アウトライングループを折りたたむ  fWorksheet.setDimensionOutlineCollapsed(rowOutlines[0].id, true)  // 後で展開する  fWorksheet.setDimensionOutlineCollapsed(rowOutlines[0].id, false)}

アウトラインの削除

ID を指定して特定のアウトライングループを削除できます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rowOutlines = fWorksheet.getDimensionOutlines(univerAPI.Enum.DimensionOutlineAxis.ROW)if (rowOutlines.length > 0) {  fWorksheet.removeDimensionOutline(rowOutlines[0].id)}

範囲内のアウトラインをクリア

特定の範囲内のすべてのアウトライングループをクリアできます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 2〜10行目の範囲内に完全に含まれるすべての行アウトラインを削除fWorksheet.clearDimensionOutlines(univerAPI.Enum.DimensionOutlineAxis.ROW, 1, 9)

アウトラインのクエリ

ワークシート上のすべてのアウトライングループを取得できます：

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// すべての行アウトラインを取得const rowOutlines = fWorksheet.getDimensionOutlines(univerAPI.Enum.DimensionOutlineAxis.ROW)rowOutlines.forEach((outline) => {  console.log(outline.id, outline.start, outline.end, outline.collapsed)})// すべてのアウトライン（行と列の両方）を取得const allOutlines = fWorksheet.getDimensionOutlines()

アウトラインデータ構造

各アウトライングループには以下のプロパティがあります：

プロパティ型説明
idstringアウトライングループの一意の識別子
unitIdstringワークブックのユニットID
subUnitIdstringワークシートのシートID
axisDimensionOutlineAxisアウトラインの軸（row または column）
startnumber0ベースの包含開始インデックス
endnumber0ベースの包含終了インデックス
collapsedbooleanグループが現在折りたたまれているかどうか

検証とエラー

アウトライングループの作成時には、以下の検証が実行されます：

  • 無効な範囲：範囲は有効である必要があります（負でない、ゼロでないカウント）。
  • 境界外：範囲はワークシートの境界内である必要があります。
  • 交差グループ：新しいグループは既存のグループと交差できません。
  • 最大深度：アウトライングループには最大ネスト深度があります。

グループ解除の範囲は、グループ化された範囲を完全に含んでいる必要があります。そうでない場合、検証に失敗します。

検証に失敗した場合、コマンドは実行されず、エラーは SheetsOutlineErrorService を通じて発行されます。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.