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.

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

TypeScript

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

TypeScript

const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())

Configure view rules

TypeScript

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

TypeScript

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

TypeScript

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:

TypeScript

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?