並べ替え
並べ替え機能は、スプレッドシート内のデータを並び替えて、情報の整理や分析を容易にします。昇順、降順、カスタムソートなどの複数の並べ替え方法をサポートしており、ユーザーが必要なデータを素早く見つけられるよう支援します。
学習計画のフィルターと並べ替え
対象を絞り、進捗で並べ替えます。レコード ID で同じデータの位置を追えます。
| レコード ID | コース | 学習進捗 |
|---|---|---|
| 1 | Sheets | 86% |
| 2 | Docs | 100% |
| 3 | Slides | 64% |
| 4 | Bases | 92% |
| 5 | Boards | 48% |
| 6 | PDFs | 78% |
表示件数: 6 / 6
フィルターは行を非表示にし、並べ替えは順序を変えます。フィルターを解除すると全件が再表示されます。
プラグインモード
インストール
pnpm add @univerjs/sheets-sort @univerjs/sheets-sort-uinpm install @univerjs/sheets-sort @univerjs/sheets-sort-uiyarn add @univerjs/sheets-sort @univerjs/sheets-sort-uibun add @univerjs/sheets-sort @univerjs/sheets-sort-ui使い方
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsSortPlugin } from '@univerjs/sheets-sort'import { UniverSheetsSortUIPlugin } from '@univerjs/sheets-sort-ui'import SheetsSortUIJaJP from '@univerjs/sheets-sort-ui/locale/ja-JP'import '@univerjs/sheets-sort-ui/lib/index.css'import '@univerjs/sheets-sort/facade'const univer = new Univer({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( SheetsSortUIJaJP, ), },})univer.registerPlugin(UniverSheetsSortPlugin)univer.registerPlugin(UniverSheetsSortUIPlugin)モバイル対応
まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。
| パッケージ | デスクトップの登録 | モバイルの登録 |
|---|---|---|
@univerjs/sheets-sort-ui | UniverSheetsSortUIPlugin | UniverSheetsSortMobileUIPlugin |
プリセットモード
インストール
pnpm add @univerjs/preset-sheets-sortnpm install @univerjs/preset-sheets-sortyarn add @univerjs/preset-sheets-sortbun add @univerjs/preset-sheets-sort使い方
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsSortPreset } from '@univerjs/preset-sheets-sort'import UniverPresetSheetsSortJaJP from '@univerjs/preset-sheets-sort/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-sort/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( UniverPresetSheetsCoreJaJP, UniverPresetSheetsSortJaJP, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsSortPreset(), ],})Facade API
Facade API の完全な型定義は、FacadeAPI を参照してください。
インポート
プラグインモード注意
Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。
import '@univerjs/sheets-sort/facade'ワークシートの並べ替え
FWorksheet.sort(colIndex, asc) メソッドは、指定した列でワークシートを並べ替えるために使用できます。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// ワークシートを第一列の昇順で並べ替えfWorksheet.sort(0)// ワークシートを第一列の降順で並べ替えfWorksheet.sort(0, false)範囲の並べ替え
FRange.sort(column) メソッドは、指定した列と順序に基づいて範囲内のセルを並べ替えるために使用できます。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('D1:G10')// ワークシートを第一列の昇順で並べ替えfRange.sort(0)// ワークシートを第一列の降順で並べ替えfRange.sort({ column: 0, ascending: false })// ワークシートを第一列の降順、第二列の昇順で並べ替えfRange.sort([{ column: 0, ascending: false }, 1])イベントリスナー
完全なイベント型定義は、Events で確認できます。
SheetRangeSorted イベントは、セル範囲の並べ替えが完了したときにトリガーします。
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeSorted, (params) => { const { workbook, worksheet, range, sortColumn } = params})// イベントリスナーを削除するには、`disposable.dispose()` を使用します。SheetBeforeRangeSort イベントは、セル範囲を並べ替える前にトリガーします。
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeSort, (params) => { const { workbook, worksheet, range, sortColumn } = params // ソート操作をキャンセル params.cancel = true})// イベントリスナーを削除するには、`disposable.dispose()` を使用します。このガイドはいかがですか？