スライサーとタイムライン

Headless 対応

スライサーはソースのメンバーでテーブル、ピボットテーブル、ピボットグラフを絞り込みます。タイムラインは対応するピボットの元の日付フィールドを絞り込みます。テーブル列、テキスト、計算フィールド、派生グループフィールドはタイムラインのソースにできません。

プラグインモード

インストール

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

使い方

既存の Sheets 設定に以下を追加し、描画機能と、ソースとなるテーブルまたはピボットテーブルを設定します。ワークブックを作成する前に言語パックを読み込み、プラグインを登録してください。

TypeScript
import { UniverSheetsSlicerPlugin } from '@univerjs-pro/sheets-slicer'import { UniverSheetsSlicerUIPlugin } from '@univerjs-pro/sheets-slicer-ui'import SheetsSlicerUILocale from '@univerjs-pro/sheets-slicer-ui/locale/ja-JP'import { LocaleType } from '@univerjs/core'import '@univerjs-pro/sheets-slicer/facade'import '@univerjs-pro/sheets-slicer-ui/lib/index.css'univerAPI.loadLocales(LocaleType.JA_JP, SheetsSlicerUILocale)univer.registerPlugin(UniverSheetsSlicerPlugin)univer.registerPlugin(UniverSheetsSlicerUIPlugin)

プリセットモード

インストール

Shell
pnpm add @univerjs/presets @univerjs/preset-sheets-core @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

使い方

Advanced プリセットにはスライサーとタイムラインのモデル、UI、Facade API が含まれます。Core と Drawing プリセットを組み合わせ、ロケールも統合してください。既に Advanced を使用している場合は再登録せず、既存設定に slicer を追加します。ライセンスはライセンス設定を参照してください。

TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import AdvancedLocale from '@univerjs/preset-sheets-advanced/locales/ja-JP'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import CoreLocale from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import DrawingLocale from '@univerjs/preset-sheets-drawing/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(CoreLocale, DrawingLocale, AdvancedLocale),  },  presets: [    UniverSheetsCorePreset({ container: 'app' }),    UniverSheetsDrawingPreset(),    UniverSheetsAdvancedPreset({ slicer: { maxMemberWindowSize: 200 } }),  ],})

Worker 使用時は Advanced に useWorker: true を設定し、Worker 内で UniverSheetsAdvancedWorkerPreset() を登録します。スライサーの計算プラグインも含まれます。

スライサーを作成する

以下の例では、アクティブなシートの I1 にあるピボットテーブルと、Region というソースフィールドを使用します。getSourceFieldsInfo() で元のフィールドの安定した ID を取得してください。表示名やレポートのフィールド ID は newSlicer() に渡せません。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook?.getActiveSheet()if (!fWorkbook || !fWorksheet) throw new Error('No active worksheet')const pivotTable = fWorkbook.getPivotTableByCell(  fWorkbook.getId(),  fWorksheet.getSheetId(),  0,  8,)const regionField = pivotTable?.getSourceFieldsInfo().find((field) => field.name === 'Region')if (!pivotTable || !regionField) throw new Error('Region source field not found')const slicer = await fWorksheet.insertSlicer(  pivotTable.newSlicer(regionField.id)    .setCaption(regionField.name)    .setPosition('N2')    .build(),)

pivotTable.newSlicer() はビルダーをソースに結び付けます。build() は設定を作成するだけで、insertSlicer() がコントロールを挿入します。配置先とソースのシートは異なっていても構いませんが、同じワークブック内である必要があります。テーブルをソースにする場合は fWorksheet.newSlicer(columnId).setTableReference({ subUnitId, tableId }) を使用します。columnId はテーブル列の安定した ID です。

タイムラインを作成する

同じピボットテーブルを使用する次の例には、Date という元の日付フィールドが必要です。newTimeline() はソースを検証し、未対応のフィールドを拒否します。タイムラインの範囲 API は、JavaScript の Date オブジェクトではなく、ワークブックの日付システムに従う Excel シリアル値を使用します。

TypeScript
const dateField = pivotTable.getSourceFieldsInfo().find((field) => field.name === 'Date')if (!dateField) throw new Error('Date source field not found')const timeline = await fWorksheet.insertTimeline(  pivotTable.newTimeline(dateField.id)    .setCaption(dateField.name)    .setLevel(univerAPI.Enum.TimelineLevel.Month)    .setPosition('N18')    .build(),)

コントロールの検索と変更の監視

配置先のワークシートで getSlicer(viewId) / getSlicers() と getTimeline(viewId) / getTimelines() を呼び出します。viewId はコントロールの getId() が返す ID であり、描画 ID ではありません。

univerAPI.addEvent() で SlicerAdded、SlicerChanged、SlicerRemoved、TimelineAdded、TimelineChanged、TimelineRemoved を購読できます。これらは確定したローカルの変更を通知し、リモート保存や描画完了を示すものではありません。不要になった購読は dispose() で解除してください。

API リファレンス：

メンバーの取得と共有フィルター

setSelection() には型付きの元データを渡します。数値 1、文字列 '1'、空白は別のメンバーです。表示ラベルや一覧のインデックスは渡せません。フィルターは同じキャッシュの全ビューと接続先レポートで共有されます。Table ソースでは対象列のフィルターを置き換え、他の列は維持します。解除には clearFilter() を使います。

TypeScript
import { FilterSelectionMode, RecordValueType } from '@univerjs/core'const accepted = await slicer.setSelection({  mode: FilterSelectionMode.Include,  values: [{ type: RecordValueType.String, value: 'EMEA' }],})

getItems({ start, count }) は一部分だけを取得し、選択を変更しません。既定で 100 件、上限は正の整数の maxMemberWindowSize（既定値 200）です。ページ外の選択も保持してください。setConnections() はピボットレポートの接続を置き換えます。getConnectionCandidates() で互換性のある候補を取得できます。編集には対象シートの権限が必要です。FSheetSlicerを参照してください。

タイムラインの日付条件

setSelection({ startDate, endDate, useWholeDay: true }) は小数の境界を日単位に拡張し、整数の終了値は含めません。useWholeDay がない場合、区間は正確に [startDate, endDate) です。ピボットテーブルから共有された固定日付条件は連続区間とは限らないため、getDateCondition() で読み取ります。この場合 getSelection() は undefined を返すので、それだけでフィルターなしとは判断できません。

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

© 2026 DreamNum Co., Ltd.