前書き
管理画面などで、データテーブルはよく使われますね。
今回は、react-bootstrap-tableという、ReactでBootstrapのテーブルを良い感じに使いやすくしてくれるライブラリで日本語ソートを実装してみたのでまとめます。
用途とすれば、漢字名をソートしたときに文字コード順になってしまうのでそれをフリガナ順にしたいときです。
前提
- 人物名や商品名のテーブルで利用する
- 漢字名とフリガナがある
上記2点を前提に、実装しようと思います。
実装
大まかなreact-bootstrap-tableの利用方法は今回は割愛します。
実装は以下の通りです。
ソート関数を作成する。
実装的には漢字名の部分でソートした際に、別のフリガナの値を利用してソートする形になります。
内部で利用している、katakanaToHiraganaに関しては以下のサイトをご参考ください。
文字列をひらがなにする必要があるので利用しています。
jpSort(a, b, sortOrder, sortField) {
const main = katakanaToHiragana((a.kana).toString());
const sub = katakanaToHiragana((b.kana).toString());
if (sortOrder === 'asc') {
if (main < sub) {
return -1;
} else if (main > sub) {
return 1;
}
}
if (main < sub) {
return 1;
} else if (main > sub) {
return -1;
}
return 0;
}
引数aとbには、ソート検査対象の2列のオプジェクトが来ます。
この関数自体は、漢字名をソートした際のみ実行されるので、ソート対象をkanaにしてひらがなに変換
その後でソートの処理を実装します。
作成する関数はこれだけです。
あとはこれをBootstrapTable側で指定してあげます。
BootstrapTableのソートに作成した関数を指定する。
TableHeaderColumnのsortFuncというpropsに作成した関数を渡します。
<BootstrapTable
data={this.state.filterResult}
options={options}
version="4"
>
<TableHeaderColumn
sortFunc={this.jpSort}
dataField="kanji"
>
漢字名
</TableHeaderColumn>
<TableHeaderColumn
dataField="kana"
>
フリガナ
</TableHeaderColumn>
</BootstrapTable>
以上で終わりです。
動作を見ていただければ、きっちり漢字でもフリガナ順で並ぶと思います。
後書き
処理的には細かな部分ですが、利用するユーザから見れば、文字コードなんてわからないことが多いので
きちんとフリガナ順で並んでくれれば嬉しいですね。
react-bootstrap-tableはなかなかクセのある部分もありますが、callBackが取りやすく独自が組みやすいので、色々使って行きたいです。