ビュー
同じテーブルを複数のビューで表示でき、切り替えてもレコードは複製されません。以下は既存の table を使います。日付やグループ化用のフィールドを作成し、例の ID を置き換えてください。
1 つのテーブル、複数のビュー
Sheets コースの状態を変更してからビューを切り替えます。すべて同じレコードを使います。
学習計画の例 · 2026 年 9 月
| コース | 状態 | 日付 |
|---|---|---|
| Sheets | 未着手 | |
| Docs | 進行中 | |
| Slides | 完了 | |
| Bases | 進行中 |
共有レコード: 4 · Sheets: 未着手
ビューの作成
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' }, }, },)UI でビューをアクティブにする
TypeScript
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())ビューのルールを設定する
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 }, ],})基盤となるテーブルスキーマを変更せずに、ビュー単位のフィールド設定で表示／非表示、幅、カード表示を調整できます。
カレンダーの日付
カレンダーには開始日、ガントには終了日も必要です。ガントは稼働日、進捗、依存関係も扱えます。Gallery は card でタイトルと表示フィールドを設定します。Pivot の集計とチャートにはダッシュボードプラグインが必要です。
TypeScript
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})並べ替えとフィールド表示
フィルター、並べ替え、グループ化、表示設定は現在のビューに属し、元のレコードやフィールドを削除しません。
TypeScript
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)条件付きの色設定
スコアが 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',}])配列順が優先順位です。[] で解除できます。セル・行・列を対象にでき、列の色は無条件に適用されます。
このガイドはいかがですか？