Представления
Представления определяют, как таблица отображается для пользователей. В представлении можно скрывать поля и менять их порядок, фильтровать, сортировать и группировать записи, а также задавать конфигурацию для отрисовки в виде таблицы, канбан-доски, календаря, диаграммы Ганта или галереи.
Снимок представления
| Свойство | Тип | Описание |
|---|---|---|
| id | string | Идентификатор представления. |
| tableId | string | Идентификатор таблицы, которой принадлежит представление. |
| name | string | Название представления. |
| type | BaseViewType | grid, kanban, calendar, gantt, gallery, pivot. |
| fieldOrder? | string[] | Порядок полей в этом представлении. |
| fieldSettings? | Record\<string, IViewFieldSetting\> | Настройки видимости, ширины и карточки для каждого поля. |
| filter? | `IFilterConfig | null` |
| sort? | ISortConfig[] | Правила сортировки. |
| group? | IGroupConfig[] | Правила группировки. |
| config | ViewSpecificConfig | Конфигурация представления, зависящая от его типа. |
Типы представлений
| Тип | Сценарий использования |
|---|---|
grid | Редактирование таблицы в формате электронной таблицы. |
kanban | Карточки, сгруппированные по полю выбора, участника, группы, текста или даты. |
calendar | Записи, расположенные в соответствии с полями даты. |
gantt | Планирование на временной шкале с полями даты начала и окончания. |
gallery | Карточная раскладка для записей с большим объёмом визуальных материалов или содержимого. |
pivot | Агрегация и диаграммы через плагин панелей. |
Создание представления
TypeScript
const view = table.createView('Kanban', univerAPI.Enum.BaseViewType.Kanban)Настройка фильтрации и сортировки
TypeScript
view.setFilter({ conjunction: univerAPI.Enum.BaseFilterConjunction.AND, conditions: [ { fieldId: 'status', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: 'In progress', }, ],})view.setSort([ { fieldId: 'dueDate', direction: univerAPI.Enum.BaseSortDirection.ASC },])Видимость и ширина полей
TypeScript
view.setFieldVisible('internalNotes', false)view.setFieldWidth('title', 280)Насколько полезно это руководство?