사이냅 에디터에서 제공하는 표 템플릿 스타일 기능을 이용하면 더 이용하면 더 빠르고 편리한 표 편집이 가능합니다.
설정
| 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로 수 있는 기존의 스타일 이외에도 추가할 수 있습니다.
텍스트 색상글자색을 지정합니다. 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 | 형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다. |
스타일을 지정합니다. 지원하는 타입: [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와 같습니다. |
col |
| isEven | Boolean | 짝수행에 스타일을 적용할 지 여부입니다. true: 짝수 행에 스타일을 적용합니다.
false: 홀수 행에 스타일을 적용합니다. |
col | Object | 열들의 스타일을 정의합니다. 형태는 row와 같습니다. |
defaultStyle | Object |
기본 셀 셀의 스타일을 정의합니다. 형태는 style과 같습니다. |
tableStyle | Object |
기본 표 표의 스타일을 정의합니다. 형태는 style과 같습니다. |
| Note |
|---|
|
- 잘못된 템플릿 설정 시, 템플릿이 보이지 않거나, 일부 스타일이 적용되지 않을 수 있습니다.
- 스타일 우선순위는 다음과 같습니다.
- headRow > headCol > highlightRow > highlightCol > defaultStyle
|
editor.table.template.list 설정
keytype| Type | 설명 | 설정 |
|
|---|
| popup | ArrayList | 표 생성 팝업에서 보여줄 표 템플릿 리스트를 정의합니다. 이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다. |
popup: [
| Code Block |
|---|
| popup: [
['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'], |
|
['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header'] |
|
|  Image Modified
|
| dialog | ArrayList | 표 속성 다이얼로그의 [스타일 & 제목 셀] 탭에서 보여줄 표 템플릿 리스트를 정의합니다. 이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다. | |
['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 Modified
|
| Note |
|---|
|
- 각 배열에 4개 이상의 템플릿 입력 시 4번째까지의 템플릿 스타일만 표현됩니다.
- 등록되지 않은 템플릿 key 추가 시 표현되지 않습니다.
|
기본
...
스타일 종류
...
Image Removed
...
| Code Block |
|---|
|
'Basic': {
defaultStyle: {
borders: {
top: {
type: 'solid',
width: 1,
color: 'black',
}
}
}
} |
...
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
...
...
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': {
|
|
...
...
...
...
...
...
rgb(30, 30, 30)',
borders: {
|
|
...
...
...
...
...
rgb(60, 60, 60)'
}
}
}
},
|
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Image Removed
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
backgroundColor: 'yellow',
|
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
적용 예시
| Code Block |
|---|
|
var synapEditorConfig = {
,
'editor.table.template. |
|
styles 'DarkMode':{ defaultStyle:{
color:rgb(220220,220) backgroundColor: 'rgb(30, 30, 30)',
borders: {
top: {
type: 'solid',
width: 1,
color: 'rgb(60, 60, 60)' }
}
}
}
},
'editor.table.template.list': {
popup: [
['Basic', 'Dark Mode']
],
dialog: [
['Basic', 'Dark Mode']
]
}
}
Image Removed
Image RemovedHeader', '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']
]
}
}
|
|
| 표 생성 팝업 | 표 속성 다이얼로그 - [스타일 & 제목 셀] 탭 |
 Image Added
|  Image Added
|