表格
註冊表格能力
Slides 表格能力拆分為模型套件和 UI 套件：
TypeScript
import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)行動裝置支援
先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。
| 套件 | 桌面版註冊 | 行動版註冊 |
|---|---|---|
@univerjs-pro/slides-table-ui | UniverSlidesTableUIPlugin | UniverSlidesTableMobileUIPlugin |
套件職責
@univerjs-pro/slides-table將表格元素接入 slide 模型，並提供表格相關 facade API。@univerjs-pro/slides-table-ui提供瀏覽器編輯 UI、渲染整合、選取行為和右鍵選單操作。
Runtime 選擇
瀏覽器編輯器使用兩個套件。Node.js 處理場景通常只需要模型套件，除非你還需要瀏覽器渲染能力。
TypeScript
univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)如果需要開啟或匯入可能包含表格元素的 deck，請在處理前註冊表格能力，否則 runtime 無法完整解釋這些元素。
穩定的表格色彩
插入表格或變更表格樣式時，外掛會將目前主題色盤解析成該表格自有的主題快照。因此，即使全域 Univer 主題發生變化，既有表格仍會保留原本的色彩；選取其他表格樣式時則會建立新的快照。標準 Facade 操作會自動管理這個過程。
Facade API
匯入 facade 入口後，FSlide 會增加表格相關方法：
TypeScript
import '@univerjs-pro/slides-table/facade'從純文字二維陣列建立表格：
TypeScript
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData( [ ['Quarter', 'Owner', 'Status'], ['Q1', 'Sales', 'Done'], ['Q2', 'Marketing', 'In progress'], ], { id: 'status-table', rowHeight: 42, columnWidth: 160, },)如果需要明確控制位置和尺寸，可以使用 table builder：
TypeScript
const tableInfo = fSlide.newTable() .setValues([ ['Metric', 'Value'], ['Revenue', '$120K'], ]) .setRows(2) .setColumns(2) .setAbsolutePosition(80, 120) .setSize(420, 180) .build()const table = fSlide.insertTable(tableInfo)讀取和更新表格儲存格：
TypeScript
const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) { console.log(table.describe()) console.log(table.getCellText(0, 0)) table.getCell(1, 2)?.setText('Blocked') table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}更新或刪除既有表格：
TypeScript
const table = fSlide.getTableById('status-table')if (table) { const nextTableInfo = table.toBuilder() .setValues([ ['Quarter', 'Owner', 'Status'], ['Q1', 'Sales', 'Done'], ['Q2', 'Marketing', 'Blocked'], ]) .setSize(480, 200) .build() fSlide.updateTable(nextTableInfo) fSlide.removeTable(table)}表格的行列索引從 0 開始。Builder 的行列數量會自動擴展以容納傳入的值，因此對於簡單表格，可以把 setValues() 作為資料來源。
你覺得這篇文檔如何？