Taburator でテーブルのタイトルをつけるにあたって、プロパティとしてはタイトルの設定がないので、何とかならないかと調べましたところ、StackOverFlowで同様のこと考えている人の投稿を見つけて、GroupHeaderにしてColumnHeaderを2行にすることにより、タイトルをつけられるようになりました。
Is there away to display a title for a Tabulator table? <== これ
< コード例 >
/**
* 機材コード、番号明細テーブル
* @param {*} data 明細データ
* @param {*} name タイトル用モデル名
*/
showDetailTable(data, name) {
const table = new Tabulator("#eachdetail_table", {
data: data,
layout: "fitDataTable",
maxHeight: "100%",
columns: [
// 1行目 1列にする フィールドにはデータ列を指定しない 変数で文字を変える //
{
title: name + " Details",
field: "",
// 2行目 //
columns: [
{
title: "No.",
field: "rowno",
formatter: "rownum",
frozen: true,
width: 10,
hozAlign: "right",
cssClass: "cell_num",
},
{ title: "RegNo.", field: "nm_regist", width: 70 },
{ title: "ICAO24", field: "icao24", width: 70 },
{ title: "Serial", field: "nm_serial", width: 70 },
{
title: "Active",
field: "is_active",
width: 6,
hozAlign: "center",
},
{ field: "id", visible: false }
],
},
],
/** * 機材名別合計テーブル * @param {*} data */ showEachTotalTable(data, al_icao) { const table = new Tabulator("#eachtotal_table", { data: data, layout: "fitDataTable", maxHeight: "100%", columns: [ { field: "", title: al_icao + " Each totls, actives count", columns: [ // 行番号 ???? 幅が狭くならない // { title: "No.", field: "rowno", formatter: "rownum", frozen: true, width: 10, hozAlign: "right", cssClass: "cell_num", }, { title: "Code", field: "code", width: 50 }, { title: "Name", field: "name", width: 150, topCalc: "count" }, { title: "Count", field: "count", width: 40, hozAlign: "right", topCalc: "sum", }, { title: "Active", field: "active_count", width: 40, hozAlign: "right", topCalc: "sum", /*formatter: function (cell, formatterParams, onRendered) { if (cell.getData() == 0) { return "" } else { return cell.getData() } }*/ }, { field: "id", visible: false } ] }],
< 画面例 >
|