Filter

Facade API	Has Paid Plan	Univer Server	Univer on Node.js	Preset
✅	-	-	✅	UniverSheetsFilterPreset

The filter plugin provides filtering functionality for cells.

This feature includes the following plugin packages:

@univerjs/sheets-filter - Filter Plugin
@univerjs/sheets-filter-ui - Filter UI Plugin

Presets Installation


import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
import { UniverSheetsFilterPreset } from '@univerjs/presets/preset-sheets-filter';
import UniverPresetSheetsFilterEnUS from '@univerjs/presets/preset-sheets-filter/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css'
import '@univerjs/presets/lib/styles/preset-sheets-filter.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsFilterEnUS
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsFilterPreset(),
  ],
});

Piecemeal Installation


npm install @univerjs/sheets-filter @univerjs/sheets-filter-ui


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


yarn add @univerjs/sheets-filter @univerjs/sheets-filter-ui


bun add @univerjs/sheets-filter @univerjs/sheets-filter-ui


import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
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({
  theme: defaultTheme,
  locale: LocaleType.en_US,
  locales: {
    [LocaleType.en_US]: merge(
      SheetsFilterUIEnUS
    ),
  },
});
 
univer.registerPlugin(UniverSheetsFilterPlugin);
univer.registerPlugin(UniverSheetsFilterUIPlugin);

Univer on Node.js Piecemeal Installation


npm install @univerjs/sheets-filter


pnpm add @univerjs/sheets-filter


yarn add @univerjs/sheets-filter


bun add @univerjs/sheets-filter


import { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter';
 
import '@univerjs/sheets-filter/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
});
 
univer.registerPlugin(UniverSheetsFilterPlugin);

Facade API

To get full defination of facade api, please refer to FacadeAPI

Get Filter

Returns an FFilter object, or null if the sheet has no filter.

getFilter() on the FWorksheet object
getFilter() on the FRange object


const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
 
// get filter from FWorksheet
const filter = sheet.getFilter();
console.log(filter);
 
// get filter from FRange
const range = sheet.getRange(0, 0, 10, 10);
const filter = range.getFilter();
console.log(filter);

Create Filter

Create an FFilter object asynchronously, and return null if the sheet already has a filter.

createFilter() on the FRange object


const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
 
// get range
const range = sheet.getRange(0, 0, 10, 10);
 
// create filter, if filter is already created in worksheet, it will return null
let filter = await range.createFilter();
 
// so delete the existing filter before creating a new one
if (!filter) {
  await sheet.getFilter().remove();
 
  // create filter again
  filter = await range.createFilter();
}
 
console.log(filter);