표

Plugin 정보
Headless 지원

고급 표 기능은 셀 스타일 지정, 테두리 사용자 지정, 행과 열 조작, 데이터 입력 등 Univer Docs를 위한 풍부한 표 편집 기능을 제공합니다.

소개

Univer Docs의 고급 표로 다음 작업을 할 수 있습니다.

  • 프로그래밍 방식으로 표 삽입: 지정한 크기의 표를 만듭니다.
  • 구조 조작: 행과 열을 추가, 삭제, 이동합니다.
  • 셀 스타일 지정: 테두리, 배경, 텍스트 서식을 적용합니다.
  • 셀 병합 및 분할: 복잡한 레이아웃을 위해 셀을 결합합니다.

플러그인 모드

설치

Shell
pnpm 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-uiUniverDocsTableUIPluginUniverDocsTableMobileUIPlugin

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')

표 테두리

표나 셀을 선택하면 상황별 표 탭이 나타납니다. 테두리 선택기에서 전체, 바깥쪽, 안쪽, 개별 가장자리 및 테두리 없음 프리셋을 선택하고 색상, 두께, 선 스타일을 조정할 수 있습니다. 이 컨트롤은 UniverDocsTableUIPlugin에서 제공합니다.

편집, 실행 취소, 공동 편집

표 Facade 설정과 구조 편집은 문서 명령을 사용하며 실행 취소/다시 실행과 공동 편집을 지원합니다. setTableStyle()은 배경과 테두리 변경을 한 기록으로 묶습니다. setColumnType()도 실행 취소 및 동기화를 지원하며 열 이동 시 유형도 따라갑니다. setCellText()는 셀 값 전체를 바꾸므로 동시 교체에는 원자 값 충돌 규칙을 사용하고 일반 문자 편집에는 텍스트 OT를 사용합니다. 잠긴 콘텐츠 컨트롤이 거부한 셀 편집은 false를 반환하며 기록을 소모하지 않습니다.

표 전체 정렬

Traditional 문서에서 표를 선택한 뒤 Ribbon의 표 정렬 메뉴로 페이지 본문 영역 안에서 왼쪽, 가운데, 오른쪽에 배치합니다. 셀 내부 텍스트가 아닌 표 전체 위치를 변경합니다. Modern 문서에서는 이 컨트롤이 비활성화됩니다.

값은 tableSource[tableId].align에 저장되며 실행 취소, 다시 실행, 저장을 지원합니다. 표 플러그인을 등록한 뒤 스냅샷에 있는 표 ID로 아래 공개 명령을 실행할 수도 있습니다. 잘못된 대상, 비활성 문서, Modern 문서에서는 false를 반환합니다.

TypeScript
import { DocsTableSetTableAlignCommand } from '@univerjs-pro/docs-table'import { TableAlignmentType } from '@univerjs/core'const aligned = await univerAPI.executeCommand(DocsTableSetTableAlignCommand.id, {  unitId: documentId,  tableId,  value: TableAlignmentType.CENTER,})

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.