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
<table>
<thead>
<tr><th>Key</th><th>Type</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td><code>template name</code></td>
<td>Object</td>
<td>
Defines the table template style.
template name can be set as String type. You can overwrite existing styles or specify new ones.
| Sub-key | Type | Description |
|---|---|---|
row | Object | Defines styles for rows. |
head | Object | Defines the head row style. |
index | Number | Selects which row to apply the style to. ex) 0 → first row |
style | Object | Defines the style to express. |
color | String | Specifies the text color. ex) 'red', 'rgb(255, 0, 0)', '#FF0000' |
backgroundColor | String | Specifies the background color. ex) 'red', 'rgb(255, 0, 0)', '#FF0000' |
borders | Object | Defines the border styles. |
top | Object | border-top definition. |
type | String | Specifies the border style. Supported types: none | dotted | dashed | solid | double. When double, requires width ≥ 3px to render. |
width | Number | Border width. 1 – 10 px. UI preview max shows 1px; actual table uses configured width. |
color | String | Border color. |
bottom / left / right | Object | Same shape as top. If bottom omitted, uses top. If left omitted, uses top. If right omitted, uses left then top. |
highlight | Object | Defines alternate-row highlight style (isEven, style). |
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
<table>
<thead>
<tr><th>Key</th><th>Type</th><th>Description</th><th>Setting</th><th>Preview</th></tr>
</thead>
<tbody>
<tr>
<td><code>popup</code></td>
<td>ArrayList</td>
<td>
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.
</td> <td>popup: [
['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
]
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.
</td> <td>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']
]
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
<table> <tbody> <tr> <td>
Basic
</td> <td>
Dashed
</td> <td>
GrayScale
</td> <td>
Zebra
</td> </tr> <tr> <td>
Sideless
</td> <td>
Sideless Zebra
</td> <td>
Sideless GrayScale
</td> <td>
Sideless Black
</td> </tr> <tr> <td>
Gray Column Header
</td> <td>
Dashed Gray Column Header
</td> <td>
Dual Header
</td> <td>
Dashed Dual Header
</td> </tr> <tr> <td>
Gray Row Header
</td> <td>
Dashed Gray Row Header
</td> <td>
Sideless Black Row
</td> <td>
Striped Black Row Header
</td> </tr> </tbody> </table>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']
]
}
}
