今回は scrollToColumns() を使用して、 横に長いデータの途中から表示する方法について記述します。
scrollToColumns()の仕様は以下の通りです。
Tabulatorドキュメント「Scroll To Columns」
table.scrollToColumn("age", "middle", false); // ageフィールドが表示されていない場合は、フィールドを中央にスクロール
最初の引数はスクロールする列の標準列コンポーネント検索オプションのいずれかである必要があります。
2番目の引数はオプション。列の位置を設定するために使用されます。 値は"left", "middle", "right" 。 省略した場合、 デフォルトのscrollToColumnPositionオプションの値("left")に設定されます。
3番目の引数はオプション。列がすでに表示されている場合にテーブルをスクロールするかどうかを設定する。スクロールする場合はtrue、スクロールしない場合はfalse、省略した場合は デフォルトのscrollToColumnIfVisibleオプションの値("true")に設定されます。
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
const get_columns=()=>{
let col = [];
for(let i=0;i<50;i++){
col.push({ title:`a${i}`, field:`a${i}`});
}
return col;
}
データ定義
const get_data=()=>{
let data = {};
for(let i=0;i<50;i++){
data[`a${i}`] = i;
}
return [data,data,data];
}
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.6.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js"></script>
</head>
<body onload=show_table()>
<h1 id=title>横スクロール表示(scrollToColumns) </h1>
<p><div id="table"></div></p>
<script type="text/javascript">
const get_columns=()=>{
let col = [];
for(let i=0;i<50;i++){
col.push({ title:`a${i}`, field:`a${i}`});
}
return col;
}
const get_data=()=>{
let data = {};
for(let i=0;i<50;i++){
data[`a${i}`] = i;
}
return [data,data,data];
}
const show_table=function(){
let table = new Tabulator("#table", {
data:get_data(),
columns: get_columns(),
});
table.scrollToColumn("a15", "left", true)
.then(()=>{console.log('scroll success')})
.catch((error)=>{console.log(error, 'scroll fail')});
}
</script>