Tabulatorを使ってみた

[AM送信所マップを作ってみた](https://qiita.com/yamori813/items/8f73c649a7971cfa202d)のjsonをTabulatorで表にしてみました。

ローカルファイルからgistのrawデータを読むとCORSのエラーが出るのでTabulatorのajaxは使わず、一旦jqueuryでデータを取得してから、Tabulatorに渡すようにしてみました。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AM DX LIST</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
    <script>
        function init() {
            $.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
    //取得成功したら実行する処理
            var tableData = data.radio;
            var table = new Tabulator("#example-table", {
            data: tableData,
            columns: [
            {
                title: "略称",
                field: "name"
            },
            {
                title: "会社",
                field: "corporation"
            },
            {
                title: "コールサイン",
                field: "callsign"
            },
            {
                title: "周波数",
                field: "frequency"
            },
            {
                title: "出力",
                field: "power"
            },
        ]
    });
    });
};

    </script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>
```

周波数でソートできるのは便利です。複数のフィールドでソートしたい場合はctrlかshiftキーを押してクリックします。

![Screenshot_2020-10-27 AM DX LIST(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/8503ebd9-e9b8-6108-5302-4fd9933aa933.png)

ちょっと見やすくしてみた。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AM DX LIST</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
    <script>
function customFilter(data, filterParams){
return 1; 
}
        function init() {
            var kw = function(cell) {
                return cell.getValue() / 1000;
            }
            $.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
    //取得成功したら実行する処理
            var tableData = data.radio;
            var table = new Tabulator("#example-table", {
                rowClick:function(e, row){
                    var array = row.getData();
                    window.open("https://www.google.com/maps?t=k&q=" + array.latitude + "," + array.longitude);
                },
                data: tableData,
                columns: [
                {
                    title: "略称",
                    field: "name",
                    sorter:"string", headerSort:false
                },
                {
                    title: "会社",
                    field: "corporation",
                    sorter:"string", headerSort:false
                },
                {
                    title: "コールサイン",
                    field: "callsign",
                    sorter: function(a, b, aRow, bRow, column, dir, sorterParams){
                        var astr = a.charAt(3) + a.charAt(2);
                        var bstr = b.charAt(3) + b.charAt(2);
                        return astr > bstr;
                    }
                },
                {
                    title: "周波数(kHz)",
                    field: "frequency",
                    align: "right"
                },
                {
                    title: "出力(kW)",
                    field: "power",
                    formatter: kw,
                    align: "right"
                },
            ]
        });
    });
};

    </script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>
```

![Screenshot_2020-10-27 AM DX LIST(3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/b24021f1-df45-d659-cec0-404e63c36129.png)

コールサインのソートはちょっと凝ってみました。:)

クリックするとgoogle mapの航空写真が開きます。日本全国オンラインアンテナめぐりができます。

![Screenshot_2020-10-28 35°14'42 7 N 136°11'17 0 E.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/19cc046c-6d22-0d83-8e09-0525bac828ea.png)

HTMLもgistに置いてブラウザで直接見れるようにしました。

https://gist.githack.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/list.html