Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

素振りのために Elm でフィルタ・ソート機能付きテーブルを書いた

More than 1 year has passed since last update.

リポジトリは zaneli-sandbox/elm-showcase

FiletableSortableTable.gif

管理画面的なやつでよくある感じのあれ。
ヘッダに filtable, sortable を指定することで、フィルタ対象・ソート対象の項目を指定できる事にした。

要件としては

  • 数値・文字列が混在する場合があり、それでもよしなにソートできるようにする。
  • 表示されている値とソート対象の値が一致しない場合がある(「n%(追加情報)」と表示するがソートは n の数値ソート、など)。

といったところ。

これを実現するために、各テーブルセルはItem型で表現し、
List.sortWithでゴニョゴニョやるようにした。
この実装では文字列と数値のOrderが決め打ちになってしまっているが、
細かく制御したければどちらもViewで表せば如何様にもできそう。

各セルにインデックスアクセスするため Array を、複数のフィルタ条件を保持するのに Dict を使ったが、
ドキュメント読む限り必要最小限の関数を提供したシンプルなものという印象。
もうちょっと気の利いたものが使いたければ Array.Extra あたりの利用を検討するとか、そういう感じなのだろうか。
個人的には標準のものだけで十分なように思えた。

zaneli-sandbox/elm-showcase リポジトリには今回のフィルタ・ソート機能付きテーブル以外にも
練習台用途でちょっとしたものを追加していこうと思う。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away