Web SDK

Tabla

La función Tabla permite a los usuarios crear y administrar tablas en hojas de cálculo para una mejor organización y presentación de los datos. Admite varios estilos de tablas y operaciones, lo que ayuda a los usuarios a procesar y analizar información rápidamente.

Modo predeterminado

Instalación

Shell
pnpm add @univerjs/preset-sheets-table

Uso

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

Modo de complemento

Instalación

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

Uso

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)

Compatibilidad móvil

Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

PaqueteRegistro de escritorioRegistro móvil
@univerjs/sheets-table-uiUniverSheetsTableUIPluginUniverSheetsTableMobileUIPlugin

API de Facade

Las definiciones completas del tipo de API de Facade se pueden encontrar en la FacadeAPI.

Importando

Plugin mode note

Sólo el modo complemento requiere importar manualmente el paquete Facade. El modo Preestablecido ya incluye el paquete Facade correspondiente, por lo que no se necesita ninguna importación adicional.

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

Insertar tabla

  • FWorkbook.addTable: inserta una tabla en la hoja de trabajo especificada del libro de trabajo
  • FWorksheet.addTable: inserta una tabla en la hoja de trabajo
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)}

Obtener tabla

  • FWorkbook.getTableList: obtiene todas las listas de tablas en el libro de trabajo
  • FWorksheet.getSubTableInfos: obtiene todas las listas de tablas en la hoja de trabajo
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)
  • FWorkbook.getTableInfo: obtiene información de la tabla por ID de tabla
  • FWorkbook.getTableInfoByName: obtiene información de la tabla por nombre de tabla
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: obtiene información de la tabla por posición de celda
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))

Establecer Filtro

  • FWorkbook.setTableFilter: establece el filtro para la tabla en el libro de trabajo
  • FWorksheet.setTableFilter: establece el filtro para la tabla en la hoja de trabajo
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: restablece el filtro para la tabla en la hoja de trabajo
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)}

Modificar/eliminar tabla

  • FWorkbook.removeTable: elimina el tabla en el libro de trabajo
  • FWorksheet.removeTable: eliminar la tabla en la hoja de trabajo
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: actualizar el rango de la tabla en la hoja de trabajo
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: actualizar el nombre de la tabla en la hoja de trabajo
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)}

Agregar tema de tabla

  • FWorksheet.addTableTheme: agregar el tema para la tabla en el hoja de trabajo
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)}

Mover una tabla con sus celdas

Mover un rango que contiene una tabla completa también mueve la tabla, dentro de una hoja o a otra hoja del mismo libro. Incluya el encabezado y todas las filas. Se conservan identidad, nombre, estilo, metadatos de columnas y filtros; las referencias estructuradas siguen a la tabla. El destino debe ser editable, quedar dentro de la hoja y no solaparse con otra tabla. Deshacer y rehacer restauran tanto las celdas como los metadatos.

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.