표
표 기능 등록
Slides 표 기능은 모델 패키지와 UI 패키지로 나뉩니다.
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, 렌더링 통합, 선택 동작, 컨텍스트 메뉴 작업을 추가합니다. 또한@univerjs-pro/slides-table-ui/locale/*와@univerjs-pro/slides-table-ui/lib/index.css도 제공합니다.
런타임 선택
브라우저 편집기에서는 두 패키지를 모두 사용하세요. Node.js 처리에서는 브라우저 렌더링도 필요하지 않은 한 모델 패키지만 가져오면 됩니다.
univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)표 요소가 포함될 수 있는 deck을 열거나 가져오기 전에 표 기능을 등록하세요. 그렇지 않으면 런타임이 해당 요소를 완전히 해석할 수 없습니다.
안정적인 표 색상
표를 삽입하거나 스타일을 변경하면 플러그인이 현재 테마 팔레트를 표가 소유하는 스냅샷으로 해석합니다. 따라서 전역 Univer 테마가 바뀌어도 기존 표의 색상은 유지되며, 다른 표 스타일을 선택하면 새 스냅샷이 생성됩니다. 표준 Facade 작업에서는 이 과정을 자동으로 관리합니다.
Facade API
facade 항목을 가져와 FSlide에 표 메서드를 추가합니다.
import '@univerjs-pro/slides-table/facade'일반 텍스트 데이터로 표를 만듭니다.
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, },)레이아웃을 명시적으로 제어해야 할 때는 표 builder를 사용하세요.
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)표 셀을 읽고 업데이트합니다.
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')}기존 표를 업데이트하거나 제거합니다.
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()를 데이터 원본으로 사용할 수 있습니다.
이 가이드는 어떠셨나요?