사이냅 에디터에서 제공하는 표 템플릿 스타일 기능을 이용하면 더 빠르고 편리한 표 편집이 가능합니다.


설정

Key설명
editor.table.template.styles표 템플릿 스타일을 설정합니다.
editor.table.template.list보여줄 템플릿을 설정합니다.


editor.table.template.styles 설정

KeyType설명
template nameObject

표 템플릿 스타일을 정의합니다.

template name은 String 타입으로 설정할 수 있습니다.
기존 스타일을 덮어 씌우거나, 새로 지정할 수 있습니다.

















row

Object

행들의 스타일을 정의합니다.


head

Object

머리행의 스타일을 정의합니다.


index

Number

스타일을 적용할 행을 선택합니다.

ex) 0 → 첫번째 행에 스타일이 적용됩니다.

style

Object

표현할 스타일을 정의합니다.


color

String

글자색을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

backgroundColor

String

배경색을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

borders

Object

테두리의 스타일을 정의합니다.


top

Object

border-top 정의


type

String

테두리 스타일을 지정합니다.

지원하는 타입: [none | dotted | dashed | solid | double]

ex) 'solid'

테두리 스타일이 'double'일 경우, 테두리 두께(width)가 최소 3px 이상 일 때 표현됩니다.


width

Number

테두리 두께를 px 단위로 지정합니다.

1~10 사이의 값만 적용됩니다.

UI에는 테두리의 두께가 최대 1px 로 표현됩니다.
테이블 생성 시에는 설정한 테두리 두께로 표현됩니다.


color

String

테두리 색상을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

bottomObject

형태는 top과 같습니다.

설정하지 않으면 top이 적용됩니다.

leftObject

형태는 top과 같습니다.

설정하지 않으면 top이 적용됩니다.

rightObject

형태는 top과 같습니다.

설정하지 않으면 left → top 순서대로 적용됩니다.

highlight

Object

강조행의 스타일을 정의합니다.

head의 index 대신 isEven을 사용하여 스타일을 적용하며 이외에는 head와 같습니다.


isEven

Boolean

짝수행에 스타일을 적용할 지 여부입니다.

true: 짝수 행에 스타일을 적용합니다.
false: 홀수 행에 스타일을 적용합니다.

col

Object

열들의 스타일을 정의합니다.

형태는 row와 같습니다.

defaultStyle

Object

셀의 스타일을 정의합니다.

형태는 style과 같습니다.

tableStyle

Object

표의 스타일을 정의합니다.

형태는 style과 같습니다.


  • 잘못된 템플릿 설정 시, 템플릿이 보이지 않거나, 일부 스타일이 적용되지 않을 수 있습니다.
  • 스타일 우선순위는 다음과 같습니다.
    • headRow > headCol > highlightRow > highlightCol > defaultStyle

editor.table.template.list 설정

KeyType설명설정
popupArrayList

표 생성 팝업에서 보여줄 표 템플릿 리스트를 정의합니다.

이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다.


popup: [
    ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
    ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
]


dialogArrayList

표 속성 다이얼로그의 [스타일 & 제목 셀] 탭에서 보여줄 표 템플릿 리스트를 정의합니다.

이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다.


dialog: [
    ['Basic', 'Dashed', 'GrayScale', 'Zebra'],
    ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black'],
    ['Gray Column Header', 'Dashed Gray Column Header', 'Dual Header', 'Dashed Dual Header'],
    ['Gray Row Header', 'Dashed Gray Row Header', 'Sideless Black Row Header', 'Striped Black Row Header']
]



  • 각 배열에 4개 이상의 템플릿 입력 시 4번째까지의 템플릿 스타일만 표현됩니다.
  • 등록되지 않은 템플릿 key 추가 시 표현되지 않습니다.

기본 스타일 종류

BasicDashedGrayScaleZebra

SidelessSideless ZebraSideless GrayScaleSideless Black

Gray Column HeaderDashed Gray Column HeaderDual HeaderDashed Dual Header

Gray Row HeaderDashed Gray Row HeaderSideless Black RowStriped Black Row Header

상세설정 보기

적용 예시


var synapEditorConfig = {
    'editor.table.template.styles': {
        'Dark Mode': {
            defaultStyle: {
                color: 'rgb(220, 220, 220)',
                backgroundColor: 'rgb(30, 30, 30)',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'rgb(60, 60, 60)'
                    }
                }
            }
        },
        'Rainbow': {
            row: {
                head: {
                    index: 0,
                    style: {
                        backgroundColor: 'red',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                },
                highlight: {
                    isEven: true,
                    style: {
                        backgroundColor: 'yellow',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                }
            },
            defaultStyle: {
                color: 'white',
                backgroundColor: 'blue',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    'editor.table.template.list': {
        popup: [
            ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
            ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header'],
            ['Dark Mode', 'Rainbow']
        ],
        dialog: [
            ['Basic', 'Dashed', 'GrayScale', 'Zebra'],
            ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black'],
            ['Gray Column Header', 'Dashed Gray Column Header', 'Dual Header', 'Dashed Dual Header'],
            ['Gray Row Header', 'Dashed Gray Row Header', 'Sideless Black Row Header', 'Striped Black Row Header'],
            ['Dark Mode', 'Rainbow']
        ]
    }
}


표 생성 팝업표 속성 다이얼로그 - [스타일 & 제목 셀] 탭