# 표

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

#### Package metadata

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

## 표 기능 등록

Slides 표 기능은 모델 패키지와 UI 패키지로 나뉩니다.

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

## 모바일 지원

먼저 [모바일 에디터](https://docs.univer.ai/ko-KR/guides/slides/getting-started/installation.md#mobile-support)를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 **문서를 열기 전에** 완료하세요. 모델 플러그인, 스타일, 언어 파일과 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 처리에서는 브라우저 렌더링도 필요하지 않은 한 모델 패키지만 가져오면 됩니다.

```ts
univer.registerPlugin(UniverSlidesPlugin)
univer.registerPlugin(UniverSlidesTablePlugin)
```

표 요소가 포함될 수 있는 deck을 열거나 가져오기 전에 표 기능을 등록하세요. 그렇지 않으면 런타임이 해당 요소를 완전히 해석할 수 없습니다.

## 안정적인 표 색상

표를 삽입하거나 스타일을 변경하면 플러그인이 현재 테마 팔레트를 표가 소유하는 스냅샷으로 해석합니다. 따라서 전역 Univer 테마가 바뀌어도 기존 표의 색상은 유지되며, 다른 표 스타일을 선택하면 새 스냅샷이 생성됩니다. 표준 Facade 작업에서는 이 과정을 자동으로 관리합니다.

## Facade API

facade 항목을 가져와 `FSlide`에 표 메서드를 추가합니다.

```ts
import '@univerjs-pro/slides-table/facade'
```

일반 텍스트 데이터로 표를 만듭니다.

```ts
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를 사용하세요.

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

표 셀을 읽고 업데이트합니다.

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

기존 표를 업데이트하거나 제거합니다.

```ts
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()`를 데이터 원본으로 사용할 수 있습니다.