Tabulator tips

第14回 グループ分け、表示制限

2020.02.26

グループ分け

groupBy の指定により、カラムをグループにした表示ができます。

"#table" のテーブルで初期グループ groupBy: "dateE" を設定しました。

"#filter" のテーブルでプルダウンメニューから表示制限の処理を呼び出す処理を実装しました。

  • 日付でグループ分け table.setGroupBy('date')

  • 日付(英)でグループ分け table.setGroupBy('dateE')

  • 月でグループ分け table.setGroupBy('month')

表示制限

table.setFilter('表示条件') により表示制限を行うことができます。

  • カラム"month"が "Mar"の行だけ表示

    table.setFilter("month","=","Mar")

  • カラム"date"が 10 以上の行だけ表示

    table.setFilter("date",">=",10)

  • 表示制限解除

    table.clearFilter()

処理コード

var table = new Tabulator("#table", {
    groupBy: "dateE",

new Tabulator("#filter", {
    data:[ {filter:"---"} ],
    columns: [
        {
            title:"表示制限",
            field:"filter",
            editor:"select",
            editorParams:{
                values:[
                    "日付でグループ分け",
                    "日付(英)でグループ分け",
                    "月でグループ分け",
                    "Marのみ表示",
                    "日が１０日以上を表示",
                    "制限解除"
                ]
            },
            cellEdited: function(cell){
                var val = cell.getValue();
                if(val === "日付でグループ分け"){
                    if(table)table.setGroupBy('date');
                }
                else if (val === "日付(英)でグループ分け"){
                    if(table)table.setGroupBy('dateE');
                }
                else if (val === "月でグループ分け"){
                    if(table)table.setGroupBy('month');
                }
                else if(val === "Marのみ表示") {
                    if(table)table.setFilter("month","=","Mar");
                }
                else if (val === "日が１０日以上を表示") {
                    if(table)table.setFilter("date",">=",10);
                }
                else if (val === "制限解除"){
                    if(table)table.clearFilter();
                }

            }
        }
    ]
});

以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{ title:"日付",     field:"date" },
{ title:"日付(英)", field:"dateE" },
{ title:"月",       field:"month" },
{ title:"日",       field:"date" }

データ定義

{ dateE : "Nov 1", date:"11/1" , month: "Nov", date:1},
{ dateE : "Aug 5", date:"8/5"  , month: "Aug", date:5},
{ dateE : "Mar 30",date:"5/9" ,  month: "Mar", date:9},
{ dateE : "Mar 30",date:"5/3"  , month: "Mar", date:3},
{ dateE : "Mar 30",date:"5/5"  , month: "Mar", date:5},
{ dateE : "Mar 30",date:"5/15" , month: "Mar", date:15},
{ dateE : "Mar 30",date:"5/30" , month: "Mar", date:30},
{ dateE : "Aug 10",date:"8/10" , month: "Aug", date:10},
{ dateE : "Jan 10",date:"1/10" , month: "Jan", date:10},

実行結果

サンプルコード

<!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> グループ分け、表示制限 </h1>

<p><div id="filter"></div></p>
<p><div id="table"></div></p>

<script type="text/javascript">
var show_table=function(){
    var tdata = [
        { dateE : "Nov 1", date:"11/1" , month: "Nov", date:1},
        { dateE : "Aug 5", date:"8/5"  , month: "Aug", date:5},
        { dateE : "Mar 30",date:"5/9" ,  month: "Mar", date:9},
        { dateE : "Mar 30",date:"5/3"  , month: "Mar", date:3},
        { dateE : "Mar 30",date:"5/5"  , month: "Mar", date:5},
        { dateE : "Mar 30",date:"5/15" , month: "Mar", date:15},
        { dateE : "Mar 30",date:"5/30" , month: "Mar", date:30},
        { dateE : "Aug 10",date:"8/10" , month: "Aug", date:10},
        { dateE : "Jan 10",date:"1/10" , month: "Jan", date:10},
    ];
    var table = new Tabulator("#table", {
        groupBy: "dateE",

        data:tdata,
        columns: [
            { title:"日付",     field:"date" },
            { title:"日付(英)", field:"dateE" },
            { title:"月",       field:"month" },
            { title:"日",       field:"date" }
        ]
    });
    new Tabulator("#filter", {
        data:[ {filter:"---"} ],
        columns: [
            {
                title:"表示制限",
                field:"filter",
                editor:"select",
                editorParams:{
                    values:[
                        "日付でグループ分け",
                        "日付(英)でグループ分け",
                        "月でグループ分け",
                        "Marのみ表示",
                        "日が１０日以上を表示",
                        "制限解除"
                    ]
                },
                cellEdited: function(cell){
                    var val = cell.getValue();
                    if(val === "日付でグループ分け"){
                        if(table)table.setGroupBy('date');
                    }
                    else if (val === "日付(英)でグループ分け"){
                        if(table)table.setGroupBy('dateE');
                    }
                    else if (val === "月でグループ分け"){
                        if(table)table.setGroupBy('month');
                    }
                    else if(val === "Marのみ表示") {
                        if(table)table.setFilter("month","=","Mar");
                    }
                    else if (val === "日が１０日以上を表示") {
                        if(table)table.setFilter("date",">=",10);
                    }
                    else if (val === "制限解除"){
                        if(table)table.clearFilter();
                    }

                }
            }
        ]
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index