# 표

- Human documentation: [https://docs.univer.ai/ko-KR/guides/boards/features/tables](https://docs.univer.ai/ko-KR/guides/boards/features/tables)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/boards/features/tables.md](https://docs.univer.ai/ko-KR/guides/boards/features/tables.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [boards/features/tables.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/tables.ko-KR.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards-table",
      "facade": "@univerjs-pro/boards-table/facade"
    },
    {
      "client": "@univerjs-pro/boards-table-ui",
      "locale": "@univerjs-pro/boards-table-ui/locale/ko-KR",
      "style": "@univerjs-pro/boards-table-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

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

## 표 지원 등록하기

```ts
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)
```

## 모바일 지원

먼저 [모바일 에디터](https://docs.univer.ai/ko-KR/guides/boards/getting-started/installation.md#mobile-support)를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 **문서를 열기 전에** 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

| 패키지                             | 데스크톱 등록                     | 모바일 등록                            |
| ------------------------------- | --------------------------- | --------------------------------- |
| `@univerjs-pro/boards-table-ui` | `UniverBoardsTableUIPlugin` | `UniverBoardsTableMobileUIPlugin` |

## 패키지 역할

* `@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`와 보드 요소의 공통 필드가 저장됩니다. 표 페이로드는 표 플러그인에서 관리되며 보드 리소스를 통해 참조됩니다.

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