Menus
- Overview
- Column Header Menus
- Column Header Context Menus
- Column Cell Context Menus
- Row Context 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.
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 Header Context Menus
You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition.
//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 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 any columns cells by passing an array of menu items to the contextMenu option in that columns definition.
var table = new Tabulator("#example-table", { rowContextMenu:[ { label:"Delete Row", action:function(e, row){ row.delete(); } }, ] });