Creating Index Columns

In this chapter you will learn how to create index columns in DataTable.

There are 2 types of index columns:

  • Static (rows indexes aren't changed whether you move, delete rows etc.)
  • Dynamic (rows indexes can vary depending on the current position of rows)

Static index columns

To create a static index column in your datatable, use the following technique:

Specifying static index column in DataTable

dtable = new webix.ui({
    view:"datatable",
    columns:[
        { id:"index",   header:"",           sort:"int"},
        { id:"title",   header:"Film title", sort:"string"},
        { id:"year",    header:"Year",       sort:"int"}
    ],
    scheme:{
        $init:function(obj){ obj.index = this.count(); }
    },
    ...
});

Related sample:  Index column


Let's consider what we do in the code above:

  1. In the columns parameter we assign an individual column to serve as the index entry.
  2. Then, we specify the scheme property with the $init key inside. The $init key runs when data is being loaded to the component initially and when data is being reloaded for new elements. The key is called for each data item, that's why we can use it as an iterator to assign indexes to rows.
    Read more about the key in the related article - 'Defining Data Scheme. $init key'.

Dynamic index columns

To create a dynamic index column in your datatable, use the following technique:

Specifying dynamic index column in DataTable

dtable = new webix.ui({
    view:"datatable",
    id:"mytable",
    columns:[
        { id:"index",   header:"",           sort:"int"},
        { id:"title",   header:"Film title", sort:"string"},
        { id:"year",    header:"Year",       sort:"int"}
    ],
    on:{
        "data->onStoreUpdated":function(){
            this.data.each(function(obj, i){
                obj.index = i+1;
            })
        }
    },
    ...
});

Related sample:  Index column


Let's consider what we do in the code above:

  1. In the columns parameter we assign an individual column to serve as the index entry.
  2. With the on parameter we attach a handler to the onStoreLoad event.
    "data->onStoreUpdated" is equal to $$('mytable').data.attachEvent('onStoreUpdated', function(){...})
  3. The onStoreLoad event fires after data is changed in the data store.
  4. The each method allows us to iterate through the collection of data items.
Back to top