はじめに
Ant Design Vue の Table のドキュメントを見ていたところ、
数の昇順・降順ソートの方法については記載があったのですが、
文字列の昇順・降順ソートの方法については記載がありませんでした... ![]()
文字列の昇順・降順ソートは地味ながら、
割と今後も実装の必要が出てきそうな気がしたので、
実装方法について残しておきたいと思います ![]()
また本記事の内容は応用すれば、文字列の昇順・降順だけでなく、
より複雑な条件でソートを行うことも可能になります ![]()
Table の行を文字列の昇順・降順で並び替える方法
a-table タグの columns 属性に渡すカラム情報が記載された配列内のプロパティに、
sorter を追加することで行のソートを行うことが可能です ![]()
<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 で可能です ![]()
しかし、辞書順のような複雑な条件でソートを行う場合は、
今回のように明示的に返り値を指定する必要があります ![]()
おわりに
もっと良い解決方法があればご教授ください![]()