Display: table 테이블 꾸미기

[jhlee]

단순한 테이블

display: table

고정폭 테이블

tableOptions:
  style: 
    cellWidth: 150px

테두리 있는 테이블

tableOptions:
  containerClass: overflow-auto border shadow-sm rounded
  containerStyle:
    height: 300px

헤더가 고정된 스크롤 테이블

headerClass: sticky top-0 z-0 bg-white
containerClass: overflow-auto
containerStyle:
  width: 1200px
  height: 300px

헤더가 고정된 스크롤 테이블 - 스타일 예시

headerClass: sticky py-4 top-0 z-0 bg-white/75 backdrop-blur backdrop-filter
containerClass: overflow-auto border-t
containerStyle:
  width: 1200px
  height: 300px

줄 색상이 강조된 테이블

style: 
  width: 1000px
class: divide-zinc-400

줄 배경색 표시된 테이블

rowClass: even:bg-zinc-100/50

줄 배경색 표시된 테이블 - 스타일 예시

rowClass: odd:bg-zinc-100/50

표시된 내용을 강조하는 테이블

rowActiveClass: bg-slate-100 shadow

가로줄 있는 테이블

헤더와 내용 모두 가로줄 있는 테이블

rowClass: divide-x
headerRowClass: divide-x
class: border-t  

헤더와 내용 모두 가로줄 있는 테이블 - 스타일 예시

rowClass: divide-x
headerRowClass: bg-zinc-100 divide-x shadow-sm 
containerClass: border

고정형 헤더와 가로줄 있는 테이블 - 스타일 예시

style:
  width: 1200px # 테이블 크기
containerStyle:
  height: 300px # 보이는 영역의 높이
  width: 600px # 보이는 영역의 가로
containerClass: overflow-auto border shadow-sm rounded

rowClass: divide-x
headerClass: sticky top-0 z-10 bg-zinc-100 
headerRowClass: divide-x divide-zinc-300

조회건수가 적어도 높이를 유지하는 테이블 (페이지 번호 위치 고정)

tableOptions:
  style:
    min-height: 300px

대량의 전체화면 테이블 (페이지 번호를 하단 고정)

display: table
paginationOptions:
  enabled: true
  perPage: 30
  fixed: true