行や列に色をつけるには rowFormatter で色つけを定義します。
rowFormatter:function(row){
var data=row.getData()
if(data.name==="木村")//"木村"の行に色をつける
row.getElement().style.backgroundColor = "yellow";
// カラム'age'に色をつける。
row.getCell("age").getElement().style.backgroundColor = "orange";
},
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{title:"名前",field:"name"},
{title:"年齢",field:"age"},
{title:"身長",field:"height"},
データ定義
{name:"山田", age:10, height:170},
{name:"木村", age:18, height:160},
{name:"伊藤", age:20, height:150},
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title> rowFormatter で行、列に色をつける </h1>
<div id="table"></div>
<script type="text/javascript">
var show_table=function(){
var tdata = [
{name:"山田", age:10, height:170},
{name:"木村", age:18, height:160},
{name:"伊藤", age:20, height:150},
];
new Tabulator("#table", {
rowFormatter:function(row){
var data=row.getData()
if(data.name==="木村")//"木村"の行に色をつける
row.getElement().style.backgroundColor = "yellow";
// カラム'age'に色をつける。
row.getCell("age").getElement().style.backgroundColor = "orange";
},
data:tdata,
columns: [
{title:"名前",field:"name"},
{title:"年齢",field:"age"},
{title:"身長",field:"height"},
],
});
}
</script>