Views
Use multiple views of the same table, such as a grid for entering tasks and a kanban for tracking status. Switching views does not copy records.
One table, multiple views
Change the Sheets course status, then switch views. Every view uses the same records.
Example learning schedule · September 2026
| Course | Status | Date |
|---|---|---|
| Sheets | Planned | |
| Docs | In progress | |
| Slides | Done | |
| Bases | In progress |
Shared records: 4 · Sheets: Planned
| View | Use case | Main configuration |
|---|---|---|
Grid | Edit, filter, and sort rows | Frozen fields, row height, field widths |
Kanban | Group by status or owner | groupFieldId |
Calendar | Schedule records by date | startDateFieldId, optional end date |
Gantt | Plan duration and dependencies | Start/end dates, optional progress and dependency fields |
Gallery | Display images and content cards | Cover, title, and card fields |
Pivot | Summaries and charts | Requires the dashboard plugin |
The examples use an existing table. Replace field IDs with real fields and create date/grouping fields before configuring their views.
Create views
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView( 'By status', univerAPI.Enum.BaseViewType.Kanban, { view: { config: { groupFieldId: 'status' }, }, },)Activate a view in the UI
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())Configure view rules
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 }, ],})Use view-level field settings for visibility, widths, and card display without changing the underlying table schema.
Calendar dates
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})Calendars need a start-date field. Gantt also requires an end-date field and supports working days, progress, and dependencies. Gallery uses card to configure its title and displayed fields.
Sorting and field display
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)Filters, sorting, grouping, and field display belong to the current view. They do not delete underlying records or fields.
Conditional coloring
Highlight records with scores above 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',}])Rules follow array priority order. Pass [] to clear them. Cell, row, and column targets are supported; column coloring is unconditional.
How is this guide?