テーブル

Board のテーブル機能は、モデルパッケージと UI パッケージに分かれています。Board キャンバス上でテーブル要素を編集するブラウザーエディターには、両方のパッケージを登録してください。

テーブル機能の登録

import { UniverBoardsTablePlugin } from '@univerjs-pro/boards-table'import { UniverBoardsTableUIPlugin } from '@univerjs-pro/boards-table-ui'import BoardsTableUIEnUS from '@univerjs-pro/boards-table-ui/locale/en-US'import '@univerjs-pro/boards-table/facade'import '@univerjs-pro/boards-table-ui/lib/index.css'univer.registerPlugin(UniverBoardsTablePlugin)univer.registerPlugin(UniverBoardsTableUIPlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

各パッケージの役割

• @univerjs-pro/boards-table は、テーブル要素を Board モデルに統合します。
• @univerjs-pro/boards-table-ui は、Board キャンバスにテーブルのレンダリング機能と編集 UI を追加します。また、ブラウザーエディター向けに @univerjs-pro/boards-table-ui/locale/* と @univerjs-pro/boards-table-ui/lib/index.css も提供します。

スナップショットデータ

Board のテーブル要素には、tableId と Board 要素に共通するフィールドが保存されます。テーブルのペイロードはテーブルプラグインによって管理され、Board リソースを介して参照されます。

const table = board.insertTable({  left: 120,  top: 120,  width: 480,  height: 280,  rows: 3,  columns: 4,})if (!table) throw new Error('Cannot insert Board table')

table 要素を含むスナップショットを開く前に、テーブル機能を登録してください。

テーブル色を固定する

Board テーブルの挿入時またはスタイル変更時に、プラグインは解決済みのテーマパレットをそのテーブルとともに保存します。グローバル Univer テーマを変更しても既存のテーブル色は維持され、別のスタイルを選ぶとテーブル所有の新しいテーマスナップショットが作成されます。