月: 2023年2月

公式ドキュメントはこちら

< コード例 >

    pagination: true,
    paginationSize: 20,
    paginationSizeSelector: [10, 20, 30, 50, 100, 200, true],
    paginationCounter: "rows",
    paginationMode: "local", 
    paginationInitialPage: 1,

< 画面例 >

TabulatorのtopCalcプロパティを使えば集計値の表示が出来ます。
ビルトインで用意されたプロパティを使ってみました。
公式ドキュメントはこちら
sum, avg, count, maximum, minmum, concatenate が使えます。、

< コード例 >

sumとcount

        // 機材数 //
        {
          topCalc: "sum",
          title: "Fleet",
          field: "fleet_size",
          hozAlign: "right",
          width: 46,
          formatterParams: {thousand: ","},
          formatter: function (cell, formatterParams, onRendered) {
            if (cell.getValue() <= 0) {
              return ""
            }
            else {
              return numeral(cell.getValue()).format("#,###")
            }
          },
          //width: 50,
          sorter: "number",
          cssClass: "cell_num_onlytext_navy"
        },
        
        // 旅客貨物定時国際タイプ記号列挙 //
        { topCalc: "count",
          title: "Type", field: "type", hozAlign: "center", width: 50
        },

< 画面例 >

Tabulatorで集計行の表示が、topCalc で簡単に出来て使ってましたが、ビルトインのプロパティにない集計が必要になり作ってみました。
公式ドキュメントはこちら

Group byした結果のアイテム数
メジアン
0や空白を除外した集計
などです。

< コード例 >
実は別関数にしたところ、うまく動かないので、カラムのプロパティに記述してます。

0以下除外平均

topCalc: function (values, dtoata, calcParams) {

  // 0 (データは-1)を除外した平均 //
  let cnt = 0
  let sum = 0
  values.forEach(function (value) {
  
    /*console.log("--- value")
     console.log(value)
     console.log("--- data")
     console.log(data)*/
  
    let val = value === -1 ? 0 : value
  
    if (val > 0) {
      cnt++;
      sum = Number(sum) + Number(val)
    }
  })
  //alert(sum + ":" + cnt)
  
  if (sum > 0 && cnt > 0) {
    const res = Math.round(sum / cnt * 10) / 10
    return res;
  }
  else {
    return 0
  }

}

0以下除外メジアン

topCalc: function (values, data, calcParams) {

  // 0 -1を除外したメジアン //
  let targets = []
  values.forEach((value) => {

    console.log(value)
    //let val = value.replaceAll(",", "")

    let val = value < 0 ? 0 : value
    val = parseInt(val)

    if (val > 0) {
      targets.push(val)
    }
  })
  console.log(targets)

  const half = Math.floor(targets.length / 2);

  if (targets.length % 2) {
    return targets[half];
  }
  else {
    return (targets[half - 1] + targets[half]) / 2;
  }

}

Group by アイテム数

topCalc: function (values, data, calcParams) {

  let manuCnts = {}
  values.forEach((tmp) => {

    manuCnts[tmp] = (manuCnts[tmp] || 0) + 1;

  })
  console.log("--- manufac")
  console.log(manuCnts)

  return Object.keys(manuCnts).length + " Manufactures"
}

< 画面例 >

JavaScript徹底攻略【電子書籍】[ WEB+DB PRESS編集部 ] 価格：2068円 (2023/2/6時点) 楽天で購入