日: 2023年1月11日

Tabulator CSVを読み込んでテーブルのデータにする

投稿日: 投稿者:

 

 

 

Tabulatorのドキュメントを読んでみると、JSONの他、CSVファイルもインポートしてテーブルのデータとして使えるので、試してみました。
列タイトル、カラムのフォーマットなどに拘らなければ少ない記述でかんたんに出来ることがわかりました。

< コード例 >


// HTML //
<div id="apidocs_body" class="card-body">
  <table id="usedata-table"></table>
</div>

// CSVファイル読込 自作jQueryラッパークラス //
const ajax = new MyAjax("document/DataSources.csv", {}, "text")
const csvData = ajax.exec()

// ++ Tabulatorで表示 ++ //
const table = new Tabulator("#usedata-table", {
  data: csvData,
  importFormat: "csv",
  autoColumns: true,
})

< データ例 >

種別,ソース,方法,サーバーPG,有料
AIRPORT メイン,Multi,MyAPI,PHP,
AIRPORT 滑走路,AeroDataBox,MyAPI,PHP,
AIRPORT ルート明細,AeroDataBox,MyAPI,Java,  *
"AIRPORT 地図 (空港, 滑走路)",国土交通省 MyData,MyAPI,Java,
AIRLINE メイン,Multi,MyAPI,PHP,
AIRLINE 機材別合計,Multi,MyAPI,Java,
AIRLINE 機材明細,Multi,MyAPI,PHP,
AIRLINE 機材登録履歴,AeroDataBox,Direct,,  *
AIRLINE 機材写真,PLANESPOTTERS,Direct,,
AIRLINE 地図 (機材カレント),AirLabs,Direct,,  *
AIRCRAFT メイン,Multi,MyAPI,PHP,
AIRCRAFT 検索項目,MyDB,,,
AIRCRAFT 機材指定オペレータ別機数,Multi,MyAPI,PHP,
AIRCRAFT 機材写真,PLANESPOTTERS,Direct,,
// == 以下省略 == //

< 画面例 >
何もセットしなければ、デフォルトで1行目をカラムヘッダーにしてくれます。