パーセント表示する属性が無いので formatter で値をパーセント表示(100倍にして'%'をつける)関数を定義します。
小数点以下の桁数は formatterParams.precision で指定できるように定義しました。
var disp_percent=function(cell,params){
var val = cell.getValue();
if(typeof val==='number'){//対象は数値
var per = val*100
var precision = params.precision;
if(precision>=0) per=per.toFixed(precision);
return `${per}%`
}
// 数値でない場合、表示なし。
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"パーセント表示",
field:"percent",
align:"right",
formatter:disp_percent,
formatterParams:{precision:2}
}
データ定義
{percent:1/3}, // 0.3333..
{percent:0},
{percent:NaN},
{percent:undefined},
{percent:"string"},
実行結果
サンプルコード
<!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>パーセント表示 </h1>
<div id="table"></div>
<script type="text/javascript">
var disp_percent=function(cell,params){
var val = cell.getValue();
if(typeof val==='number'){//対象は数値
var per = val*100
var precision = params.precision;
if(precision>=0) per=per.toFixed(precision);
return `${per}%`
}
// 数値でない場合、表示なし。
}
var show_table=function(){
var tdata = [
{percent:1/3}, // 0.3333..
{percent:0},
{percent:NaN},
{percent:undefined},
{percent:"string"},
]
new Tabulator("#table", {
data:tdata,
columns:[
{
title:"パーセント表示",
field:"percent",
align:"right",
formatter:disp_percent,
formatterParams:{precision:2}
}
],
});
}
</script>