표
고급 표 기능은 셀 스타일 지정, 테두리 사용자 지정, 행과 열 조작, 데이터 입력 등 Univer Docs를 위한 풍부한 표 편집 기능을 제공합니다.
소개
Univer Docs의 고급 표로 다음 작업을 할 수 있습니다.
- 프로그래밍 방식으로 표 삽입: 지정한 크기의 표를 만듭니다.
- 구조 조작: 행과 열을 추가, 삭제, 이동합니다.
- 셀 스타일 지정: 테두리, 배경, 텍스트 서식을 적용합니다.
- 셀 병합 및 분할: 복잡한 레이아웃을 위해 셀을 결합합니다.
플러그인 모드
설치
Shell
pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui사용법
TypeScript
import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIEnUS from '@univerjs-pro/docs-table-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsTableUIEnUS, ), },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)Univer 상용 라이선스가 있다면 구성 방법은 클라이언트에서 라이선스 사용하기를 참고하세요.
모바일 지원
먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.
| 패키지 | 데스크톱 등록 | 모바일 등록 |
|---|---|---|
@univerjs-pro/docs-table-ui | UniverDocsTableUIPlugin | UniverDocsTableMobileUIPlugin |
Facade API
API를 사용하기 전에 facade를 반드시 가져오세요.
TypeScript
import '@univerjs-pro/docs-table/facade'표 삽입하기
TypeScript
const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')데이터로 표 삽입하기
TypeScript
const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([ ['Name', 'Status'], ['Facade', 'Ready'],], { headerRowCount: 1 })모든 표 가져오기
TypeScript
const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []표 삭제하기
TypeScript
const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')이 가이드는 어떠셨나요?