Headers and Footers

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:

  1. A single line header;
  2. A multiline header;
  3. A single line (or multiline) header containing colspans (rowspans), built-in filters;

Footer can be presented as:

  1. Single-line footer;
  2. Multiline footer;
  3. A single line (or multiline) footer containing colspans (rowspans), built-in counter;

Additionally, both header and footer can be rotated and take custom height.

Single line header

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:

  • text labels;
  • images;
  • html inputs;
  • links.

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

Multiline 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

Complex header containing colspans (rowspans), built-in filters

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:

  1. text - the text label of a column;
  2. colspan - the number of columns a cell should span;
  3. rowspan - the number of rows a cell should span;
  4. content - functional header content, built-in filters or group definition;
  5. rotate - if true, switches header to rotated state;
  6. height - defines a custom height for a header line;
  7. css - the name of a CSS class that will be applied to the column header.

Colspan

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

Rowspan

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

Built-in filters

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.

Header Menu

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.

Single line footer

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

Multiline footer

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", ""]}
]

Complex footer containing colspans/rowspans

Colspans and rowspans are used under the same logic as with headers. Footer line should be presented as an object that may contain:

  1. text - the text label of a footer;
  2. colspan - the number of columns a cell should span;
  3. rowspan - the number of rows a cell should span;
  4. content - the built-in functor of a column (summColumn);
  5. rotate - if true, switches footer to rotated state;
  6. height - defines height for a footer line;
  7. css - the name of a css class that will be applied to the column footer.

Colspans in footer

columns:[
    { id:"rank",  footer:{text:"Total", colspan:3}},
    { id:"title", ...},
    { id:"year", ...},
    { id:"votes", footer:"12547"}
]

Sum counter in the footer

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

Rotated header/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}
    }
]

Related sample:  Header rotate

Custom Height for Header and Footer

To set a custom height, present the header or 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

Autoheight for Header and Footer

It's also possible to enable autoheight for the header and the footer of DataTable. Thus the height of the header/footer will be adjusted to show its content.

For this, you need to set a header or a footer as an object and use the autoheight property with the true value:

columns:[
    {   
        id:"title",
        header:{
            text:"A multiline header for a film title column..",
            autoheight:true
        },
        footer: { 
            text:"A multiline footer for a film title column..", 
            autoheight:true 
        }, 
    }
]

Related sample:  Auto height for header lines

This functionality is also avalable for rotated header/footer lines:

columns:[
    { id:"title"},
    { id:"year",  header:{ text:"Released", autoheight:true, rotate:true }},
    { id:"votes", header:{ text:"Votes", rotate:true}}
]

Related sample:  Header rotate::Autoheight

Custom Header and Footer Content

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 are two mandatory methods refresh() that provides logic and render() that draws an element. Their parameters include:

  • master - component object (here: datatable);
  • column - related column object;
  • node - HTML element (here: header td).

You can either extend or redefine the functionality of any existing content element, or create a totally custom element

Extending Existing Content Element

For datatable footer there exists a prebuilt summColumn element that counts the sum from column rows and displays them under the main part or the datatable.

If you need to show an average value instead of a sum inherit from the summFilter and redefine its refresh():

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);

Creating Custom Content Element

A custom content element can be created totally from the scratch.

It must possess the following mandatory methods (declare them even if you don't need any specific performance from them):

  • getValue - gets the current value of an element;
  • setValue() - sets the value to an element;
  • render() - paints an element;
  • refresh() - defines dynamic performance of an element.

And you may define as many methods as you need.

A content element can feature the following properties:

  • trackCells (boolean) - indicates whether an element should be refreshed each time component data changes ( if true, refresh() method of a content element will be called automatically).
webix.ui.datafilter.customFilterName = {
    getValue:function(){}, //not used methods
    setValue: function(){},
    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