Table Style Custom Settings
Release 3.1.2503 and above.
Using the table template style feature provided by Synap Editor, you can edit tables more quickly and conveniently.
Setting
| Key | Description |
|---|---|
editor.table.template.styles | Sets table template styles. |
editor.table.template.list | Sets the templates to display. |
editor.table.template.styles Setting
| Key | Type | Description |
|---|---|---|
template name | Object | Defines the table template style. template name can be set as String type. You can overwrite existing styles or specify new ones. See template name below. |
template name
template name can be set as String type. You can overwrite existing styles or specify new ones.
The following sub-keys define the template style. Hierarchy is flattened to dotted keys.
| Sub-key | Type | Description |
|---|---|---|
row | Object | Defines styles for rows. |
row.head | Object | Defines the head row style. |
row.head.index | Number | Selects which row to apply the style to. ex) 0 → first row |
row.head.style | Object | Defines the style to express. |
row.head.style.color | String | Specifies the text color. ex) 'red', 'rgb(255, 0, 0)', '#FF0000' |
row.head.style.backgroundColor | String | Specifies the background color. ex) 'red', 'rgb(255, 0, 0)', '#FF0000' |
row.head.style.borders | Object | Defines the border styles. |
row.head.style.borders.top | Object | border-top definition. |
row.head.style.borders.top.type | String | Specifies the border style. Supported types: none | dotted | dashed | solid | double. When double, requires width ≥ 3px to render. |
row.head.style.borders.top.width | Number | Border width. 1 – 10 px. UI preview max shows 1px; actual table uses configured width. |
row.head.style.borders.top.color | String | Border color. |
row.head.style.borders.bottom / row.head.style.borders.left / row.head.style.borders.right | Object | Same shape as top. If bottom omitted, uses top. If left omitted, uses top. If right omitted, uses left then top. |
row.highlight | Object | Defines alternate-row highlight style (isEven, style). |
row.highlight.isEven | Boolean | true: even rows / false: odd rows. |
col | Object | Defines styles for columns. Same shape as row. |
defaultStyle | Object | Defines the default cell style. |
tableStyle | Object | Defines the style applied to the table itself. |
Style priority: headRow > headCol > highlightRow > highlightCol > defaultStyle
editor.table.template.list Setting
| Key | Type | Description | Setting | Preview |
|---|---|---|---|---|
popup | ArrayList | Defines the table template list to be shown in the table creation popup. Up to 4 templates can be shown per row using a nested array. | See popup below. | See popup below. |
dialog | ArrayList | Defines the table template list to be shown in the [Style & Header Cells] tab of the table properties dialog. Up to 4 templates can be shown per row using a nested array. | See dialog below. | See dialog below. |
popup
Defines the table template list to be shown in the table creation popup.
Up to 4 templates can be shown per row using a nested array.
Setting:
popup: [
['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
]
Preview:
dialog
Defines the table template list to be shown in the [Style & Header Cells] tab of the table properties dialog.
Up to 4 templates can be shown per row using a nested array.
Setting:
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']
]
Preview:
Notes
- When 5 or more templates are entered in each array, only the first 4 template styles are displayed.
- Unregistered template keys are not displayed when added.
Default Style Types
| Style | Style | Style | Style |
|---|---|---|---|
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 | Striped Black Row Header |
View Detail Settings
Application Example
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']
]
}
}
| Popup | Dialog |
|---|---|