Web SDK

Table

The Table feature allows users to create and manage tables in spreadsheets for better organization and presentation of data. It supports various table styles and operations, helping users quickly process and analyze information.

Plugin Mode

Installation

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

Usage

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

Mobile support

First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.

PackageDesktop registrationMobile registration
@univerjs/sheets-table-uiUniverSheetsTableUIPluginUniverSheetsTableMobileUIPlugin

Preset Mode

Installation

Shell
pnpm add @univerjs/preset-sheets-table

Usage

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table'import UniverPresetSheetsTableEnUS from '@univerjs/preset-sheets-table/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-table/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsTableEnUS,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsTablePreset(),   ],})

Facade API

Complete Facade API type definitions can be found in the FacadeAPI.

Importing

Plugin mode note

Only plugin mode requires manually importing the Facade package. Preset mode already includes the corresponding Facade package, so no extra import is needed.

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

Insert Table

  • FWorkbook.addTable: Insert a table in the specified worksheet of the workbook
  • FWorksheet.addTable: Insert a table in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',    columns: [      { id: 'col-1', displayName: 'Column 1' },    ],    filters: [      {        filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,        filterInfo: {          conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,          compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,          expectedValue: 2,        },      },    ],  },)if (success) {  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}

Get Table

  • FWorkbook.getTableList: Get all table lists in the workbook
  • FWorksheet.getSubTableInfos: Get all table lists in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)
  • FWorkbook.getTableInfo: Get table information by table ID
  • FWorkbook.getTableInfoByName: Get table information by table name
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}
  • FWorksheet.getTableByCell: Get table information by cell position
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const cellB2 = fWorksheet.getRange('B2')const row = cellB2.getRow()const column = cellB2.getColumn()console.log('debugger tableInfo', fWorksheet.getTableByCell(row, column))// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)console.log('debugger tableInfo2', fWorksheet.getTableByCell(row, column))

Set Filter

  • FWorkbook.setTableFilter: Set the filter for the table in the workbook
  • FWorksheet.setTableFilter: Set the filter for the table in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // Set the filter for the second column  await fWorksheet.setTableFilter('id-1', 1, {    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,    filterInfo: {      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,      expectedValue: 10,    },  })  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}
  • FWorksheet.resetFilter: Reset the filter for the table in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // Set the filter for the second column  await fWorksheet.setTableFilter('id-1', 1, {    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,    filterInfo: {      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,      expectedValue: 10,    },  })  // Reset the filter for the second column after 3 seconds  setTimeout(async () => {    await fWorksheet.resetFilter('id-1', 1)  }, 3000)  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}

Modify/Delete Table

  • FWorkbook.removeTable: Remove the table in the workbook
  • FWorksheet.removeTable: Remove the table in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const tableInfo = fWorkbook.getTableInfo('id-1')console.log('debugger tableInfo', tableInfo)if (tableInfo) {  // Remove the table with the specified id  await fWorksheet.removeTable('id-1')}
  • FWorksheet.setTableRange: Update the table range in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // Update the table range to B2:F21 after 3 seconds  setTimeout(async () => {    const newRange = fWorksheet.getRange('B2:F21')    await fWorksheet.setTableRange('id-1', newRange.getRange())    const tableInfo = fWorkbook.getTableInfo('id-1')    console.log('debugger tableInfo', tableInfo)  }, 3000)}
  • FWorksheet.setTableName: Update the table name in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // Update the table name after 3 seconds  setTimeout(async () => {    await fWorksheet.setTableName('id-1', 'new-name')    const tableInfo = fWorkbook.getTableInfo('id-1')    console.log('debugger tableInfo', tableInfo)  }, 3000)}

Add Table Theme

  • FWorksheet.addTableTheme: Add the theme for the table in the worksheet
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  await fWorksheet.addTableTheme('id-1', {    name: 'table-custom-1',    headerRowStyle: {      bg: {        rgb: '#145f82',      },    },    firstRowStyle: {      bg: {        rgb: '#c0e4f5',      },    },  })  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}

How is this guide?

© 2026 DreamNum Co., Ltd.