Available only in PRO Edition

Datatable Header Menu

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.

Simple Configuration

The simplest header menu is set with the help of the headermenu property of DataTable and has the following features:

  • it is triggered by a right click over the header of any column;
  • each menu item stands for a column;
  • hidden columns are included into the menu without an "eye" (visible) icon;
  • the height of the menu is adjusted to the number of menu items;
  • the width of the menu is 150px.
{ view:"datatable", columns:[// columns configuration], headermenu:true}

Related sample:  Header Menu in the DataTable

Extended Configuration

HeaderMenu can be presented as a JSON object with configuration options for the menu list. The options duplicate Webix list properties and may include:

  • width (number) - the width of the popup in pixels;
  • height (number) - the height of the popup in pixels;
  • autoheight (boolean) - if true, adjusts the popup height to the number of menu items. True by default;
  • autowidth (boolean) - if true, adjusts the popup width to show all menu items. False by default;
  • yCount (number) - the number of menu items to show;
  • scroll (boolean) - if true, enables a scrollbar. False by default;
  • spans (boolean) - to hide (false)/ show (true) columns with related spans;
  • data (object) - the columns to show in the menu (if not set, all columns are displayed in the menu). Each item contains:
    • id - the ID of a datatable column (the same one it has in the columns configuration);
    • value - the title of a datatable column (its header, as a rule).
  • template (string) - the template of menu items (if you need to show a property other than value in the list).

Scrollable header menu with extra width

view:"datatable",
columns:[/* columns configuration */],
headermenu:{
    width:250,
    autoheight:false,
    scroll:true
}

Related sample:  Datatable: Extended Header Menu

Header menu with limited item quantity

view:"datatable", 
columns:[// columns configuration],
headermenu:{
    data:[
        { id:"year", value:"Released"},
        { id:"rating", value:"Rating"}
    ]
}

Related sample:  Datatable: Extended Header Menu

Excluding a column from the menu

To exclude any column from the header menu, one should define the 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"}
    ]
}

Attaching HeaderMenu to Other Elements

Extra "headermenu" column

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.

The content property of a header line is also used to set built-in filters and define column groups.

Showing header menu on demand

The headermenu unique ID can be accessed through the 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:[// columns configuration], 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
If you have not checked yet, be sure to visit site of our main product Webix html5 ui library and page of ui datagrid product.