Tabulatorで行こう！ 〜ダイバー編〜

あれから半日

ある程度のところまで、というところで、寝たんだけど。寝付けないわけです（笑）
「何をどうすれば」「あれをこうすれば」「これがああなって」という感じで、脳は活動をやめてないわけです。
ルーチンなので、そのうち、眠りに落ちるのですが、ナカナカ抜けない癖のようなものです。
修正を加えていた「書庫アプリ」も、ほぼ所望には仕上がりをみました。

そうなんだよね

Wiredのフロントエンドに関する記事なのですが、「そうね！そうね！」と思ってしまいました。ほんと、移り変わりが早いので、ナカナカ入るタイミングを見つけられないで、今に至ってしまってますからね。大縄跳びに、上手く入れないみたいな（笑）

Sort機能

Defaultで、Sortすることになっているので、Sortさせない列に対しては、以下のような設定をします。（一部抜粋）

    var table = new Tabulator("#example-table", {
        layout:"fitColumns",
        columns:[
...
           {title:"Gender", field:"gender", headerSort:false},

Fullは、こちらに。

Filter機能

Exampleを見ると、いろいろできますが、ここでは、「Text入力」と「選択入力」の二つを紹介。

    var table = new Tabulator("#example-table", {
        layout:"fitColumns",
        columns:[
           {title:"Name", width:150, headerFilter:true},
...
           {title:"Favourite Color", field:"col",
　　　　　　　　　 headerFilter:"select", headerFilterParams:{values:true}},
...

「headerFilter:true」は、「headerFilter:“input”」でも同様です。
「headerFilterParams」の値は、リスト的もしくは辞書的での表記が可能ですが、ここでは、要素全てからリストを生成しています。詳しくは、TabulatorのExampleを見てください。
上記は、先程のFullと同じソースになります。

手元では

自家製のものはDB（SQLite3）の書き換えも行うので、TabulatorのDocumentにあるCallback機能なんかも、ゴニョゴニョしていたりします。見栄え云々はいつものように、放置するとして、機能的には、ほぼ満足してる状況です。