Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



StyleKeyConfig
0
Borderless

스타일이 없는 빈 테이블입니다.

Code Block
languagejs
'Borderless': {}


1

Image Modified

Basic


Code Block
languagejs
'Basic': {
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black',
            }
        }
    }
}


2

Image Modified

Dashed


Code Block
languagejs
'Dashed': {
    defaultStyle: {
        borders: {
            top: {
                type: 'dashed',
                width: 1,
                color: 'black'
            }
        }
    },
    tableStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


3

Image Modified

GrayScale


Code Block
languagejs
'GrayScale': {
    row: {
        highlight: {
            
index
isEven: 
1
true,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',

        
borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            }
        }
    }
}


4

Image Modified

Zebra


Code Block
languagejs
'Zebra': {
    row: {
        highlight: {
            
index
isEven: 
1
true,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    defaultStyle: {
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'black'
            }
        }
    }
}


5

Image Modified

Sideless


Code Block
languagejs
'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'
            }
        }
    }
}


6

Image Modified

Sideless Zebra


Code Block
languagejs
'Sideless Zebra': {
    row: {
        highlight: {
            
index
isEven: 
0
false,
            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'
            }
        }
    }
}


7

Image Modified

Sideless GrayScale


Code Block
languagejs
'Sideless GrayScale': {
    row: {
        highlight: {
            
index
isEven: 
0
false,
            style: {
                backgroundColor: 'darkgray',
                borders: {
                    top: {
                        type: 'none',
                        width: 0,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',
        borders: {
            top: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    }
}


8

Image Modified

Sideless Black


Code Block
languagejs
'Sideless Black': {
    defaultStyle: {
        color: 'white',
        backgroundColor: 'black',
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            },
            left: {
                type: 'none',
                width: 0,
                color: 'white'
            }
        }
    }
}


9

Image Modified

Gray Column Header


Code Block
languagejs
'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'
            }
        }
    }
}


10

Image Modified

Dashed Gray Column Header


Code Block
languagejs
'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'
            }
        }
    }
}


11

Image Modified

Dual Header


Code Block
languagejs
'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'
            }
        }
    }
}


12

Image Modified

Dashed Dual Header


Code Block
languagejs
'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'
            }
        }
    }
}


13

Image Modified

Gray Row Header


Code Block
languagejs
'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'
            }
        }
    }
}


14

Image Modified

Dashed Gray Row Header


Code Block
languagejs
'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'
            }
        }
    }
}


15

Image Modified

Sideless Black Row


Code Block
languagejs
'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'
            }
        }
    }
}


16

Image Modified

Striped Black Row Header


Code Block
languagejs
'Striped Black Row Header': {
    row: {
        head: {
            index: 0,
            style: {
                color: 'white',
                backgroundColor: 'black',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        },
        highlight: {
            
index
isEven: 
1
true,
            style: {
                backgroundColor: 'darkgray',
                    borders: {
                        top: {
                        type: 'solid',
                        width: 1,
                        color: 'white'
                    }
                }
            }
        }
    },
    defaultStyle: {
        backgroundColor: 'lightgray',
        borders: {
            top: {
                type: 'solid',
                width: 1,
                color: 'white'
            }
        }
    }
}