[Javascript] 2. Toast UI Grid 셀 합치기(+ header 합치기)

 

이전 글에서 Toast UI Grid의 기초를 확인하였다.

이번 글에도 Data를 임의로 만들기 귀찮으니 무료로 공유되는 api를 사용할 것이다.

api 사용법을 모르면 이전글을 확인하자.

2024.03.14 - [프로그래밍/Javascript] - [javascript] 1. Toast UI Grid 기초(+API 사용법)

[javascript] 1. Toast UI Grid 기초(+API 사용법)

 

header 합치기

먼저 Header cell을 합치는 방법은 header의 하위 속성 "complexColumns"를 사용하는 방법이다.

complexColumns: [
    {
        header: [보여질 문자열],
        name: [속성 이름],
        childNames: [병합할 셀 속성]
    },
]

 

See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

 

 

 

Body 합치기

Body의 Cell을 합치는 방법은 컬럼에서 rowSpan속성값을 이용하는 것이다. 

해당 속성값을 이용하면 인접하는 행의 셀을 합친다.

 

See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

 

 

또 다른 방법은 Data에서 attributes 속성값을 이용하는 것이다.

_attributes에서 rowSpan 속성을 추가할 수 있는데, 해당 방법은 Toast UI의 Example에서 확인하자.

https://nhn.github.io/tui.grid/latest/tutorial-example06-attributes