[Tabulator] 배경색(background) / 테두리(border) / 마우스오버(mouseover) 변경

테이블 라이브러리(table library)인 타뷸레이터(Tabulator) 배경색(background) 및 테두리(boder), 마우스오버(hover) 효과 변경 방법

[html]

<div id="example-table"></div>

 

[css]

html, body {

  font-family: 'Roboto', sans-serif;

  color: #333;

}

.tabulator {

  margin: 2rem;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

.tabulator .tabulator-header {

  border-bottom: none; /* header 하단 구분선 삭제 */

}

.tabulator .tabulator-header .tabulator-col {

  background: #444; /* header 배경색 변경 */

  border-right: none; /* header 세로 구분선 삭제 */

  color: #fff;

}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {

  background: skyblue; /* header hover 배경색 변경 */

  color: #444; /* header hover 글자색 변경 */

}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {

  padding: 12px;

}

.tabulator-row:nth-of-type(2n) {

  background: #eee; /* 짝수열 row 배경색 변경 */

}

.tabulator-row:last-of-type {

  border-bottom: none; /* 마지막 row 하단 구분선 삭제 */

}

.tabulator-row.tabulator-selectable:hover {

  background: skyblue; /* row hover 배경색 변경 */

}

.tabulator-row .tabulator-cell {

  padding: 12px;

  border-right: none; /* row 세로 구분선 삭제 */

}

 

[js]

//define some sample data

var tabledata = [

  {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},

  {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},

  {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},

  {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},

  {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},

];

//create Tabulator on DOM element with id "example-table"

var table = new Tabulator("#example-table", {

  data:tabledata, //assign data to table

  layout:"fitColumns", //fit columns to width of table (optional)

  rowHeight:40, //set rows to 40px height

  columns:[ //Define Table Columns

    {title:"Name", field:"name", width:150},

    {title:"Age", field:"age", hozAlign:"left", formatter:"progress", formatterParams:{

      color:["green", "orange", "red"]

    }}, // progress bar 색상 변경

    {title:"Favourite Color", field:"col"},

    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},

  ],

});

//trigger an alert message when the row is clicked

table.on("rowClick", function(e, row){

 alert("Row " + row.getData().id + " Clicked!!!!");

});

 

See the Pen [Tabulator] background / border / hover _ 배경색 / 테두리 / 마우스오버 변경 by j. sik (@jsik) on CodePen.