テーブルヘッダーはデフォルトで固定されています。
カラムを固定にしたい場合は、そのカラムの属性 frozen を true に設定します。
ブラウザの幅を小さくするとテーブルにスクロールが表示され、 左端のカラム(日付)が固定されるのが確認できます。
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"xxxxxxxxxx 日付 xxxxxxxx",
field:"date",
frozen: true,
},
データ定義
{ dateE : "Nov 1", date:"11/1" , item: "bb"},
{ dateE : "Aug 5", date:"8/5" , item: "bb"},
{ dateE : "Mar 30",date:"5/30" , item: "aa1"},
{ dateE : "Mar 30",date:"5/30" , item: "aa5"},
{ dateE : "Mar 30",date:"5/30" , item: "aa3"},
{ dateE : "Mar 30",date:"5/30" , item: "aa4"},
{ dateE : "Mar 30",date:"5/30" , item: "aa0"},
{ dateE : "Aug 10",date:"8/10" , item: "bb"},
{ dateE : "Jan 10",date:"1/10" , item: "bb"},
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title> frozen でカラムを固定する </h1>
<div id="table"></div>
<script type="text/javascript">
var show_table=function(){
var tdata = [
{ dateE : "Nov 1", date:"11/1" , item: "bb"},
{ dateE : "Aug 5", date:"8/5" , item: "bb"},
{ dateE : "Mar 30",date:"5/30" , item: "aa1"},
{ dateE : "Mar 30",date:"5/30" , item: "aa5"},
{ dateE : "Mar 30",date:"5/30" , item: "aa3"},
{ dateE : "Mar 30",date:"5/30" , item: "aa4"},
{ dateE : "Mar 30",date:"5/30" , item: "aa0"},
{ dateE : "Aug 10",date:"8/10" , item: "bb"},
{ dateE : "Jan 10",date:"1/10" , item: "bb"},
];
new Tabulator("#table", {
data:tdata,
height:200,
columns: [
{
title:"xxxxxxxxxx 日付 xxxxxxxx",
field:"date",
frozen: true,
},
{
title:"xxxxxxxxxxx 日付(英) xxxxxxxxx",
field:"dateE",
},
{
title:"xxxxxxxxxxx item xxxxxxxxxxx",
field:"item",
}
]
});
}
</script>