TableBlock

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

StreamField의 TableBlock 구성 요소, 행 헤더, 열 헤더, 캡션 필드 - 그리고 편집 가능한 테이블

설치

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

INSTALLED_APPS = [
    ...

    "wagtail.contrib.table_block",
]

기본 사용법

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

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

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

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

{% load wagtailcore_tags %}

{% include_block page.body %}

또는:

{% load wagtailcore_tags %}

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

고급 사용법

기본 구성

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

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_options 사전의 모든 키는 handsontable 옵션에 매핑됩니다. 이러한 설정은 Wagtail에서 테이블의 동작을 변경하는 데 사용할 수 있습니다. 다음 옵션을 사용할 수 있습니다.

  • minSpareRows - 빈 그리드 끝에 추가할 행 수입니다. 기본 설정은 0입니다.

  • startRows - 새 테이블의 기본 행 수입니다.

  • startCols - 새 테이블의 기본 열 수입니다.

  • colHeaders - True 또는 False 로 설정할 수 있습니다. 이 설정은 새 테이블을 열 헤더와 함께 생성해야 하는지 여부를 지정합니다. 참고: 이는 새로 생성된 테이블의 동작만 설정합니다. 페이지 편집기는 Wagtail 관리자의 테이블 편집기에서 “열 헤더” 확인란을 선택하여 이를 재정의할 수 있습니다.

  • rowHeaders - colHeaders 와 동일하게 작동하여 새 테이블을 첫 번째 열을 행 헤더로 생성해야 하는지 여부를 지정합니다. colHeaders 와 마찬가지로 이 옵션은 Wagtail 관리자의 페이지 편집기에서 재정의할 수 있습니다.

  • contextMenu - Handsontable 마우스 오른쪽 버튼 메뉴를 활성화 또는 비활성화합니다. 기본적으로 True 로 설정됩니다. 또는 특정 옵션이 있는 목록 또는 사전을 제공할 수 있습니다.

  • editor - 테이블 셀에 사용되는 편집기를 정의합니다. 기본 설정은 텍스트입니다.

  • stretchH - 테이블의 기본 가로 크기 조정을 설정합니다. 옵션에는 ‘none’, ‘last’, ‘all’이 있습니다. 기본적으로 TableBlock은 열의 균일한 크기 조정을 위해 ‘all’을 사용합니다.

  • height - 그리드의 기본 높이입니다. 기본적으로 TableBlock은 편집기에서 새 테이블의 최적 모양을 위해 높이를 108 로 설정합니다. 이는 startRows 가 3 으로 설정된 테이블에 최적화되어 있습니다. 구성에서 startRows 수를 변경하면 편집기에서 기본 모양을 개선하기 위해 height 설정을 변경해야 할 수 있습니다.

  • language - 기본 언어 설정입니다. 기본적으로 TableBlock은 django.utils.translation.get_language 에서 언어를 가져오려고 시도합니다. 필요한 경우 이 설정을 재정의할 수 있습니다.

  • renderer - Handsontable이 테이블 셀의 콘텐츠를 렌더링하는 데 사용하는 기본 설정입니다.

  • autoColumnSize - autoColumnSize 플러그인을 활성화 또는 비활성화합니다. TableBlock 기본 설정은 False 입니다.

  • mergeCells - True 또는 False 로 설정할 수 있으며, 셀 병합이 허용되는지 여부를 결정합니다. contextMenu 옵션에도 'mergeCells' 를 추가해야 합니다.

handsontable 옵션의 전체 목록은 Handsontable 웹사이트에서 찾을 수 있습니다.

기본 table_options 변경

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

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

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)