Web SDK

정렬

정렬 기능을 사용하면 스프레드시트의 데이터를 정렬하여 정보를 더 쉽게 구성하고 분석할 수 있습니다. 오름차순, 내림차순, 사용자 지정 정렬 등 다양한 방식을 지원하므로 필요한 데이터를 빠르게 찾을 수 있습니다.

학습 계획 필터 및 정렬

원하는 기록을 필터링하고 진도순으로 정렬하세요. 기록 ID로 같은 데이터의 위치를 확인할 수 있습니다.

기록 ID과정학습 진도
1Sheets
86%
2Docs
100%
3Slides
64%
4Bases
92%
5Boards
48%
6PDFs
78%

표시 기록: 6 / 6

필터는 기록을 숨기고 정렬은 순서를 바꿉니다. 필터를 해제하면 모든 기록이 다시 표시됩니다.

플러그인 모드

설치

Shell
pnpm add @univerjs/sheets-sort @univerjs/sheets-sort-ui

사용법

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsSortPlugin } from '@univerjs/sheets-sort'import { UniverSheetsSortUIPlugin } from '@univerjs/sheets-sort-ui'import SheetsSortUIEnUS from '@univerjs/sheets-sort-ui/locale/en-US'import '@univerjs/sheets-sort-ui/lib/index.css'import '@univerjs/sheets-sort/facade'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      SheetsSortUIEnUS,     ),  },})univer.registerPlugin(UniverSheetsSortPlugin)univer.registerPlugin(UniverSheetsSortUIPlugin)

모바일 지원

먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

패키지데스크톱 등록모바일 등록
@univerjs/sheets-sort-uiUniverSheetsSortUIPluginUniverSheetsSortMobileUIPlugin

프리셋 모드

설치

Shell
pnpm add @univerjs/preset-sheets-sort

사용법

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsSortPreset } from '@univerjs/preset-sheets-sort'import UniverPresetSheetsSortEnUS from '@univerjs/preset-sheets-sort/locales/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsSortEnUS,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsSortPreset(),   ],})

Facade API

전체 Facade API 타입 정의는 FacadeAPI에서 확인할 수 있습니다.

가져오기

플러그인 모드 참고

Facade 패키지를 수동으로 가져와야 하는 것은 플러그인 모드뿐입니다. 프리셋 모드에는 해당 Facade 패키지가 이미 포함되어 있으므로 추가로 가져올 필요가 없습니다.

TypeScript
import '@univerjs/sheets-sort/facade'

워크시트 정렬

FWorksheet.sort(colIndex, asc) 메서드는 지정한 열을 기준으로 워크시트를 정렬합니다.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Sorts the worksheet in ascending order based on the first columnfWorksheet.sort(0)// Sorts the worksheet in descending order based on the first columnfWorksheet.sort(0, false)

범위 정렬

FRange.sort(column) 메서드는 지정한 열과 순서에 따라 해당 범위의 셀을 정렬합니다.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('D1:G10')// Sorts the range in ascending order based on the first columnfRange.sort(0)// Sorts the range in descending order based on the first columnfRange.sort({ column: 0, ascending: false })// Sorts the range in descending order based on the first column and ascending order based on the second columnfRange.sort([{ column: 0, ascending: false }, 1])

이벤트 리스너

전체 이벤트 타입 정의는 Events에서 확인할 수 있습니다.

SheetRangeSorted 이벤트는 셀 범위 정렬이 완료된 후 발생합니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeSorted, (params) => {  const { workbook, worksheet, range, sortColumn } = params})// Remove event listener using `disposable.dispose()`

SheetBeforeRangeSort 이벤트는 셀 범위를 정렬하기 전에 발생합니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeSort, (params) => {  const { workbook, worksheet, range, sortColumn } = params  // Cancel the sorting operation  params.cancel = true})// Remove event listener using `disposable.dispose()`

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.