How to add headers dynamically based on the value selected in SelectFilter of datatable

I referred snippet : and filtered data using SelectFilter. However, further I want to add new columns dynamically based on my selected value of filter, where these newly added columns will be having dynamic header names too. (i.e If I select year '1966', it should filter the datatable-data and should also add months 'Jan', 'Feb' as 2 new columns with header names 'January', 'Februry'). New columns can be anything from the month_data(i.e list of 12 months)

Please help with this. Thank you in advance.


  • edited May 2018


    Please, check the following snippet:

    In order to catch the moment when filter value changes, you need to catch the "change" event of an HTML element of this filter. Then you will be able to add new columns as described in the docs.

  • Thank you Helga!
    As per your given snippet, same columns are getting added each time. However, is it possible to add columns only related to selected filter value?

  • edited May 2018

    Please, pay attention to this code piece:

    var node = $$("grid").getHeaderNode("year", 1).querySelector("select");
    webix.event(node, "change", function(e){
        var value =; //filter value
        //modify columns array to your need

    You can add/remove any columns depending on the filter value.

  • Thank you Helga!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion