표

보드의 표 지원은 모델 패키지와 UI 패키지로 나뉩니다. 보드 캔버스에서 편집 가능한 표 요소가 필요한 브라우저 편집기에는 두 패키지를 모두 등록하세요.

표 지원 등록하기

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은 표 요소를 보드 모델과 통합합니다.
• @univerjs-pro/boards-table-ui는 보드 캔버스에 표 렌더링 및 편집 UI를 추가합니다. 또한 브라우저 편집기를 위한 @univerjs-pro/boards-table-ui/locale/* 및 @univerjs-pro/boards-table-ui/lib/index.css도 제공합니다.

스냅샷 데이터

보드 표 요소에는 tableId와 보드 요소의 공통 필드가 저장됩니다. 표 페이로드는 표 플러그인에서 관리되며 보드 리소스를 통해 참조됩니다.

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 테마가 바뀌어도 기존 표의 색상은 유지되며, 다른 스타일을 선택하면 표가 소유하는 새 테마 스냅샷이 생성됩니다.