Page History

...

editor.table.template.styles

				type	설명
row				Object	행들의 스타일을 정의합니다.
	head			Object	머리행의 스타일을 정의합니다.
		index		Number	인자로 받은 인덱스(행 or 열)에 스타일을 적용할지 여부를 판단합니다.
		style		Object	css로 표현할 수 있는 스타일을 정의합니다. 기존의 스타일 이외에도 추가할 수 있습니다.
			color

Object

String	텍스트 색상
backgroundColor

Object

String	배경 색상
borders			Object	borders를 정의합니다
	top		Object	border-top 정의
		style	String	테두리 스타일
		width	Number	테두리 두께
		color	String	테두리 색상
	bottom		Object	형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다.
	left		Object	형태는 top과 같습니다. 설정하지 않으면 top이 적용됩니다.
	right		Object	형태는 top과 같습니다. 설정하지 않으면 left → top 순서대로 적용됩니다.
highlight					Object	강조행의 스타일을 정의합니다. 형태는 head와 같습니다.
col							열들의 스타일을 정의합니다. 형태는 row와 같습니다.
defaultStyle							기본 셀 스타일을 정의합니다. 형태는 style과 같습니다.
tableStyle							기본 표 스타일을 정의합니다. 형태는 style과 같습니다.

적용예시


'Basic': {
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black',
            }
        }
    }
}
'Dashed': {
    defaultStyle: {
        borders: {
            top: {
                type: 'dashed',
                width: 1,
                color: 'black'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'Sideless Black': {
    defaultStyle: {
        color: 'white',
        backgroundColor: 'black',
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'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'
            }
        }
    }
}
'Sideless Black Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                color: 'white',
                backgroundColor: 'black',
                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'
            }
        }
    }
}
'Striped Black Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                color: 'white',
                backgroundColor: 'black',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        },
        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'
            }
        }
    }
}

...

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version 3

Key