Tabulator tips

第6回 パーセント表示

2019.12.25

パーセント表示する属性が無いので 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>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index