フィルター
フィルター機能は、スプレッドシート内のデータを条件で絞り込み、特定の情報を迅速に検索・分析するためのものです。多様なフィルター条件や操作をサポートし、データ処理の効率化に寄与します。
学習計画のフィルターと並べ替え
対象を絞り、進捗で並べ替えます。レコード ID で同じデータの位置を追えます。
| レコード ID | コース | 学習進捗 |
|---|---|---|
| 1 | Sheets | 86% |
| 2 | Docs | 100% |
| 3 | Slides | 64% |
| 4 | Bases | 92% |
| 5 | Boards | 48% |
| 6 | PDFs | 78% |
表示件数: 6 / 6
フィルターは行を非表示にし、並べ替えは順序を変えます。フィルターを解除すると全件が再表示されます。
プラグインモード
インストール
Shell
pnpm add @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
npm install @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
yarn add @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
bun add @univerjs/sheets-filter @univerjs/sheets-filter-ui使い方
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter'import { UniverSheetsFilterUIPlugin } from '@univerjs/sheets-filter-ui'import SheetsFilterUIJaJP from '@univerjs/sheets-filter-ui/locale/ja-JP'import '@univerjs/sheets-filter-ui/lib/index.css'import '@univerjs/sheets-filter/facade'const univer = new Univer({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( SheetsFilterUIJaJP, ), },})univer.registerPlugin(UniverSheetsFilterPlugin)univer.registerPlugin(UniverSheetsFilterUIPlugin)プラグインと設定
TypeScript
interface IUniverSheetsFilterConfig { /** * フィルターパネルにフィルター同期スイッチを表示するかどうか。 * この設定は、コラボレーションシナリオで使用され、ユーザーがフィルターの同期を有効にするかどうかを選択できるようにします。 * defaultValue オブジェクトに設定されている場合、フィルター同期スイッチが表示され、その初期状態は defaultValue プロパティによって決定されます。 * @default false */ enableSyncSwitch?: boolean | { defaultValue: boolean }}モバイル対応
まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。
| パッケージ | デスクトップの登録 | モバイルの登録 |
|---|---|---|
@univerjs/sheets-filter-ui | UniverSheetsFilterUIPlugin | UniverSheetsFilterMobileUIPlugin |
プリセットモード
インストール
Shell
pnpm add @univerjs/preset-sheets-filterShell
npm install @univerjs/preset-sheets-filterShell
yarn add @univerjs/preset-sheets-filterShell
bun add @univerjs/preset-sheets-filter使い方
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsFilterPreset } from '@univerjs/preset-sheets-filter'import UniverPresetSheetsFilterJaJP from '@univerjs/preset-sheets-filter/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-filter/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( UniverPresetSheetsCoreJaJP, UniverPresetSheetsFilterJaJP, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsFilterPreset(), ],})プリセットと設定
TypeScript
interface IUniverSheetsFilterPresetConfig { /** * フィルターパネルにフィルター同期スイッチを表示するかどうか。 * この設定は、コラボレーションシナリオで使用され、ユーザーがフィルターの同期を有効にするかどうかを選択できるようにします。 * defaultValue オブジェクトに設定されている場合、フィルター同期スイッチが表示され、その初期状態は defaultValue プロパティによって決定されます。 * @default false */ enableSyncSwitch?: boolean | { defaultValue: boolean }}Facade API
Facade API の完全な型定義は FacadeAPI で参照できます。
インポート
プラグインモード注意
Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。
TypeScript
import '@univerjs/sheets-filter/facade'フィルターの取得
FFilter オブジェクトを返します。シートにフィルターが存在しない場合は null を返します。
FWorksheetオブジェクトではgetFilter()を使用FRangeオブジェクトではgetFilter()を使用
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// FWorksheet からフィルターを取得const fWorksheet = fWorkbook.getActiveSheet()const fFilter = fWorksheet.getFilter()fFilter?.getRange().getA1Notation()// FRange からフィルターを取得const fRange = fWorksheet.getRange('A1:D14')const fFilter2 = fRange.getFilter()fFilter2?.getRange().getA1Notation()フィルターの作成
FFilter オブジェクトを新規作成します。シートに既にフィルターが存在する場合は null を返します。
FRangeオブジェクト上でcreateFilter()を使用
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D14')let fFilter = fRange.createFilter()// 既にフィルターがある場合はいったん削除して再作成if (!fFilter) { fWorksheet.getFilter().remove() fFilter = fRange.createFilter()}fFilter.getRange().getA1Notation()フィルターの削除
FFilter.remove() メソッドはフィルターを削除します。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()fWorksheet.getFilter()?.remove()列フィルター条件の取得
FFilter.getColumnFilterCriteria(column) は指定した列のフィルター条件を返します。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 範囲 C1:F10 に値を設定const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// フィルター作成let fFilter = fRange.createFilter()// 既にあるなら削除して再作成if (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// 列 C の条件を設定（1,5,9 以外を除外）const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// 列 C と D の条件を取得fFilter.getColumnFilterCriteria(column) // { colId: 0, filters: { filters: ['1', '5', '9'] } }fFilter.getColumnFilterCriteria(column + 1) // undefined列フィルター条件の設定
FFilter.setColumnFilterCriteria(column, criteria) は指定列のフィルター条件を設定します。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 範囲 C1:F10 に値を設定const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// フィルター作成let fFilter = fRange.createFilter()// 既にあるなら削除して再作成if (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// 列 C の条件を設定（1,5,9 以外を除外）const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})列フィルター条件の削除
FFilter.removeColumnFilterCriteria(column)は指定列のフィルター条件を削除します。FFilter.removeFilterCriteria()はすべての列のフィルター条件を削除します。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 範囲 C1:F10 に値を設定const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// フィルター作成let fFilter = fRange.createFilter()// 既にあるなら削除して再作成if (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// 列 C の条件を設定（1,5,9 以外を除外）const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// 3 秒後に列 C の条件をクリアsetTimeout(() => { fFilter.removeColumnFilterCriteria(column) // すべての列条件を削除する場合: fFilter.removeFilterCriteria()}, 3000)除外された行の取得
FFilter.getFilteredOutRows() はフィルターにより非表示（除外）された行インデックスの配列を返します。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 範囲 C1:F10 に値を設定const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// フィルター作成let fFilter = fRange.createFilter()// 既にあるなら削除して再作成if (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// 列 C の条件を設定（1,5,9 以外を除外）const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// 除外された行を出力fFilter.getFilteredOutRows() // [1, 2, 3, 5, 6, 7, 9]イベントリスナー
完全なイベント型定義は Events を参照してください。
SheetRangeFiltered イベントは列フィルター条件が変更されたときにトリガーされます。
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFiltered, (params) => { const { workbook, worksheet, col, criteria } = params})// `disposable.dispose()` を使用してイベントリスナーを削除SheetBeforeRangeFilter イベントは列フィルター条件が変更される前にトリガーされます。
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilter, (params) => { const { workbook, worksheet, col, criteria } = params // 条件変更処理をキャンセル params.cancel = true})// `disposable.dispose()` を使用してイベントリスナーを削除SheetRangeFilterCleared イベントはフィルター条件がクリアされたときにトリガーされます。
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFilterCleared, (params) => { const { workbook, worksheet } = params})// `disposable.dispose()` を使用してイベントリスナーを削除SheetBeforeRangeFilterClear イベントはフィルター条件がクリアされる前にトリガーされます。
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilterClear, (params) => { const { workbook, worksheet } = params // クリア処理をキャンセル params.cancel = true})// `disposable.dispose()` を使用してイベントリスナーを削除このガイドはいかがですか？