Views
Views describe how a table is projected for users. A view can hide or reorder fields, filter records, sort records, group records, and define type-specific configuration for grid, kanban, calendar, gantt, or gallery rendering.
View snapshot
| Property | Type | Description |
|---|---|---|
| id | string | View id. |
| tableId | string | Owning table id. |
| name | string | View name. |
| type | BaseViewType | grid, kanban, calendar, gantt, gallery, pivot. |
| fieldOrder? | string[] | Field order in this view. |
| fieldSettings? | Record\<string, IViewFieldSetting\> | Per-field visibility, width, and card settings. |
| filter? | `IFilterConfig | null` |
| sort? | ISortConfig[] | Sort rules. |
| group? | IGroupConfig[] | Group rules. |
| config | ViewSpecificConfig | Type-specific view configuration. |
View types
| Type | Use case |
|---|---|
grid | Spreadsheet-like table editing. |
kanban | Cards grouped by a select, person, group, text, or date field. |
calendar | Records positioned by date fields. |
gantt | Timeline planning with start and end date fields. |
gallery | Card layout for visual or content-heavy records. |
pivot | Summaries and charts through the dashboard plugin. |
Create a view
TypeScript
const view = table.createView('Kanban', univerAPI.Enum.BaseViewType.Kanban)Configure filtering and sorting
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 },])Field visibility and width
TypeScript
view.setFieldVisible('internalNotes', false)view.setFieldWidth('title', 280)How is this guide?