VuetifyのData Tableでソート順をカスタマイズする

意外とググっても出てこないし、公式ドキュメントにも明記されていなかったのでメモ。

実現したいこと

VuetifyのData Tableにおいて、ソート順をカスタマイズしたいことがある。
例えば、以下のようなケース。

  • 国名を特定の順序でソートしたい
  • 文字列を含む数値について、数値のみでソートしたい

ここでは後者を具体例として、公式ドキュメントのData Tableのサンプルを挙げる。 https://vuetifyjs.com/ja/components/data-tables/

デフォルトでソートしない場合は以下の表示となっている。 default-non-sort これをIron (%)のカラムにおいて昇順・降順ソートすると、次のような表示となる。 default-asc default-desc

この結果は、文字列のソートとしては正しいのだが、感覚的には違和感を覚える。
感覚的には%を除いた数値の部分で比較・ソートを行いたい。

実現方法

v-data-tableheadersの指定で実現できる。
https://vuetifyjs.com/ja/api/v-data-table/#props-headers

headersDataTableHeader[]というデータ形式で、具体的には以下。

{
  text: string,
  value: string,
  align?: 'start' | 'center' | 'end',
  sortable?: boolean,
  filterable?: boolean,
  groupable?: boolean,
  divider?: boolean,
  class?: string | string[],
  cellClass?: string | string[],
  width?: string | number,
  filter?: (value: any, search: string, item: any) => boolean,
  sort?: (a: any, b: any) => number
}

これについてはVuetifyの公式ドキュメントにも詳細説明がないのだが、末尾にあるsortというフィールドを使えばよい。
ソートの際に使用する比較関数をsortとして指定することで、並び順を指定することができる。

実装サンプル

ソースコードでは、以下のようにsortを指定している。

          { 
            text: 'Iron (%)',
            value: 'iron',
            sort: (a, b) => {
              a = a.replace(/[^0-9]/g, '');
              b = b.replace(/[^0-9]/g, '');
              return a-b;
            }
          },

これをIron (%)のカラムで昇順・降順ソートした場合、以下のようになる。 custom-asc custom-desc 昇順・降順のいずれの場合においても、%を除く数値部分でソートできている。

参考:類似の手法

類似の方法としてcustom-sortを使う方法がある。
詳細はこちら

ただしこれはすべてのカラムに影響を及ぼしてしまう。
カラム毎にデフォルトの動作を担保するのは手間がかかるし、無駄な品質リスクを負うことになる。

関連記事


  1. Sequence Decomposingをザ・ゲームに置き換えて考えてみた
  2. Pythonにおける2の整数乗は、ビット演算のほうが高速
  3. アノテーションを活用した影響調査にトライしてみた
  4. Groovyの == 演算子と equals() は厳密に同じではない
  5. ネットワークが落ちていたらWindowsを自動で再起動する
  6. Spring Web MVCのViewでExcelを生成して返す
  7. Spring Web MVCのViewでPDFを生成して返す

comments powered by Disqus