LoginSignup
1
1

More than 3 years have passed since last update.

[Tips] Ant Design Vue の Table で行を文字列でソートする

Last updated at Posted at 2019-12-17

はじめに

Ant Design VueTable のドキュメントを見ていたところ、
数の昇順・降順ソートの方法については記載があったのですが、
文字列の昇順・降順ソートの方法については記載がありませんでした... :frowning2:

文字列の昇順・降順ソートは地味ながら、
割と今後も実装の必要が出てきそうな気がしたので、
実装方法について残しておきたいと思います :writing_hand:

また本記事の内容は応用すれば、文字列の昇順・降順だけでなく、
より複雑な条件でソートを行うことも可能になります :eyes:

Table の行を文字列の昇順・降順で並び替える方法

a-table タグの columns 属性に渡すカラム情報が記載された配列内のプロパティに、
sorter を追加することで行のソートを行うことが可能です :thumbsup:

SortableTable.vue
<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :items="data"
    >
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "age",
    dataIndex: "age",
    sorter: (a, b) => {
      // 数の昇順・降順ソート
      return a.age - b.age;
    }
  },
  {
    title: "name",
    dataIndex: "name",
    sorter: (a, b) => {
      // 文字列の昇順・降順ソート
      const aName = a.name;
      const bName = b.name;

      // JavaScript の sort 関数を使用して昇順でソートする
      const first = [aName, bName].sort()[0];

      // sort 関数の結果の先頭が昇順の先頭なので、
      // aName と一致するかチェックし先頭だったら 1、そうでなかったら -1 とする
      return first == aName ? -1 : 1;
    }
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    name: `Edrward ${i}`,
    age: 100 - i
  });
}
export default {
  data() {
    return {
      data,
      columns
    };
  }
};
</script>

sorter 内の返り値が 0 の場合はソートが行われず、
-1 であれば比較した前の値を先頭に持ってきて、
1 であれば比較した後の値を先頭に持ってくることになります :white_check_mark:

そのため、数であれば単純に a.age - b.age でソートすることが出来ます :thumbsup:
文字列も長さでソートする場合は a.name.length - b.name.length で可能です :thumbsup:

しかし、辞書順のような複雑な条件でソートを行う場合は、
今回のように明示的に返り値を指定する必要があります :point_up:

おわりに

もっと良い解決方法があればご教授ください:bangbang:

参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1