TabulatorというJavaScriptライブラリを使ってみる

⇧ 1983年にファミコンが出てから、映像の進化が凄まじいですからな。

TabulatorというJavaScriptライブラリを使ってみる

業務で存在を知ったので、利用してみる。

Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array or JSON formatted data.

https://github.com/olifolkerd/tabulator

⇧ ということらしく、データを表形式のフォーマットで表示できると。

CSVファイルは、

www.city.hamamatsu.shizuoka.jp

⇧ 上記のものを利用させていただきました。

CORS（Cross-Origin Resource Sharing）の問題でWebサーバー用意したりは面倒だったので、ローカルのファイルを利用する感じで。

■C:\Users\Toshinobu\Desktop\soft_work\javascript_work\tabulator\index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<h1>Tabulator</h1>
<input id="file" type="file" accept=".csv"/>
<div id="table"></div>

<script type="text/javascript">
  var tabulator_table=function(csvData){

      new Tabulator("#table", {
          pagination: "local",
          paginationSize: 20,
          data:csvData,
          importFormat:"csv",
          columns: [
              {
                  title:"施設名称",
                  field:"施設名称",
              },
              {
                  title:"業種",
                  field:"業種",
              },
              {
                  title:"種目",
                  field:"種目",
              },
              {
                  title:"施設所在地",
                  field:"施設所在地",
              },
              {
                  title:"施設気付",
                  field:"施設気付",
              },
              {
                  title:"施設電話番号",
                  field:"施設電話番号",
              },
              {
                  title:"新規営業許可取得月",
                  field:"新規営業許可取得月",
              },
              {
                  title:"緯度",
                  field:"緯度",
              },
              {
                  title:"経度",
                  field:"経度",
              },
              {
                  title:"NO",
                  field:"NO",
              },
              {
                  title:"区",
                  field:"区",
              }
          ]
      });
  }

  document.getElementById("file").addEventListener("change", e => {
    const files = e.target.files;

    // FileReaderの準備
    const reader = new FileReader();
    
    reader.addEventListener("load", () => {
      // ファイルから読み取った文字列を変数resultに格納
      const csvData = reader.result;
      // CSVデータをコンソールに表示
      console.table(csvData);
      // Tabulatorで表示
      tabulator_table(csvData);
    });

    // 選択されたファイルを読み込む
    reader.readAsText(files[0], 'Shift-JIS');
  });
  
</script>

で、ブラウザにindex.htmlをドラッグ&ドロップして、「ファイルを選択」でダウンロードしていたCSVファイルを選択すると、

⇧ Tabulatorで表形式のフォーマットで表示されました。

フィルターで絞り込みもできるみたいなので、フィルターを追加バージョンも。

■C:\Users\Toshinobu\Desktop\soft_work\javascript_work\tabulator\index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<h1>Tabulator</h1>
<input id="file" type="file" accept=".csv"/>
<div id="table"></div>

<script type="text/javascript">
  var tabulator_table=function(csvData){

      new Tabulator("#table", {
          pagination: "local",
          paginationSize: 20,
          data:csvData,
          importFormat:"csv",
          columns: [
              {
                  title:"施設名称",
                  field:"施設名称",
                  headerFilter: true
              },
              {
                  title:"業種",
                  field:"業種",
                  headerFilter: true
              },
              {
                  title:"種目",
                  field:"種目",
                  headerFilter: true
              },
              {
                  title:"施設所在地",
                  field:"施設所在地",
                  headerFilter: true
              },
              {
                  title:"施設気付",
                  field:"施設気付",
                  headerFilter: true
              },
              {
                  title:"施設電話番号",
                  field:"施設電話番号",
                  headerFilter: true
              },
              {
                  title:"新規営業許可取得月",
                  field:"新規営業許可取得月",
                  headerFilter: true
              },
              {
                  title:"緯度",
                  field:"緯度",
                  headerFilter: true
              },
              {
                  title:"経度",
                  field:"経度",
                  headerFilter: true
              },
              {
                  title:"NO",
                  field:"NO",
                  headerFilter: true
              },
              {
                  title:"区",
                  field:"区",
                  headerFilter: true
              }
          ]
      });
  }

  document.getElementById("file").addEventListener("change", e => {
    const files = e.target.files;

    // FileReaderの準備
    const reader = new FileReader();
    
    reader.addEventListener("load", () => {
      // ファイルから読み取った文字列を変数resultに格納
      const csvData = reader.result;
      // CSVデータをコンソールに表示
      console.table(csvData);
      // Tabulatorで表示
      tabulator_table(csvData);
    });

    // 選択されたファイルを読み込む
    reader.readAsText(files[0], 'Shift-JIS');
  });
  
</script>