# Views

- Human documentation: [https://docs.univer.ai/guides/bases/features/core/views](https://docs.univer.ai/guides/bases/features/core/views)

- Agent Markdown: [https://docs.univer.ai/guides/bases/features/core/views.md](https://docs.univer.ai/guides/bases/features/core/views.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [bases/features/core/views.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/features/core/views.mdx)

---

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](https://docs.univer.ai/guides/bases/features/dashboard.md) |

The examples use an existing `table`. Replace field IDs with real fields and create date/grouping fields before configuring their views.

## Create views

```ts
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

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

## Configure view rules

```ts
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

```ts
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

```ts
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:

```ts
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.