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 article Templates.Syntax.

Specifying data template for a specific column

grid = new 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).

grid = new 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:

grid = new 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

grid = new webix.ui({
    view:"datatable",
    columns:[
      {id:"votes", header:"Votes",  template:"#votes# 
            <input type='button' value='Show 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

Built-in templates

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

  • checkboxes;
  • radio buttons;
  • "edit" cons;
  • "trash" icons;
  • sparklines.

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.