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.
Preset Mode
Installation
Shell
pnpm add @univerjs/preset-sheets-tableShell
npm install @univerjs/preset-sheets-tableShell
yarn add @univerjs/preset-sheets-tableShell
bun add @univerjs/preset-sheets-tableUsage
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(), ],})Plugin Mode
Installation
Shell
pnpm add @univerjs/sheets-table @univerjs/sheets-table-uiShell
npm install @univerjs/sheets-table @univerjs/sheets-table-uiShell
yarn add @univerjs/sheets-table @univerjs/sheets-table-uiShell
bun add @univerjs/sheets-table @univerjs/sheets-table-uiUsage
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)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 workbookFWorksheet.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 workbookFWorksheet.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 IDFWorkbook.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 workbookFWorksheet.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 workbookFWorksheet.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?