# ビュー

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [bases/features/core/views.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/features/core/views.ja-JP.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/ja-JP/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',
}])
```

配列順が優先順位です。`[]` で解除できます。セル・行・列を対象にでき、列の色は無条件に適用されます。