Tabulatorの使い方とサーバにアップしたら簡単にWebアプリが作成できる

Tabulatorの使い方とサーバにアップしたら簡単にWebアプリが作成できる
1. 関連

Tabulatorの使い方とサーバにアップしたら簡単にWebアプリが作成できる

Tabulatorを使えば対話式テーブルが簡単に作れます。v4.2をダウンロードしました。

dist/js/jquery_wrapper.min.js
dist/js/tabulator.min.js
dist/css/tabulator.min.css

テーブルを描画するだけならbody部は以下だけで良いです。

<body>
  <div id="example-table"></div> <!-- ここがレンダリング部分 -->
</body>

head部でjQueryとjQueryuiに依存しているみたいなので読み込む必要があります。ここではCDNで読み込んでいます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet"></link>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>

公式サイトみてもわかりづらいのでindex.htmlを全部載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet"></link>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>
<title>Tabulator</title>
<script type="text/javascript">
  $(function(){
    var sampleData = [
      {name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
      {name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
      {name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
      {name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
      {name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
    ];
    var table = new Tabulator("#example-table", {
      data:sampleData,
      layout:"fitColumns",
      responsiveLayout:"hide",
      tooltips:true,
      addRowPos:"top",
      history:true,
      pagination:"local",
      paginationSize:7,
      movableColumns:true,
      resizableRows:true,
      initialSort:[
        {column:"name", dir:"asc"},
      ],
      columns:[
        {title:"Name", field:"name", editor:"input"},
        {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
        {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true},
        {title:"Color", field:"col", width:130, editor:"input"},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
        {title:"Driver", field:"car", width:90, align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
      ],
    });
  });
</script>
</head>
<body>
  <div id="example-table"></div>
</body>
</html>

デモ