표 스타일 사용자 정의 설정

3.1.2503 버전부터 지원합니다.

Synap Editor에서 제공하는 표 템플릿 스타일 기능을 사용하면 표를 더 빠르고 편리하게 편집할 수 있습니다.

설정

editor.table.template.styles 설정

template name

template name은 String 타입으로 설정할 수 있습니다. 기존 스타일을 덮어쓰거나 새로운 스타일을 지정할 수 있습니다.

다음 하위 키들은 템플릿 스타일을 정의합니다. 계층 구조는 점으로 구분된 키로 평탄화됩니다.

스타일 우선순위: headRow > headCol > highlightRow > highlightCol > defaultStyle

editor.table.template.list 설정

popup

표 생성 팝업에 표시될 표 템플릿 목록을 정의합니다.

중첩 배열을 사용하여 한 행에 최대 4개의 템플릿을 표시할 수 있습니다.

설정:

popup: [
    ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
    ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
]

미리보기:

dialog

표 속성 다이얼로그의 [스타일 & 헤더 셀] 탭에 표시될 표 템플릿 목록을 정의합니다.

중첩 배열을 사용하여 한 행에 최대 4개의 템플릿을 표시할 수 있습니다.

설정:

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']
]

미리보기:

참고 사항

• 각 배열에 5개 이상의 템플릿이 입력되면 처음 4개의 템플릿 스타일만 표시됩니다.
• 등록되지 않은 템플릿 키는 추가해도 표시되지 않습니다.

기본 스타일 타입

스타일	스타일	스타일	스타일
기본	점선	그레이스케일	지브라
테두리 없음	테두리 없는 지브라	테두리 없는 그레이스케일	테두리 없는 검정
회색 열 헤더	점선 회색 열 헤더	이중 헤더	점선 이중 헤더
회색 행 헤더	점선 회색 행 헤더	테두리 없는 검정 행	줄무늬 검정 행 헤더

자세한 설정 보기

적용 예시

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']
        ]
    }
}

팝업	다이얼로그