Cells Templates

String templates

To customize data content and specify which data will be presented in DataTable and how, you can use templates. Data templates are set in the related column by attribute template.

By value wrapped in the hash signs (e.g. "#title#") you refer to the definite property of a data item.

You can read about templates syntax in the article Templates.Syntax.

Specifying data template for a specific column

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"title", header:"Film title",    template:"<strong>#title#</strong>",
        { id:"year",  header:"Release year" , template:"at #year#",}
    ]
});

Related sample:  Using String Templates

Templates can be used for presenting almost any content in DataTable (anything that can be done through HTML can be placed in DataTable cell) such as: images, links, numbers, string, dates.

Table 1 Templates for different types of content
Content Example of template
strings
template:"<strong>#title#</strong>"
images
template:"<img src='.imgs/#id#.jpg'/>"
links
template:"<a href='http://google.com?q=#title#'>#title#</a>"

Complex templates

You can set custom template for a column by presenting the template attribute as a function (function accepts raw object and returns the result string).

webix.ui({
    view:"datatable",
    columns:[
        {id:"title", header:"Film title"},
        {id:"votes", header:"Votes", template:function(obj){ 
            return obj.votes/1.2547;
        }};
    ],
    ...
})

Related sample:  Converting Strings to Dates

For more on styling, read article Styling DataTable

Combining templates and formats

If you want to use both template and format for the same column, you should include the formatting method into a template function:

webix.ui({
    view:"datatable",
    columns:[
        {id:"votes", header:"Votes", template:function(obj, common){
            return "no more than "+ webix.i18n.numberFormat(obj.votes);
        }}
    ],
    ...
})

Adding buttons in templates

You can insert any custom html to the row elements, which gives an easy way for adding buttons or similar controls to DataTable rows

webix.ui({
    view:"datatable",
    columns:[
        {id:"votes", header:"Votes",
        template:"#votes#<input type='button' value='Details' class='details_button'>"}
    ],
    onClick:{
        details_button:function(id, ev){
            //will be called on button click
            some_custom_method(id.row, id.column);
        }
    }
    ...
})

Related sample:  Datatable: Custom Handler

Parameters of Template Function

This is the full list of a template function for Datatable and TreeTable:

  • obj - each data item
  • common - common elements declared in type
  • value - the value of the current cell
  • col - the column configuration
  • ind - the index of the current data item

Note that such function still has to return a string with text or valid HTML.

Built-in templates

Through the template you can define common elements for the cells belonging to one and the same column, namely:

You can define additional common elements within the component type.

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"ch1", header:"", template:"{common.checkbox()}"},
        { id:"ra1", header:"", template:"{common.radio()}"}
    ]
});

Related sample:  Checkbox and Radio in DataTable

Learn more about checkboxes and radios in a separate article - Checkbox and Radio in DataTable.

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"edit", header:"", template:"{common.editIcon()}"},
        { id:"trash", header:"", template:"{common.trashIcon()}"}
    ]
});

You can set built-in template via a function:

webix.ui({
    view:"datatable",
    ...
    columns:[
        //for radio and checkbox
        { id:"ra1", template:function(obj, common, value, config){
             return common.radio(obj, common, value, config);
        }}, 
        //for editIcon and trashIcon
        { id:"edit", header:"", template:function(obj, common){
            return common.editIcon(obj, common);
        }}
    ]
});

As you can see, common.checkbox() and common.radio() functions take four parameters:

  • item object with its properties from the dataset;
  • common object with four methods:
    • common.checkbox(obj, common, value, config);
    • common.radio(obj, common, value, config);
    • common.editIcon(obj, common);
    • common.trashIcon(obj, common);
  • value - current checkbox/radio state;
  • config - column configuration object.
Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of datatable product.