Web SDK

필터

필터 기능을 사용하면 스프레드시트의 데이터를 필터링하여 원하는 정보를 빠르게 찾고 분석할 수 있습니다. 다양한 필터 조건과 작업을 지원하므로 데이터를 더욱 효율적으로 처리할 수 있습니다.

학습 계획 필터 및 정렬

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

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

표시 기록: 6 / 6

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

플러그인 모드

설치

Shell
pnpm 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 SheetsFilterUIEnUS from '@univerjs/sheets-filter-ui/locale/en-US'import '@univerjs/sheets-filter-ui/lib/index.css'import '@univerjs/sheets-filter/facade'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      SheetsFilterUIEnUS,     ),  },})univer.registerPlugin(UniverSheetsFilterPlugin)univer.registerPlugin(UniverSheetsFilterUIPlugin)

플러그인 및 구성

TypeScript
interface IUniverSheetsFilterConfig {  /**   * Whether to display the filter sync switch in the filter panel.   * This configuration can be used in a collaboration scenario to allow users to choose whether to enable filter synchronization.   * If set to a defaultValue object, the filter sync switch will be displayed and its initial state will be determined by the defaultValue property.   * @default false   */  enableSyncSwitch?: boolean | { defaultValue: boolean }}

모바일 지원

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

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

프리셋 모드

설치

Shell
pnpm add @univerjs/preset-sheets-filter

사용법

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

프리셋 및 구성

TypeScript
interface IUniverSheetsFilterPresetConfig {  /**   * Whether to display the filter sync switch in the filter panel.   * This configuration can be used in a collaboration scenario to allow users to choose whether to enable filter synchronization.   * If set to a defaultValue object, the filter sync switch will be displayed and its initial state will be determined by the defaultValue property.   * @default false   */  enableSyncSwitch?: boolean | { defaultValue: boolean }}

Facade API

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

가져오기

플러그인 모드 참고 사항

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

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

필터 가져오기

FFilter 객체를 반환합니다. 시트에 필터가 없으면 null을 반환합니다.

  • FWorksheet 객체에서는 getFilter()를 사용합니다.
  • FRange 객체에서는 getFilter()를 사용합니다.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// Get filter from FWorksheetconst fWorksheet = fWorkbook.getActiveSheet()const fFilter = fWorksheet.getFilter()fFilter?.getRange().getA1Notation()// Get filter from FRangeconst fRange = fWorksheet.getRange('A1:D14')const fFilter2 = fRange.getFilter()fFilter2?.getRange().getA1Notation()

필터 만들기

FFilter 객체를 만듭니다. 시트에 이미 필터가 있으면 null을 반환합니다.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D14')let fFilter = fRange.createFilter()// If the worksheet already has a filter, remove it and create a new filter.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()// Set some values of the range C1:F10const 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],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) {  fRange.getFilter().remove()  fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, {  colId: 0,  filters: {    filters: ['1', '5', '9'],  },})// Print the filter criteria of the column C and DfFilter.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()// Set some values of the range C1:F10const 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],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) {  fRange.getFilter().remove()  fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, {  colId: 0,  filters: {    filters: ['1', '5', '9'],  },})

열 필터 조건 제거하기

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const 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],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) {  fRange.getFilter().remove()  fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, {  colId: 0,  filters: {    filters: ['1', '5', '9'],  },})// Clear the filter criteria of the column C after 3 secondssetTimeout(() => {  fFilter.removeColumnFilterCriteria(column)  // Or use fFilter.removeFilterCriteria() to remove all column filter criteria}, 3000)

필터링된 행 가져오기

FFilter.getFilteredOutRows() 메서드는 필터링으로 제외된 행의 인덱스가 담긴 배열을 반환합니다.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const 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],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) {  fRange.getFilter().remove()  fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, {  colId: 0,  filters: {    filters: ['1', '5', '9'],  },})// Print the filtered out rowsfFilter.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})// Remove the event listener, use `disposable.dispose()`

SheetBeforeRangeFilter 이벤트는 열 필터 조건이 변경되기 전에 트리거됩니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilter, (params) => {  const { workbook, worksheet, col, criteria } = params  // Cancel the filter criteria change operation  params.cancel = true})// Remove the event listener, use `disposable.dispose()`

SheetRangeFilterCleared 이벤트는 조건이 지워질 때 트리거됩니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFilterCleared, (params) => {  const { workbook, worksheet } = params})// Remove the event listener, use `disposable.dispose()`

SheetBeforeRangeFilterClear 이벤트는 조건이 지워지기 전에 트리거됩니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilterClear, (params) => {  const { workbook, worksheet } = params  // Cancel the filter clear operation  params.cancel = true})// Remove the event listener, use `disposable.dispose()`

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.