<!DOCTYPE html>
<html>
<head>
    <title>単純にCSVをテーブルにするだけ</title>
    <link href="tabulator.min.css" rel="stylesheet">
    <script src="tabulator.min.js"></script>
    <script src="papaparse.min.js"></script>
</head>
<body>
    <input type="file" id="csvFile" accept=".csv">
    <div id="table"></div>

    <script>
    document.getElementById('csvFile').addEventListener('change', function(e){
        var file = e.target.files[0];
        Papa.parse(file, {
            header: true,
            complete: function(results) {
                var data = results.data;
                var columns = results.meta.fields.map(function(field){
                    return {title: field, field: field};
                });
                var table = new Tabulator("#table", {
                    data: data, 
                    columns: columns,
                    layout:"fitColumns"
                });
            }
        });
    });
    </script>
</body>
</html>

解説

まずはHTMLでCSVの受け取りと、テーブルを受け取るコードを書きます

    <input type="file" id="csvFile" accept=".csv">
    <div id="table"></div>

次にdocument.getElementById('csvFile').addEventListener('change', function(e){でCSVが指定された時の動作を決めます。

var file = e.target.files[0]; //id:csvFileがチェンジしたとき、そのCSVを受け取る変数
Papa.parse(file, { //jQueryでもできますが、papaparseでCSVを受け取り
  header: true,
  complete: function(resulelts) { //CSVを読み込み終わった後の動作
	var data = results.data; //読み込まれたCSVがresultsに格納されているため、それをdata変数へ移す
        var columns = results.meta.fields.map(function(field){ //配列のMAP操作を使って、resultsからデータを１つずつ抜き取る
        return {title: field, field: field};
  });

new Tabulatorで新しいtabulatorインスタンスを設定

var table = new Tabulator("#table", {
  data: data, //CSVをdata変数にしたものを、Tabulatorのdataへと移す
  columns: columns,　//CSVから１つずつ抜いたデータをTabulatorのcolumnsへ移す
  layout:"fitColumns"　//tabulatorのレイアウトのひとるfitColumnsを選択

こんな感じになります。

https://clipchamp.com/watch/vPkwJZgurVE

長くなったので、続きはまた別記事にします。

経緯

使用可能な環境

とりあえず解決策を考えてみた（技術選考）

図解（単に使ってみたかったMermaid.js）

まずはシンプルにCSVを出力してみる

解説

Discussion