# 뷰

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

같은 테이블을 여러 뷰로 표시하며 전환해도 레코드가 복제되지 않습니다. 다음 예시는 기존 `table`을 사용합니다. 날짜와 그룹 필드를 먼저 만들고 ID를 실제 값으로 바꾸세요.



## 뷰 만들기

```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' },
    },
  },
)
```

## UI에서 뷰 활성화

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

## 뷰 규칙 구성

```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 },
  ],
})
```

기본 테이블 스키마를 변경하지 않고 뷰 수준의 필드 설정을 사용하여 표시 여부, 너비, 카드 표시 방식을 지정할 수 있습니다.

## 달력 날짜

달력에는 시작 날짜가, 간트에는 종료 날짜도 필요합니다. 간트는 근무일, 진행률, 의존성을 지원합니다. Gallery는 `card`로 제목과 표시 필드를 설정합니다. Pivot 집계와 차트에는 [대시보드 플러그인](https://docs.univer.ai/ko-KR/guides/bases/features/dashboard.md)이 필요합니다.

```ts
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, {
  view: {
    config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' },
  },
})
```

## 정렬 및 필드 표시

필터, 정렬, 그룹, 표시 설정은 현재 뷰에 속하며 원본 레코드나 필드를 삭제하지 않습니다.

```ts
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])
grid.setFieldVisible('internalNotes', false)
grid.setFieldWidth('title', 280)
```

## 조건부 색상

점수가 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',
}])
```

배열 순서가 우선순위입니다. `[]`로 초기화합니다. 셀, 행, 열을 지원하며 열 색상은 조건 없이 적용됩니다.