Tabulatorを使ってみる

ryoko hayashi/ 2024年 11月 5日/ 技術 JavaScript Tabulator

こんにちは！林です。

Tabulatorに触れる機会があったので、
基本的な使い方について、まとめてみました。

公式：https://tabulator.info/

Tabulatorを読み込む

<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>

Htmlにdivを配置する

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

Scriptにデータとテーブルを定義する

    var tabledata1 = [
        {id:1, name:"山田 太郎", age:"25", color:"blue", birthday:"1999-05-15"},
        {id:2, name:"佐藤 花子", age:"30", color:"pink", birthday:"1994-03-22"},
        {id:3, name:"鈴木 次郎", age:"28", color:"green", birthday:"1996-07-08"},
        {id:4, name:"高橋 美咲", age:"2", color:"orange", birthday:"2022-11-11"},
        {id:5, name:"伊藤 健", age:"35", color:"red", birthday:"1989-01-19"},
    ];
    var table = new Tabulator("#example-table1", {
        data:tabledata1,
        columns:[
            {title:"ID", field:"id", width:100},
            {title:"名前", field:"name", width:200},
            {title:"年齢", field:"age", hozAlign:"right", sorter:"number"},
            {title:"好きな色", field:"color", formatter:"color"},
            {title:"誕生日", field:"birthday", hozAlign:"center"},
        ],
    });

formatterが用意されていて、文字列以外(色、プログレスバー、チェックボックスなど)を表示することもできます。

その他にも、行追加、行削除、複数行選択（一括選択、一括解除）、
スプレッドシート、一覧のCSV出力など、
一覧画面系でよくある仕様が簡単に実装できそうです。