사이냅 에디터에서 제공하는 표 템플릿 스타일 기능을 이용하면 더 이용하면 더 빠르고 편리한 표 편집이 가능합니다.
설정
| keyKey | 설명 |
|---|
| editor.table.template.styles | 표 템플릿 스타일을 설정합니다. |
| editor.table.template.list | 보여줄 템플릿을 설정합니다. |
editor.table.template.styles 설정
keytype| Type | 설명 |
|---|
| template name | Object | 표 템플릿 스타일을 정의합니다. template name은 String 타입으로 설정할 수 있습니다.
기존 스타일을 덮어 씌우거나, 새로 지정할 수 있습니다. |
| row | Object | 행들의 스타일을 정의합니다. |
| head | Object | 머리행의 스타일을 정의합니다. |
| index | Number |
인자로 받은 인덱스(행 or 열)에 스타일을 적용할지 여부를 판단합니다 | 스타일을 적용할 행을 선택합니다. ex) 0 → 첫번째 행에 스타일이 적용됩니다. |
style | Object |
css로 수 있는 기존의 스타일 이외에도 추가할 수 있습니다.
color | String | 텍스트 색상 | backgroundColor | String | 배경 색상 |
| color | String | 글자색을 지정합니다. ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000' |
backgroundColor | String | 배경색을 지정합니다. ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000' |
borders | Object |
borders를 테두리의 스타일을 정의합니다. |
| top | Object | border-top 정의 |
style 스타일width | Number | 테두리 두께 |
color | String | 테두리 색상 |
| bottom | Object | 형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다. |
left | Object | 스타일을 지정합니다. 지원하는 타입: [none | dotted | dashed | solid | double] ex) 'solid' | Note |
|---|
테두리 스타일이 'double'일 경우, 테두리 두께(width)가 최소 3px 이상 일 때 표현됩니다. |
|
width | Number | 테두리 두께를 px 단위로 지정합니다. 1~10 사이의 값만 적용됩니다. | Note |
|---|
UI에는 테두리의 두께가 최대 1px 로 표현됩니다.
테이블 생성 시에는 설정한 테두리 두께로 표현됩니다. |
|
color | String | 테두리 색상을 지정합니다. ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000' |
| bottom | Object | 형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다. |
| left | Object | 형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다. |
| right | Object | 형태는 top과 같습니다. 설정하지 않으면 left → top 순서대로 적용됩니다. |
highlight | Object | 강조행의 스타일을 정의합니다. |
형태는 head의 index 대신 isEven을 사용하여 스타일을 적용하며 이외에는 head와 같습니다. |
| isEven | Boolean | 짝수행에 스타일을 적용할 지 여부입니다. true: 짝수 행에 스타일을 적용합니다.
false: 홀수 행에 스타일을 적용합니다. |
col | Object | 열들의 스타일을 정의합니다. 형태는 row와 같습니다. |
defaultStyle |
기본 셀 Object | 셀의 스타일을 정의합니다. 형태는 style과 같습니다. |
tableStyle |
기본 표 Object | 표의 스타일을 정의합니다. 형태는 style과 같습니다. |
기본 표 템플릿 스타일 종류
| Expand |
|---|
|
Style | Key | Config | 1 |  Image Removed
| Basic | Note |
|---|
|
- 잘못된 템플릿 설정 시, 템플릿이 보이지 않거나, 일부 스타일이 적용되지 않을 수 있습니다.
- 스타일 우선순위는 다음과 같습니다.
- headRow > headCol > highlightRow > highlightCol > defaultStyle
|
editor.table.template.list 설정
| Key | Type | 설명 | 설정 |
|
|---|
| popup | ArrayList | 표 생성 팝업에서 보여줄 표 템플릿 리스트를 정의합니다. 이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다. | |
...
...
...
Image Removed
...
| Code Block |
|---|
|
'Dashed': {
defaultStyle: {
borders: {
top: {
type: 'dashed',
width: 1,
color: 'black'
}
}
},
tableStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'GrayScale': {
row: {
highlight: {
index: 1,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'white'
}
}
}
}
},
defaultStyle: {
backgroundColor: 'lightgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'white'
}
}
}
} |
...
Image Removed
...
Zebra
| Code Block |
|---|
|
'Zebra': {
row: {
highlight: {
index: 1,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Sideless': {
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
},
left: {
type: 'none',
width: 0,
color: 'white'
}
}
},
tableStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Sideless Zebra': {
row: {
highlight: {
index: 0,
style: {
backgroundColor: 'lightgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
},
left: {
type: 'none',
width: 0,
color: 'white'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
},
left: {
type: 'none',
width: 0,
color: 'white'
}
}
},
tableStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Sideless GrayScale': {
row: {
highlight: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'none',
width: 0,
color: 'white'
}
}
}
}
},
defaultStyle: {
backgroundColor: 'lightgray',
borders: {
top: {
type: 'none',
width: 0,
color: 'white'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Sideless Black': {
defaultStyle: {
color: 'white',
backgroundColor: 'black',
borders: {
top: {
type: 'solid',
width: 1,
color: 'white'
},
left: {
type: 'none',
width: 0,
color: 'white'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Gray Column Header': {
col: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Gray Column Header': {
col: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Dual Header': {
row: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
col: {
head: {
index: 0,
style: {
backgroundColor: 'lightgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Dashed Dual Header': {
row: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
col: {
head: {
index: 0,
style: {
backgroundColor: 'lightgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'dashed',
width: 1,
color: 'black'
}
}
},
tableStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Gray Row Header': {
row: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
| Code Block |
|---|
|
'Dashed Gray Row Header': {
row: {
head: {
index: 0,
style: {
backgroundColor: 'darkgray',
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
}
},
defaultStyle: {
borders: {
top: {
type: 'dashed',
width: 1,
color: 'black'
}
}
},
tableStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black'
}
}
}
} |
...
Image Removed
...
...
Column Header', 'Gray Row Header', 'Dual Header'],
['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
] |
|  Image Added
|
| dialog | ArrayList | 표 속성 다이얼로그의 [스타일 & 제목 셀] 탭에서 보여줄 표 템플릿 리스트를 정의합니다. 이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다. |
| Code Block |
|---|
| 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']
] |
|  Image Added
|
| Note |
|---|
|
- 각 배열에 4개 이상의 템플릿 입력 시 4번째까지의 템플릿 스타일만 표현됩니다.
- 등록되지 않은 템플릿 key 추가 시 표현되지 않습니다.
|
기본 스타일 종류
Image Added | Image Added | Image Added | Image Added |
| Basic | Dashed | GrayScale | Zebra |
Image Added | Image Added | Image Added | Image Added |
| Sideless | Sideless Zebra | Sideless GrayScale | Sideless Black |
Image Added | Image Added | Image Added | Image Added |
| Gray Column Header | Dashed Gray Column Header | Dual Header | Dashed Dual Header |
Image Added | Image Added | Image Added |  Image Added
|
| Gray Row Header | Dashed Gray Row Header | Sideless Black Row | Striped Black Row Header |
상세설정 보기
적용 예시
| Code Block |
|---|
| var synapEditorConfig = {
'editor.table.template.styles': {
'Dark Mode': {
|
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Image Removed
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
적용 예시
| Code Block |
|---|
|
'editor.table.template.styles':{'DarkMode':{defaultStyle:{color: 'rgb(220, 220, 220)',backgroundColor:'rgb(30,30,30)',borders'editor.table.template.list': {
popup: [
|
|
top:{ ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
['Sideless Zebra', |
|
type:solidGrayScale', 'Striped Black Row Header'],
['Dark Mode', 'Rainbow']
|
|
width:1,color: 'rgb(60, 60, 60)'['Basic', 'Dashed', 'GrayScale', 'Zebra'],
['Sideless', 'Sideless Zebra', 'Sideless |
|
}GrayScale', 'Sideless Black'],
|
|
} ['Gray Column Header', 'Dashed Gray Column Header', |
|
}'Dual Header', 'Dashed Dual Header'],
|
|
}
},
'editor.table.template.list': {popup:[ ['Gray Row Header', 'Dashed Gray Row |
|
[DarkMode]Sideless Black Row Header', 'Striped Black Row Header'],
|
|
dialog:[ ['Dark Mode', 'Rainbow']
]
}
}
|
|
| 표 생성 팝업 | 표 속성 다이얼로그 - [스타일 & 제목 셀] 탭 |
 Image Added
|  Image Added
|