Tabulator rowFormatterを使って、文字色を変化させる

Tabulator でカラムのformatter設定で文字色を変えたり、画像を表示したりできますが、列が多くなると見通しが悪くなるので、rowFormatterで同様の処理をしてみました。

< コード例 >


// @@ 行をフォーマットする時 @@ //
      rowFormatter: (row) => {

        // ++ 各行の列走査をしてエレメントを取得 ++ //
        $.each($(row.getElement()).children(''), function (j, itm) {

          
          // 属性に 'tabulator-field'がある場合 //
          const fld = $(this).attr('tabulator-field');

          // TTS前営業日差 //
          if (fld === 'RT_TTS_LASTDIFF') {
            const currDiff = row.getData().RT_TTS_LASTDIFF;
            if (currDiff >= 0) {
              $(this).text('+' + numeral(currDiff).format('#,###.#0'));
              $(this).css('color', 'blue');
            } else {
              $(this).css('color', 'red');
            }
          }

          // TTB前営業日差 //
          if (fld === 'RT_TTB_LASTDIFF') {

            const currDiff = row.getData().RT_TTB_LASTDIFF;
            const currTTB = row.getData().RT_TTB;

            if (currTTB <= 0) {
              $(this).text("")
            }
            else {

              if (currDiff >= 0) {
                $(this).text('+' + numeral(currDiff).format('#,###.#0'));
                $(this).css('color', 'blue');
              } else {
                $(this).css('color', 'red');
              }

            }
          }

          // セルの右罫線色変更 //
          if (fld === 'CD_CURR' && $(this).text().length === 3) {
            let curstyleV = $(this).attr('style');
            curstyleV += 'border-right-color:#3c3c3c;';
            $(this).attr('style', curstyleV);
          }

          // ドラッグドロップ行移動説明 //
          if ($(this).hasClass("tabulator-row-handle")) {
            $(this).attr('title', "ドラッグドロップしてこの行を移動出来ます");
            $(this).addClass('tippydiv');
          }

        });
      },

< 画面例 >

銀行発表の日次為替レート
前営業日より上がった場合、青文字、下がった場合赤文字。