はじめに

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

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

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

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

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

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 であれば比較した後の値を先頭に持ってくることになります

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

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

おわりに

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

参考リンク