Таблицы

Функция расширенных таблиц предоставляет широкие возможности редактирования таблиц в Univer Docs: оформление ячеек, настройку границ, работу со строками и столбцами, а также заполнение данными.

Введение

Расширенные таблицы в Univer Docs позволяют:

• Вставлять таблицы программно: создавать таблицы заданного размера.
• Изменять структуру: добавлять, удалять и перемещать строки и столбцы.
• Оформлять ячейки: настраивать границы, фон и форматирование текста.
• Объединять и разделять ячейки: создавать сложные макеты, комбинируя ячейки.

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

Установка

pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

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

import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIEnUS from '@univerjs-pro/docs-table-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsTableUIEnUS,     ),  },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)

Если у вас есть коммерческая лицензия Univer, инструкции по настройке см. в разделе Использование лицензии на клиенте.

Поддержка мобильных устройств

Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.

Facade API

Перед использованием API обязательно импортируйте facade:

import '@univerjs-pro/docs-table/facade'

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

const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')

Вставка таблицы из данных

const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([  ['Name', 'Status'],  ['Facade', 'Ready'],], { headerRowCount: 1 })

Получение всех таблиц

const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []

Удаление таблицы

const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')

Границы таблиц

Выберите таблицу или её ячейки для открытия контекстной вкладки таблицы. Средство выбора границ предлагает все, внешние, внутренние, отдельные границы или их отсутствие, а также цвет, толщину и стиль линий. Эти элементы предоставляет UniverDocsTableUIPlugin.

Редактирование, история и совместная работа

Сеттеры и структурные изменения таблиц выполняются командами и поддерживают отмену, повтор и совместную работу. setTableStyle() объединяет фон и границы в одну запись истории. setColumnType() также синхронизируется и отменяется; тип следует за перемещаемым столбцом. setCellText() заменяет всё значение ячейки: одновременные замены используют атомарное разрешение конфликтов, а посимвольное редактирование — текстовый OT. Операция, отклонённая заблокированным элементом управления содержимым, возвращает false, не расходуя историю.