Web SDK

Filtre

La fonctionnalité de filtre permet aux utilisateurs de filtrer les données des feuilles de calcul afin de trouver et d’analyser rapidement des informations précises. Elle prend en charge diverses conditions et opérations de filtrage, ce qui permet de traiter les données plus efficacement.

Filtrer et trier un parcours

Filtrez les cours, puis triez leur progression. Les identifiants permettent de suivre chaque enregistrement.

IdentifiantCoursProgression
1Sheets
86%
2Docs
100%
3Slides
64%
4Bases
92%
5Boards
48%
6PDFs
78%

Enregistrements visibles: 6 / 6

Le filtre masque des enregistrements ; le tri change leur ordre. Retirez le filtre pour tous les retrouver.

Mode plugin

Installation

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

Utilisation

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)

Plugins et configuration

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 }}

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

PaquetInscription de bureauInscription mobile
@univerjs/sheets-filter-uiUniverSheetsFilterUIPluginUniverSheetsFilterMobileUIPlugin

Mode prédéfini

Installation

Shell
pnpm add @univerjs/preset-sheets-filter

Utilisation

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(),   ],})

Préréglages et configuration

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 }}

API Facade

Les définitions de types complètes de l’API Facade sont disponibles dans la FacadeAPI.

Importation

Remarque sur le mode plugin

Seul le mode plugin nécessite l’importation manuelle du package Facade. Le mode prédéfini inclut déjà le package Facade correspondant ; aucune importation supplémentaire n’est donc nécessaire.

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

Obtenir le filtre

Renvoie un objet FFilter. Si la feuille ne comporte aucun filtre, renvoie null.

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()

Créer un filtre

Crée un objet FFilter. Si la feuille comporte déjà un filtre, renvoie 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()

Supprimer le filtre

FFilter.remove() supprime le filtre de la feuille de calcul.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()fWorksheet.getFilter()?.remove()

Obtenir les critères de filtrage d’une colonne

La méthode FFilter.getColumnFilterCriteria(column) renvoie les critères de filtrage de la colonne spécifiée.

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

Définir les critères de filtrage d’une colonne

La méthode FFilter.setColumnFilterCriteria(column, criteria) définit les critères de filtrage de la colonne spécifiée.

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'],  },})

Supprimer les critères de filtrage d’une colonne

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)

Obtenir les lignes exclues par le filtre

La méthode FFilter.getFilteredOutRows() renvoie un tableau contenant les indices des lignes exclues par le filtre.

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]

Écouteurs d’événements

Les définitions complètes des types d’événements sont disponibles dans la section Événements.

L’événement SheetRangeFiltered est déclenché lorsque les critères de filtrage de la colonne changent.

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

L’événement SheetBeforeRangeFilter est déclenché avant la modification des critères de filtrage de la colonne.

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()`

L’événement SheetRangeFilterCleared est déclenché lorsque les critères sont effacés.

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

L’événement SheetBeforeRangeFilterClear est déclenché avant l’effacement des critères.

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()`

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.