Представления
Одна таблица может иметь несколько представлений; переключение не копирует записи. Примеры используют существующую table: создайте поля дат и группировки, затем замените ID реальными.
Одна таблица, разные представления
Измените статус курса Sheets и переключите представление. Все используют одни и те же записи.
Пример учебного плана · Сентябрь 2026
| Курс | Статус | Дата |
|---|---|---|
| Sheets | Запланировано | |
| Docs | В процессе | |
| Slides | Готово | |
| Bases | В процессе |
Общие записи: 4 · Sheets: Запланировано
Создание представлений
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView( 'By status', univerAPI.Enum.BaseViewType.Kanban, { view: { config: { groupFieldId: 'status' }, }, },)Активация представления в интерфейсе
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())Настройка правил представления
kanban.setGroup([ { fieldId: 'status', direction: univerAPI.Enum.BaseSortDirection.ASC },])kanban.setFilter({ conjunction: univerAPI.Enum.BaseFilterConjunction.AND, conditions: [ { fieldId: 'archived', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: false }, ],})Настройки полей на уровне представления позволяют управлять видимостью, шириной и отображением карточек, не меняя схему исходной таблицы.
Даты календаря
Календарю нужна дата начала, а диаграмме Ганта — также дата окончания. Гант поддерживает рабочие дни, прогресс и зависимости. Gallery использует card для заголовка и полей. Сводкам и диаграммам Pivot нужен плагин панелей.
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})Сортировка и отображение полей
Фильтры, сортировка, группировка и отображение принадлежат текущему представлению и не удаляют исходные записи или поля.
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)Условная окраска
Выделите записи со значением выше 80:
const score = table.addField('Score', univerAPI.Enum.BaseFieldType.Number)grid.setConditionalColorRules([{ id: 'high-score', target: univerAPI.Enum.BaseConditionalColorTarget.ROW, fieldId: score.getId(), operator: univerAPI.Enum.BaseConditionalColorOperator.GREATER_THAN, operand: 80, color: '#dcfce7',}])Приоритет задаётся порядком в массиве. [] очищает правила. Поддерживаются ячейки, строки и столбцы; столбцы окрашиваются без условия.
Насколько полезно это руководство?