Tabulatorで行こう！ 〜違うじゃん編〜

あれから数日

タイトルに書いてしまってるので、なんですが（笑）
「table.js」に、再度落ち着いたと思いきや、結局、別のLibraryをいじってるという日々でした。
「Tabulator」という多機能のTable操作のライブラリです。
まだ、最終的にやりたいことはできてないのだけど、落とし所は過ぎてるので、カキコ。

初動のハマり箇所

いつものように、ぐぐる先生に、お手伝いをいただきますと、

$("#tabulator-example").tabulator({
    layout:"fitColumns",
...

と表現されているところが多いのですが、実は、

var table = new Tabulator("#example-table", {
    layout:"fitColumns",
...

というのが、最新では紹介をされています。最初の方は、「jQuery」とセットになってるお話なんですが、最新では、いりません。ちなみに、最新は、4.1です。
それでも、ｊQueryという場合には、

<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>

Wrapperが用意されているので、それをimportしてください、ということになっています。（パスは読み替え要です）

必要な設定

最低限の設定は、以下になります。

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

後はいりません。まじめに。

例題サンプルから

Full Textではなく、部分的に、表示します。Fullは、こちらに。

<div id="example-table"></div>

<script type="text/javascript">
    var tabledata = [
        {id:1, name:"Oli Bob", age:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
...
    ];
           
    var table = new Tabulator("#example-table", {
        data:tabledata,
        layout:"fitColumns",
        columns:[
           {title:"Name", field:"name", width:150},
...

Tableに表示するDataも表示表現も全てscript内に押し込んでいるのが、最初のサンプルです。ただ、これだと、script内は肥大化する一方となってしまうので、分離することを考えます。columns文自体は、ここで、諸々の表現をするので、残ってしまいますけど。（まあ、やれなくはないのでしょうけど、そこまではいいかな、という判断です。）

データは外から

Fullは、こちらに。

<table id="example-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
...
<script type="text/javascript">
    var table = new Tabulator("#example-table", {
        layout:"fitColumns",
...

Tableタグで、id属性を設定するのと、theadとtbodyで表示をさせれば、Data自体は定義が終わりです。
文字数削減のために、以下のようなこともできる模様（試したの）。

<thead>
<tr>
<th tabulator-field="n"></th>
...
   {title:"Name", field="n"},
...

この場合、columns文をフルで記述する必要があるので、一長一短かもしれませんが。デフォルトで、Sorting有の状態なので、Sortingしない列はどうしても記述させる必要があります。かなり自由と言えば、自由なんですけどね（笑）

連携

Flaskとの連携を前提で考えているので、Table表現でのやり方は、スムーズにいけるかな、というのが今時点での感想。ただ、あれこれ試してて、一喜一憂してるのも事実（笑）（この投稿書くだけでも、七転八倒の結果ですしね）