表格
表格功能允许用户在电子表格中创建和管理表格，以便更好地组织和展示数据。它支持多种表格样式和操作，帮助用户快速处理和分析信息。
预设模式
安装
Shell
pnpm add @univerjs/preset-sheets-tableShell
npm install @univerjs/preset-sheets-tableShell
yarn add @univerjs/preset-sheets-tableShell
bun add @univerjs/preset-sheets-table使用
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table'import UniverPresetSheetsTableZhCN from '@univerjs/preset-sheets-table/locales/zh-CN'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.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsTableZhCN, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsTablePreset(), ],})插件模式
安装
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-ui使用
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsTablePlugin } from '@univerjs/sheets-table'import { UniverSheetsTableUIPlugin } from '@univerjs/sheets-table-ui'import SheetsTableUIZhCN from '@univerjs/sheets-table-ui/locale/zh-CN'import '@univerjs/sheets-table-ui/lib/index.css'import '@univerjs/sheets-table/facade'const univer = new Univer({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( SheetsTableUIZhCN, ), },})univer.registerPlugin(UniverSheetsTablePlugin)univer.registerPlugin(UniverSheetsTableUIPlugin)Facade API
完整 Facade API 类型定义，请查看 FacadeAPI。
引入
插件模式提示
仅插件模式需要手动引入 Facade 包。预设模式已内置对应的 Facade 包，无需额外导入。
TypeScript
import '@univerjs/sheets-table/facade'插入表格
FWorkbook.addTable：在工作薄指定工作表中插入一个表格FWorksheet.addTable：在工作表中插入一个表格
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const 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)}获取表格
FWorkbook.getTableList：获取工作簿中所有表格列表FWorksheet.getSubTableInfos：获取工作表中所有表格列表
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)FWorkbook.getTableInfo：通过表格 ID 获取表格信息FWorkbook.getTableInfoByName：通过表格名称获取表格信息
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const 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：通过单元格位置获取表格信息
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))// 在 B2:F11 范围内插入一个表格const 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))设置过滤器
FWorkbook.setTableFilter：设置工作薄中表格的过滤器FWorksheet.setTableFilter：设置工作表中表格的过滤器
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // 设置第二列的过滤器 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：重置工作表中表格的过滤器
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // 设置第二列的过滤器 await fWorksheet.setTableFilter('id-1', 1, { filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition, filterInfo: { conditionType: univerAPI.Enum.TableConditionTypeEnum.Number, compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan, expectedValue: 10, }, }) // 3 秒后重置第二列的过滤器 setTimeout(async () => { await fWorksheet.resetFilter('id-1', 1) }, 3000) const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}修改/删除表格
FWorkbook.removeTable：删除工作薄中表格FWorksheet.removeTable：删除工作表中表格
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const tableInfo = fWorkbook.getTableInfo('id-1')console.log('debugger tableInfo', tableInfo)if (tableInfo) { // 通过指定的 ID 删除表格 await fWorksheet.removeTable('id-1')}FWorksheet.setTableRange：修改工作表中表格的范围
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // 3 秒后更新表格范围 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：修改工作表中表格的名称
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// 在 B2:F11 范围内插入一个表格const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // 3 秒后更新表格名称 setTimeout(async () => { await fWorksheet.setTableName('id-1', 'new-name') const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo) }, 3000)}添加表格主题
FWorksheet.addTableTheme：添加工作表中表格的主题
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)}你觉得这篇文档如何？