Tabulator カラムのグループヘッダー

 

 

 

ドキュメントはここ

< コード例 >

グループ化したいタイトルのカラムの配列を入れ子にします。


      // == Sizes == //
      {
        title: "Sizes",
        columns: [
          // GB Size //
          {title: 'Size (GB)', field: 'GB_SIZE', width: 50, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          },

          // GB 前日//
          {title: 'Size (GB) P', field: 'GB_SIZE_BF1', width: 50, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          },

          // MB Diff from 1 day before //
          {title: 'DiffS', field: 'DIFF_MB_SIZE', width: 60, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          },
        ]
      },

      // == Counts == //
      {
        title: "Counts",
        columns: [

          // File count //
          {title: 'Count', field: 'CNT_FILE', width: 70, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          },
          // File count previous //
          {title: 'Count P', field: 'CNT_FILE_BF1', width: 70, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          },

          // File count difference from previous date //
          {title: 'DiffC', field: 'DIFF_CNT_FILE', width: 60, hozAlign: 'right',
            formatter: function (cell, formatterParams, onRendered) {
              return numeral(cell.getValue()).format("#,###")
            }
          }
        ]
      },

< 画面例 >

コメントを残す