# TableBlock

TableBlock 모듈은 StreamField용 HTML 테이블 블록 유형을 제공합니다. 이 모듈은 [handsontable 6.2.2](https://github.com/handsontable/handsontable/tree/6.2.2)(MIT 라이선스에 따라 배포됨)를 사용하여 사용자에게 Wagtail에서 HTML 테이블을 만들고 편집할 수 있는 기능을 제공합니다. 테이블 블록은 접근성을 위한 캡션 필드를 제공합니다.

![StreamField의 TableBlock 구성 요소, 행 헤더, 열 헤더, 캡션 필드 - 그리고 편집 가능한 테이블](../../_static/images/screen40_table_block.png)

## 설치

INSTALLED_APPS에 `"wagtail.contrib.table_block"` 을 추가합니다.

```python
INSTALLED_APPS = [
    ...

    "wagtail.contrib.table_block",
]
```

## 기본 사용법

설치 후 TableBlock 모듈은 Wagtail 코어의 다른 StreamField 블록과 유사하게 사용할 수 있습니다.

`wagtail.contrib.table_block.blocks` 에서 TableBlock을 가져와 StreamField 선언에 추가합니다.

```python
class DemoStreamBlock(StreamBlock):
    ...
    table = TableBlock()
```

그런 다음 페이지 템플릿에서 `{% include_block %}` 태그(개별 블록 또는 StreamField 값 전체에 호출됨)는 발견하는 모든 테이블 블록을 HTML `<table>` 요소로 렌더링합니다.

```html+django
{% load wagtailcore_tags %}

{% include_block page.body %}
```

또는:

```html+django
{% load wagtailcore_tags %}

{% for block in page.body %}
    {% if block.block_type == 'table' %}
        {% include_block block %}
    {% else %}
        {# 다른 블록 유형에 대한 렌더링 #}
    {% endif %}
{% endfor %}
```

## 고급 사용법

### 기본 구성

TableBlock을 정의할 때 Wagtail은 선택적 `table_options` 사전을 전달하는 기능을 제공합니다. 기본 TableBlock 사전은 다음과 같습니다.

```python
default_table_options = {
    'minSpareRows': 0,
    'startRows': 3,
    'startCols': 3,
    'colHeaders': False,
    'rowHeaders': False,
    'contextMenu': [
        'row_above',
        'row_below',
        '---------',
        'col_left',
        'col_right',
        '---------',
        'remove_row',
        'remove_col',
        '---------',
        'undo',
        'redo'
    ],
    'editor': 'text',
    'stretchH': 'all',
    'height': 108,
    'language': language,
    'renderer': 'text',
    'autoColumnSize': False,
}
```

(table_block_options)=

### 구성 옵션

`table_options` 사전의 모든 키는 [handsontable](https://handsontable.com/) 옵션에 매핑됩니다. 이러한 설정은 Wagtail에서 테이블의 동작을 변경하는 데 사용할 수 있습니다. 다음 옵션을 사용할 수 있습니다.

-   [minSpareRows](https://handsontable.com/docs/6.2.2/Options.html#minSpareRows) - 빈 그리드 끝에 추가할 행 수입니다. 기본 설정은 0입니다.
-   [startRows](https://handsontable.com/docs/6.2.2/Options.html#startRows) - 새 테이블의 기본 행 수입니다.
-   [startCols](https://handsontable.com/docs/6.2.2/Options.html#startCols) - 새 테이블의 기본 열 수입니다.
-   [colHeaders](https://handsontable.com/docs/6.2.2/Options.html#colHeaders) - `True` 또는 `False` 로 설정할 수 있습니다. 이 설정은 새 테이블을 열 헤더와 함께 생성해야 하는지 여부를 지정합니다. **참고:** 이는 새로 생성된 테이블의 동작만 설정합니다. 페이지 편집기는 Wagtail 관리자의 테이블 편집기에서 "열 헤더" 확인란을 선택하여 이를 재정의할 수 있습니다.
-   [rowHeaders](https://handsontable.com/docs/6.2.2/Options.html#rowHeaders) - `colHeaders` 와 동일하게 작동하여 새 테이블을 첫 번째 열을 행 헤더로 생성해야 하는지 여부를 지정합니다. `colHeaders` 와 마찬가지로 이 옵션은 Wagtail 관리자의 페이지 편집기에서 재정의할 수 있습니다.
-   [contextMenu](https://handsontable.com/docs/6.2.2/Options.html#contextMenu) - Handsontable 마우스 오른쪽 버튼 메뉴를 활성화 또는 비활성화합니다. 기본적으로 `True` 로 설정됩니다. 또는 [특정 옵션](https://handsontable.com/docs/6.2.2/demo-context-menu.html#page-specific)이 있는 목록 또는 사전을 제공할 수 있습니다.
-   [editor](https://handsontable.com/docs/6.2.2/Options.html#editor) - 테이블 셀에 사용되는 편집기를 정의합니다. 기본 설정은 텍스트입니다.
-   [stretchH](https://handsontable.com/docs/6.2.2/Options.html#stretchH) - 테이블의 기본 가로 크기 조정을 설정합니다. 옵션에는 'none', 'last', 'all'이 있습니다. 기본적으로 TableBlock은 열의 균일한 크기 조정을 위해 'all'을 사용합니다.
-   [height](https://handsontable.com/docs/6.2.2/Options.html#height) - 그리드의 기본 높이입니다. 기본적으로 TableBlock은 편집기에서 새 테이블의 최적 모양을 위해 높이를 `108` 로 설정합니다. 이는 `startRows` 가 `3` 으로 설정된 테이블에 최적화되어 있습니다. 구성에서 `startRows` 수를 변경하면 편집기에서 기본 모양을 개선하기 위해 `height` 설정을 변경해야 할 수 있습니다.
-   [language](https://handsontable.com/docs/6.2.2/Options.html#language) - 기본 언어 설정입니다. 기본적으로 TableBlock은 `django.utils.translation.get_language` 에서 언어를 가져오려고 시도합니다. 필요한 경우 이 설정을 재정의할 수 있습니다.
-   [renderer](https://handsontable.com/docs/6.2.2/Options.html#renderer) - Handsontable이 테이블 셀의 콘텐츠를 렌더링하는 데 사용하는 기본 설정입니다.
-   [autoColumnSize](https://handsontable.com/docs/6.2.2/Options.html#autoColumnSize) - `autoColumnSize` 플러그인을 활성화 또는 비활성화합니다. TableBlock 기본 설정은 `False` 입니다.
-   [mergeCells](https://handsontable.com/docs/6.2.0/Options.html#mergeCells) - `True` 또는 `False` 로 설정할 수 있으며, 셀 병합이 허용되는지 여부를 결정합니다. `contextMenu` 옵션에도 `'mergeCells'` 를 추가해야 합니다.

[handsontable 옵션의 전체 목록](https://handsontable.com/docs/6.2.2/Options.html)은 Handsontable 웹사이트에서 찾을 수 있습니다.

### 기본 `table_options` 변경

새 TableBlock을 선언할 때 새 `table_options` 사전을 전달하기만 하면 기본 테이블 옵션을 변경할 수 있습니다.

```python
new_table_options = {
    'minSpareRows': 0,
    'startRows': 6,
    'startCols': 4,
    'colHeaders': False,
    'rowHeaders': False,
    'contextMenu': True,
    'editor': 'text',
    'stretchH': 'all',
    'height': 216,
    'language': 'en',
    'renderer': 'text',
    'autoColumnSize': False,
}

class DemoStreamBlock(StreamBlock):
    ...
    table = TableBlock(table_options=new_table_options)
```

### 셀 정렬 지원

셀 선택에 대한 정렬을 설정할 수 있는 사용자 지정 `contextMenu` 를 설정하여 `alignment` 옵션을 활성화할 수 있습니다.
handsontable에서 설정한 HTML 클래스는 렌더링된 블록에 유지됩니다. 그런 다음 자체 사용자 지정 CSS 규칙을 적용하여 스타일을 유지할 수 있습니다. 해당 클래스 이름은 다음과 같습니다.

-   가로: `htLeft`, `htCenter`, `htRight`, `htJustify`
-   세로: `htTop`, `htMiddle`, `htBottom`

```python
new_table_options = {
    'contextMenu': [
        'row_above',
        'row_below',
        '---------',
        'col_left',
        'col_right',
        '---------',
        'remove_row',
        'remove_col',
        '---------',
        'undo',
        'redo',
        '---------',
        'alignment',
    ],
}

class DemoStreamBlock(StreamBlock):
    ...
    table = TableBlock(table_options=new_table_options)
```