Web SDK

Таблицы

Функция таблиц позволяет создавать таблицы в электронных таблицах и управлять ими, чтобы удобнее организовывать и представлять данные. Она поддерживает различные стили и операции, помогая быстро обрабатывать и анализировать информацию.

Режим плагинов

Установка

Shell
pnpm 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 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; не регистрируйте оба варианта.

ПакетНастольная регистрацияМобильная регистрация
@univerjs/sheets-table-uiUniverSheetsTableUIPluginUniverSheetsTableMobileUIPlugin

Режим предустановок

Установка

Shell
pnpm add @univerjs/preset-sheets-table

Использование

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

Полные определения типов Facade API доступны в разделе FacadeAPI.

Импорт

Примечание о режиме плагинов

Вручную импортировать пакет Facade требуется только в режиме плагинов. В режиме предустановок соответствующий пакет Facade уже включён, поэтому дополнительный импорт не нужен.

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

Вставка таблицы

  • FWorkbook.addTable: вставить таблицу на указанный лист книги
  • FWorksheet.addTable: вставить таблицу на лист
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)}

Получение таблицы

  • FWorkbook.getTableList: получить список всех таблиц в книге
  • FWorksheet.getSubTableInfos: получить список всех таблиц на листе
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)
  • FWorkbook.getTableInfo: получить сведения о таблице по её идентификатору
  • FWorkbook.getTableInfoByName: получить сведения о таблице по её имени
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: получить сведения о таблице по положению ячейки
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))

Настройка фильтра

  • FWorkbook.setTableFilter: задать фильтр таблицы в книге
  • FWorksheet.setTableFilter: задать фильтр таблицы на листе
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: сбросить фильтр таблицы на листе
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)}

Изменение и удаление таблицы

  • 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) {  // Remove the table with the specified id  await fWorksheet.removeTable('id-1')}
  • FWorksheet.setTableRange: изменить диапазон таблицы на листе
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: изменить имя таблицы на листе
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)}

Добавление темы таблицы

  • 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)}

Перемещение таблицы вместе с ячейками

Перемещение диапазона, содержащего таблицу целиком, переносит и саму таблицу — в пределах листа или на другой лист той же книги. Включите заголовок и все строки. Сохраняются ID, имя, стиль, метаданные столбцов и фильтры; структурированные ссылки следуют за таблицей. Целевой диапазон должен быть доступен для редактирования, находиться в границах листа и не пересекаться с другой таблицей. Отмена и повтор восстанавливают и ячейки, и метаданные таблицы.

Насколько полезно это руководство?

© 2026 DreamNum Co., Ltd.