Headers and footers in DataTable are enabled by the header, footer parameters and configured by attributes header, footer in the columns parameter.
Header can be presented as:
Footer can be presented as:
Additionally, both header and footer can be rotated and take custom height.
To define a simple (single line) header you should specify it as a string.
In this case you can put the following to the header:
Defining a single line header
columns:[
//header as a button
{ id:"col1", header:"<input type='button' value='Do something' class='dummy_button'>"},
// header as an image
{ id:"col2", header:"<img src='../common/imdb.png'>"},
//header as a text label
{ id:"col1", header:"Year"},
// header as a link
{ id:"col4", header:"<a href='http://google.com'>Link</a>"}
]
Related sample: Different types of content in the header
You should use 'array' definition to split header into several subheaders (each value of the array specifies a single subheader).
Defining a multiline header
columns:[
{ id:"rank", header:["#", ""]},
{ id:"title", header:["Film title", "Second line"]},
{ id:"year", header:["Year", ""]},
{ id:"votes", header:["Votes", ""]}
]
Note, you can specify different number of subheaders for different columns (number of subheaders is equal to number of values in array).
Related sample: Multiline header
To specify colspan(rowspan) in the header or put filter into it, you should specify the header as an object or array of objects.
When the header is presented as an object, it has the following properties:
To create a cell that will span across 2 (or more) columns you should use the following technique:
Using colspans
columns:[
{ id:"title", header:["Film title", {text:"Subheader", colspan:3}]},
{ id:"year", header:["Year", ""]},
{ id:"votes", header:["Votes", ""]}
]
Related sample: Colspans and rowspans in the header
To create a cell that will span across 2 (or more) rows you should use the following technique:
Using rowspans
columns:[
{ id:"title", header:[{ text:"Film title", rowspan:2}]},
{ id:"year", header:["Year", ""]},
{ id:"votes", header:["Votes", ""]}
]
Related sample: Colspans and rowspans in the header
To put filter into the header, you should use the following technique:
Using filters in the header
columns:[
{ id:"title", header:["Film title",{ content:"textFilter"}]},
{ id:"year", header:"Released"},
{ id:"votes", header:"Votes"}
]
Related sample: Filters in the header
More information about built-in and custom filters is in the separate article.
The functionality is available in Webix Pro edition only.
Built-in header menu allows end users to control visibility of the columns by several mouse clicks. The definition is as well simple:
{ view:"datatable", columns:[...], headermenu:true}
Related sample: Header menu in the DataTable
Headermenu can be customized. For more details, go to the Datatable Header Menu article.
By default, headers are enabled whereas footers are disabled.
So, before using footers - enable them.
Enabling footers in DataTable
grid = new webix.ui({
view:"datatable",
...
footer:true
});
Then, use all the same logic as for headers:
Using footers
columns:[
//footer as a button
{ id:"col1", footer:"<input type='button' value='Do something' class='dummy_button'>"},
// footer as an image
{ id:"col2", footer:"<img src='../common/imdb.png'>"},
//footer as a text label
{ id:"col1", footer:"Year"},
// footer as a link
{ id:"col4", footer:"<a href='http://google.com'>Link</a>"}
]
Related sample: Standard header(footer) implementation
Same as with header, multiline footer is comprised of an array of texts for each footer line.
Defining a multiline footer
columns:[
{ id:"rank", footer:["Total", "Second line"]},
{ id:"title", footer:["", ""]},
{ id:"year", footer:["", ""]},
{ id:"votes", footer:["12547", ""]}
]
Colspans and rowspans are used under the same logic as with headers. Footer line should be presented as an object that may contain:
Colspans in footer
columns:[
{ id:"rank", footer:{text:"Total", colspan:3}},
{ id:"title", ...},
{ id:"year", ...},
{ id:"votes", footer:"12547"}
]
The library provides the summColumn counter that can be used to get the total value in the footer of a column.
To put the counter into the footer, you should use the following technique:
Using the sum counter in the footer
columns:[
{ id:"rank", header:"", footer:{text:"Total:", colspan:3}},
{ id:"title", header:"Film title"},
{ id:"year", header:"Released"},
{ id:"votes", header:"Votes", footer:{content:"summColumn"}}
]
Related sample: Counter in the footer
Note that this feature is available in Webix Pro edition only.
To define rotated state for the header or footer you should specify it as an object (or array of objects in case of multiline header/footer).
Header height will be adjusted to text size.
columns:[
{ id:"year",
header:{ text:"Released", rotate:true },
footer:{ text:"Footer", rotate:true}
}
]
To set a custom height, present footer line as an object and use the height property:
columns:[
{ id:"title",
header:{ text:"Film title", height:25 },
footer:{ text:"80px footer", height:80}
}
]
Related sample: Custom height for header lines
All content elements that can be integrated to the datatable header or footer are stored in a webix.ui.datafilter object and feature the same configuration pattern.
There're two mandatory methods refresh() that provides logic and render() that draws an element. Their parameters include:
You can either extend or redefine the functionality of any existing content element, or create a totally custom element
For datatable footer there exists a pre-built summColumn element that counts the sum from all rows of the column and displays them under the grid main part.
If you, for instance, want the element to display an average value instead of the sum, redefine its refresh() method
webix.ui.datafilter.avgColumn = webix.extend({
refresh:function(master, node, value){
var result = 0;
master.mapCells(null, value.columnId, null, 1, function(value){
value = value*1;
if (!isNaN(value))
result+=value;
return value;
});
node.firstChild.innerHTML = Math.round(result/master.count());
}
}, webix.ui.datafilter.summColumn);
At the same time the new content element can be created from scratch. Remember that render() and refresh() and mandatory methods:
webix.ui.datafilter.customFilterName = {
refresh: function(master, node, column){
//event handlers
node.onchange = function(){...};
node.onclick = function(){...}
},
render:function(master, column){
var html = "";
return html;
}
};
Related sample: Custom content for header and footer
Back to top