Version 6.0 Released!

Click to checkout the new features

Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.0

Menus

Overview

Tabulator has a range of options for providing context menus and header menus on a table.

In the example below the headerMenu column definition option is used to add a menu to column headers, and the rowContextMenu option is used to add a right click context menu to rows.

Loading Example...
Source Code

HTML

<div id="example-table"></div>

JavaScript

//define row context menu contents
var rowMenu = [
    {
        label:"<i class='fas fa-user'></i> Change Name",
        action:function(e, row){
            row.update({name:"Steve Bobberson"});
        }
    },
    {
        label:"<i class='fas fa-check-square'></i> Select Row",
        action:function(e, row){
            row.select();
        }
    },
    {
        separator:true,
    },
    {
        label:"<i class='fas fa-trash'></i> Delete Row",
        action:function(e, row){
            row.delete();
        }
    },
]

//define row context menu
var headerMenu = [
    {
        label:"<i class='fas fa-eye-slash'></i> Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
    {
        label:"<i class='fas fa-arrows-alt'></i> Move Column",
        action:function(e, column){
            column.move("col");
        }
    }
]

//initialize table
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    rowContextMenu: rowMenu, //add context menu to rows
    columns:[
        {title:"Name", field:"name", headerMenu:headerMenu},
        {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", headerMenu:headerMenu},
        {title:"Gender", field:"gender", headerMenu:headerMenu},
        {title:"Rating", field:"rating", hozAlign:"center", headerMenu:headerMenu},
        {title:"Favourite Color", field:"col", headerMenu:headerMenu}, //add menu to this column header
    ],
});

Menu Items

Each menu option accepts an array of menu item objects, with each object representing an item in the menu

var table = new Tabulator("#example-table", {
    rowContextMenu: [
        {
            label:"Hide Column",
            action:function(e, column){
                column.hide();
            }
        },
        {
            separator:true,
        },
        {
            disabled:true,
            label:"Move Column",
            action:function(e, column){
                column.move("col");
            }
        }
    ]
});

Labels

The label is a mandatory property for standard menu items and sets the display text for the item

This property can take either a string, HTML or a DOM Node for the labels contents

{
    label:"Hide Column",
}

Alternativly you can pass a function to this property which will be called when the menu is loaded. A Component for the column/cell/row that triggered the menu will be passed in as the first argument. The function should return the contents for the label as outlined above.

{
    label:function(component){
        //component - column/cell/row component that triggered the menu

        return "Delete " . component.getData().name; //customise menu contents with row data
    },
}

Action

The action is a mandatory property for standard menu items and sets a callback that will be triggered when the menu item is clicked

The first argument is the event object for the click event on the menu item. The second argument will be a column/cell/row Component for the component that triggered the menu

{
    action:function(e, component){
        //e - click event from the menu item click
        //component - column/cell/row component that triggered the menu

        return component.delete(); //delete the row the context menu was loaded on
    },
}
e action this is a callback that will be triggered if the user clicks on the menu item, it is passed two arguments

Columns of the table can be set as editable using the editor property in the column definition. (see Define Columns for more details).

Disabled Items

You can disable a menu item by setting the disabled property to true on the item. This will grey out the item in the menu and prevent the user from clicking on it

{
    disabled:true,
}

Alternativly you can pass a function to this property which will be called when the menu is loaded. A Component for the column/cell/row that triggered the menu will be passed in as the first argument. The function should return a boolean to indicate the status of the item, a value of true will disable the item, a value of false will enable the item.

{
    disabled:function(component){
        //component - column/cell/row component that triggered the menu

        return !component.getData().approved; //disable the menu item if the row data approved property is true
    },
}

Separators

You can add a horizontal separator to a list of menu items by including an object with the separator property set to true

{
    separator:true,
}

Menu Items Generator Function

If you would prefer to generate your menu item layout when the menu is opened you can pass a callback function to any of the menu options.

A Component for the column/cell/row that triggered the menu will be passed in as the first argument. The function should return an array of menu objects for the menu.

If the function returns a value of false or an empty array, the menu will not be shown

var table = new Tabulator("#example-table", {
    rowContextMenu: function(component){

        var menu = [];

        if(!component.getData().approved){
            menu.push({
                label:"Approve User",
                action:function(e, column){
                    component.update({"approved":true});
                }
            })
        }else{
            menu.push({
                label:"Unapprove User",
                action:function(e, column){
                    component.update({"approved":false});
                }
            })
        }

        return menu;
    }
});

Column Header Menus

You can add a menu to any column by passing an array of menu items to the headerMenu option in that columns definition.

Adding a header menu will cause a button to appear to the left of the column header title. clicking on this button will open the menu.

//define row context menu
var headerMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerMenu:headerMenu}, //add menu to this column header
    ]
});

Column Group Header Menus

Column header menus can also be added to column groups using the same headerMenu option, but declared in the column group object

//define row context menu
var headerMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {
            title:"Column Group",
            headerMenu:headerMenu, //add a menu to this column header
            columns:[
                {title:"Name", field:"name", width:200},
                {title:"Age", field:"age", width:200}
            ]
        }
    ]
});

Column Header Context Menus

You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu table setup option.

//define row context menu
var headerContextMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerContextMenu:headerContextMenu}, //add a context menu to this column header
    ]
});

Column Group Header Context Menus

Column header context menus can also be added to column groups using the same headerContextMenu option, but declared in the column group object

//define row context menu
var headerContextMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {
            title:"Column Group",
            headerContextMenu:headerContextMenu, //add a context menu to this column header
            columns:[
                {title:"Name", field:"name", width:200},
                {title:"Age", field:"age", width:200}
            ]
        }
    ]
});

If you declare context menu in both column headers and column group headers then which menu appears will depend on where the user clicks.

Column Cell Context Menus

You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition.

//define row context menu
var cellContextMenu = [
    {
        label:"Reset Value",
        action:function(e, cell){
            cell.setValue("");
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, contextMenu:cellContextMenu}, //add a context menu to the cells in this column
    ]
});

Row Context Menus

You can add a right click context menu to rows passing an array of menu items to the rowContextMenu option in that columns definition.

var table = new Tabulator("#example-table", {
    rowContextMenu:[
        {
            label:"Delete Row",
            action:function(e, row){
                row.delete();
            }
        },
    ]
});

Group Header Context Menus

You can add a right click context menu to row group headers passing an array of menu items to the groupContextMenu option in that columns definition.

var table = new Tabulator("#example-table", {
    groupContextMenu:[
        {
            label:"Hide Group",
            action:function(e, group){
                //e - context click event
                //group - group component for group

                group.hide();
            }
        },
    ]
});
Donate