Redashでクエリ結果の見た目を変えてみる

こんにちは。
Redashのクエリ結果のテーブルの見た目が味気ないと感じたことはありませんか？

クエリ結果（Table）の見た目はVisualization機能では変更することができません。DashboardにTableのまま表示させるときに、この列だけ目立たせたい！、任意の条件を満たす場合のみ目立たせたい！と思った方は私だけじゃないと思います。
今回は、その設定方法を紹介します。

まずは普通にクエリを実行してみます。

当たり前のことを書いているので読み飛ばしていただいて結構です。

この普通のクエリを実行してみます。

SELECT
  t.date,
  t.year
FROM
  tmp AS t

※tmpテーブルのデータはご察しください。

結果は想像どおりこのように表示されます。

ではクエリの文字色と背景色を変えてみます。

クエリにhtmlを追加し、concat関数で結合します。
※環境はMySQLです。

SELECT
  t.date,
  concat(
    '<strong class="c-red strong">',
    t.year,
    '</strong>'
  ) AS year,
  concat(
    '<div class="bg-danger">',
    t.year,
    '</div>'
  ) AS year1,
FROM
  tmp AS t

結果はこのように表示されます。

year列の文字色とyear1列の背景色が変わっています。

解説

この部分で解説をします。

  concat(
    '<strong class="c-red strong">',
    t.year,
    '</strong>'
  ) AS year,

t.year列を赤色の太字で表示したいので、<strong>タグを使用し、classにc-red（文字色）とstrong（太字）を設定します。
このclass名は、main.lessで定義されています。devToolから確認できます。が、圧縮されています…。

次に、SQLのカラム指定となるので、htmlタグ、列名、html閉じタグを
concat関数で1つにまとめます。

class名について

Bootstrapを使用されているようなので、main.lessを確認するのが手間な方はBootstrapのclass名を設定するといいと思います。
※いくつか試しましたが、適用されないclassもありましたのでご注意ください。

おまけ

使用できるタグですが、<strong>、<div>タグ以外にも、<span>、<table>タグなども使用できました。
例えば、Case文で条件を満たす場合のみ色を変えることもできますし、paddingを設定することで見た目のバランスも取れるので、表現の幅が広がりそうです。

Redashがさらに好きになりました。