Help us understand the problem. What is going on with this article?

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

はじめに

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:

参考リンク

nikaera
様々な技術領域に関心のある雑食系エンジニアです。自分の記事が誰かのお役に立てば幸いです。 Babylon.js / AWS / Golang / Docker / Unity / Android / iOS
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。
https://unity-game-dev-guild.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした