Таблицы

Подключение поддержки таблиц

Поддержка таблиц в Slides разделена на пакет модели и пакет UI:

import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)

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

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

Назначение пакетов

• @univerjs-pro/slides-table хранит элементы таблиц в модели слайда и предоставляет facade API для операций с таблицами.
• @univerjs-pro/slides-table-ui добавляет браузерный интерфейс редактирования, интеграцию с рендерингом, управление выделением и операции контекстного меню. Он также предоставляет @univerjs-pro/slides-table-ui/locale/* и @univerjs-pro/slides-table-ui/lib/index.css.

Выбор среды выполнения

В браузерном редакторе используйте оба пакета. Для обработки в Node.js импортируйте только пакет модели, если браузерный рендеринг не требуется.

univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)

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

Стабильные цвета таблиц

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

Facade API

Импортируйте точку входа facade, чтобы добавить методы таблиц в FSlide:

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

Создание таблицы из обычных текстовых данных:

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData(  [    ['Quarter', 'Owner', 'Status'],    ['Q1', 'Sales', 'Done'],    ['Q2', 'Marketing', 'In progress'],  ],  {    id: 'status-table',    rowHeight: 42,    columnWidth: 160,  },)

Используйте конструктор таблиц, когда требуется явно управлять компоновкой:

const tableInfo = fSlide.newTable()  .setValues([    ['Metric', 'Value'],    ['Revenue', '$120K'],  ])  .setRows(2)  .setColumns(2)  .setAbsolutePosition(80, 120)  .setSize(420, 180)  .build()const table = fSlide.insertTable(tableInfo)

Чтение и изменение ячеек таблицы:

const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) {  console.log(table.describe())  console.log(table.getCellText(0, 0))  table.getCell(1, 2)?.setText('Blocked')  table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}

Изменение или удаление существующей таблицы:

const table = fSlide.getTableById('status-table')if (table) {  const nextTableInfo = table.toBuilder()    .setValues([      ['Quarter', 'Owner', 'Status'],      ['Q1', 'Sales', 'Done'],      ['Q2', 'Marketing', 'Blocked'],    ])    .setSize(480, 200)    .build()  fSlide.updateTable(nextTableInfo)  fSlide.removeTable(table)}

Индексы строк и столбцов таблицы начинаются с нуля. Число строк и столбцов в конструкторе увеличивается в соответствии с переданными значениями, поэтому для простых таблиц setValues() можно использовать как единственный источник данных.