Cells 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.

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.

template:"<strong>#title#</strong>"

template:"<img src='.imgs/#id#.jpg'/>"

template:"<a href='http://google.com?q=#title#'>#title#</a>"

You can set custom template for a column by setting the template attribute as a function. This function accepts a raw data object and should return a text string or valid HTML.

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

Parameters of Template Function

This is the full list of a template function parameters 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

Using custom templates

webix.ui({
  rows:[
    { 
      view:"datatable", 
      data:grid_data,
      columns: [
        {
          id: "title",
          template: function(obj, common, value, column, index) {
            return obj.title
          }
        }
      ]
    }
  ]
});

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

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

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

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.