react-bootstrap-tableで日本語(漢字)ソートを実装してみた。

前書き

管理画面などで、データテーブルはよく使われますね。
今回は、react-bootstrap-tableという、ReactでBootstrapのテーブルを良い感じに使いやすくしてくれるライブラリで日本語ソートを実装してみたのでまとめます。
用途とすれば、漢字名をソートしたときに文字コード順になってしまうのでそれをフリガナ順にしたいときです。

前提

• 人物名や商品名のテーブルで利用する
• 漢字名とフリガナがある

上記２点を前提に、実装しようと思います。

実装

大まかな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には、ソート検査対象の２列のオプジェクトが来ます。
この関数自体は、漢字名をソートした際のみ実行されるので、ソート対象を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が取りやすく独自が組みやすいので、色々使って行きたいです。