Blog

Complex Content in DataTable

DataTable is the most popular widget of Webix UI framework. It is fast, flexible and can be used in many different scenarios. By default, it shows only a text content in its cells. Nevertheless, you can use cell templating to show a more complex content in the cells of DataTable. Icons, buttons, and even other widgets can be used as cell templates.

Let’s look how it can be done.

Checkbox and Radio buttons

The most common use-case is the adding of a checkbox into a cell of a DataTable. It is so common, that we have added a ready-to-use shortcut. Just write the cell template as follows:

template:"{common.checkbox()}"

and you will get a fully-functional checkbox input.

DataTable

 

Live demo

To get a radio button control, you can use a similar syntax:

template:"{common.radio()}"
DataTable

 

Live demo

Action elements

Another common case is the adding of a button into a row to trigger an action. This task can be solved in two ways: by adding a button or by adding an icon.

Icons

The Webix js ui library doesn’t provide a special shortcut for it, but you can write a simple HTML template to render an icon in a cell. It can be done like this:

template:"<span class='webix_icon fa-trash-o'></span>"
DataTable

 

Live demo

That’s it. Now, if you have an icon in the UI, you can attach a click handler to it as easy as it’s shown below:

{ view:"datatable", onClick:{
"fa-trash-o" : function(ev, id){
//id - row id
this.remove(id);
}
}}

According to the above code, you need to assign the onClick handler for the element with the “fa-trash-o” CSS class. The same technique can be used for any custom HTML elements.

Live demo

Buttons

Buttons can be added into a DataTable in a similar way:

template:"<input type='button' class='webix_button' value='Remove'></span>"
DataTable

 

Live demo

Here webix_button is a predefined CSS class that makes an input look like a button in the current skin. It is not mandatory, you can use your styling as well.

To assign the click handler, you can use the same solution as the one used for icons. Just apply a different CSS class for event attaching.

Embedding UI controls

There are two ways to show a complex UI as a content of DataTable. The first one implies the use of subviews and the second one offers to make use of active-content solutions.

Subviews

Subviews allow showing any Webix UI as the content of a row. They work for DataTable and TreeTable only.

SubView

 

All you need to do is to describe the structure of the embedded UI in the subview property. You can read more in the documentation or check the live demo.

Active content

Active content allows showing Webix Form controls as the content of a cell. It can be useful if you want to show something more complicated than buttons or icons (which can be easily added through simple HTML templates). For example, active content can be used to show segmented buttons or a slider as the content of a cell.

Active content

 

Live demo

To begin with, you need to extend a datatable with the ActiveContent mixin:

webix.protoUI({
name:"activeTable",
}, webix.ui.datatable, webix.ActiveContent);

After that, we need to describe the content that we wish to embed through the activeContent property:

activeContent:{
status:{
view:"toggle",
type:"iconButton",
offIcon:"pause", onIcon:"play",
offLabel:"Disabled", onLabel:"Enabled",
width:110, height:30,
earlyInit:true
}
}

As the last step, we need to use the active content element in the template of a cell.

template:"{common.status()}"

Adding active content is the most complicated way to embed new elements in a datatable, so use it as a last resort.

You can read some extra details in the documentation

ActiveContent vs Inline Editors

ActiveContent may seem to be perfect for using as grid editors. But it’s not a good idea. ActiveContent can’t serve as a substitute for the inline editors. If you want an editor to be always visible, you just need to change the style of rendering as it’s made in the example below:

ActiveContent vs Inline Editors

 

Live demo

template: "<span class='webix_icon fa-angle-down arrow'></span>#status# "},

As you can see, the template contains both a custom icon for the select-like look and the content of a cell.

Do I miss something?

The above described techniques (except for subviews) can be used not only with DataTable, but also with other data components, such as lists, trees, treetables, dataviews and others. So, you can embed and mix UI controls to organize a rich UI in your apps.

As far as I can see, these techniques cover most of real life use-cases. If I’ve missed something, feel free to write your questions and ideas in the comments.

Written by
The following two tabs change content below.

Maksim Kozhukh

Pragmatic software developer with more than 12 years of web development experience. Prefers to work with Javascript and HTML. Maksim has worked with lots of different technologies from nearly forgotten ColdFustion to the bleeding edge of NodeJS and Go.

Latest posts by Maksim Kozhukh (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit
  • Rodrigo Uribe Ventura

    Excelent Maksim! I use big tables with a lot of filters but I have a problem trying to refresh the filters each time I use one. I’ll try with dtable.refreshFilter(); but dosen’t work. I ahve this snippet: http://webix.com/snippet/df6ffbb3

    • Maksim Kozhukh

      Unfortunately this behavior can’t be changed easily. refreshFilter can be used to repaint some filter, but it will contain all options anyway, as list of options is created based on the full dataset, including the hidden rows.

      There is a way to redefine the data collection logic. You can raise this question at webix forum.

  • R Chavz

    Hi: I make a test on http://webix.com/snippet/b1b00a26 ,

    and apparently the datatable has little troubles with radio and checkbox.

    note1: radio and check not work correctly for action editable on/off
    note2: tab-key not work correctly when focus on radio or check :(.

    one observation:
    why you use native input type checkbox or radio? instead of [“fa-check-square” : “fa-square-o” or “fa-dot-circle-o” : “fa-circle-thin”] like you do in checklist

    native input has a lot of troubles … :(