今回は bottomCalc,topCalc の計算結果を列幅自動調整により、すべて表示する設定について記述します。
bottomCalc, topCalc プロパティを "sum" にすると 表示幅が足りなくなり、計算結果がすべて表示されないことがあります。
tabulator は列のレイアウトの一貫性を保つために最初のデータの読み込み時に 列幅が設定されるとその後、データが変更されても列幅を変更しないので その影響と思われます。
Tabulatorドキュメント「Update Column Widths On New Data」より抜粋
列のレイアウトの一貫性を保つために、最初のデータの読み込み時に（コンストラクタのsetプロパティまたはsetData関数から）列の幅が設定されると、新しいデータが読み込まれても列の幅は変更されません。 テーブルに読み込むたびに列幅をデータに合わせたい場合は、layoutColumnsOnNewDataプロパティをtrueに設定します。
var table = new Tabulator("#example-table", {
layoutColumnsOnNewData:true,
});
layoutColumnsOnNewDataプロパティをtrueに設定し、table.setData() で データを再ロードすると列幅が再調整されてbottomCalc,topCalc の結果がすべて表示されるようになります。
カラム定義
{
title:"num",
field:"num",
align:"right",
formatter: "money",
formatterParams:{precision:0},
bottomCalc: "sum",
bottomCalcFormatter: "money",
bottomCalcFormatterParams:{precision:0},
},
データ定義
{ num: 900000 },
{ num: 900000 },
{ num: 900000 },
{ num: 900000 },
サンプルコード
<!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> Calc の計算結果を列幅自動調整する </h1>
<p><div id="table0"></div></p>
<p><div id="table"></div></p>
<script type="text/javascript">
var show_table=function(){
var tdata = [
{ num: 900000 },
{ num: 900000 },
{ num: 900000 },
{ num: 900000 },
];
var columns = [
{
title:"num",
field:"num",
align:"right",
formatter: "money",
formatterParams:{precision:0},
bottomCalc: "sum",
bottomCalcFormatter: "money",
bottomCalcFormatterParams:{precision:0},
},
];
// 1番目のテーブルのbottomCalc の結果は一部隠れる。
new Tabulator("#table0", {
data:tdata,
columns: columns,
});
var table = new Tabulator("#table", {
data:tdata,
columns: columns,
layoutColumnsOnNewData:true
});
// データは table.getData()で取得できる。
let data = table.getData();
// データ再ロードでbottomCalc の結果は全て表示される。
table.setData(data);
}
</script>