Available only in PRO Edition
Datatable built-in header menu is used to control column visibility with the help of a dedicated popup list with column names.
By default it is enabled by a right click over any column header while clicks on menu items change the state of the corresponding columns.
The simplest header menu is set with the help of a datatable headermenu property and has the following features:
{ view:"datatable", columns:[...], headermenu:true}
Related sample: Header menu in the DataTable
Headermenu can be presented as a JSON object with configuration options for the menu list. The options duplicate Webix list properties and may include:
Scrollable header menu with extra width
view:"datatable",
columns:[...],
headermenu:{
width:250,
autoheight:false,
scroll:true
}
Related sample: Extended Header menu in the DataTable
Header menu with limited item quantity
view:"datatable",
columns:[...],
headermenu:{
data:[
{ id:"year", value:"Released"},
{ id:"rating", value:"Rating"}
]
}
Related sample: Extended Header menu in the DataTable
Excluding a column from the menu
To exclude any column from the header menu, one should define a headermenu property for it and set its value to false:
{
view:"datatable",
headermenu:true, //enables the header menu
columns:[
//excluding "id" column from the menu
{id:"id", header:"#", headermenu:false},
{id:"title", header:"Title"}, ...
]
}
Header menu can as well be shown by a left mouse click over the special datatable column that features a "headerMenu" content.
view:"datatable",
columns:[
{ header:{ content:"headerMenu" }, headermenu:false, width:35 }
]
Related sample: Header menu icon in the DataTable
If there is such a column in the datatable configuration, the headermenu property for it can be omitted.
Content property of a header line is also used to set built-in filters and define column groups.
The headermenu unique ID can be accessed through datatable config object. If you know this ID, you can work with the headermenu like with any other popup window, e.g. show it when needed.
webix.ui({
view:"datatable", id:"dt2", columns:[...], headermenu:true
});
//show the headermenu by API
function showMenu(node){
var menu = $$("dt2").config.headermenu;
$$(menu).show(node);
}
Related sample: Header menu icon in the DataTable
Back to top