はじめに
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
で可能です
しかし、辞書順のような複雑な条件でソートを行う場合は、
今回のように明示的に返り値を指定する必要があります
おわりに
もっと良い解決方法があればご教授ください