How to add dynamic column to webix datatable.

edited February 2017 in Technical questions

I try but not able to add.
var columns = webix.toArray(this.dtable.columns);

columns.addView({ view:"text",
                           options:["one", "two"]
                         }, 1);


  • It's impossible to add a view into the array of columns.

    The only possibility is to add a column with valid configuration, as described here. You can also check the sample to see how it actually works.

  • edited February 2017

    I am trying to add column dynamically.When user click at button then It will add a column.I seen the link you share.But I am not able to implement.I tried
    below code but not working.

    Please help me.

    this.grid = new webix.ui({
        { id:"id",  header:"#", css:"rank",  batch:2,   width:50},
        { id:"title", header:"Film title", fillspace:true },
        { id:"year",  batch:1,  header:"Released" , width:80},
        { id:"category", header:"Category", batch:1},
        { id:"votes", batch:3, header:"Votes",  width:100},
        { id:"rating", batch:3, header:"Rating", width:100},
        { id:"rank", header:"Rank", css:"rank",  batch:2,width:50}
    var columns = webix.toArray(this.grid.columns);
        header:"New column"
  • You should access the columns via the Datatable's configuration object (config) as grid.config.columns like it is shown in the sample.

    Check the updated snippet of your code, please:

  • Thanks Helga resolved.

  • Hi,I am trying to add column dynamically on button click.Bu it is showing error at browser.

    I got the following error.

    Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at h.xk (eval at module.exports (scripts.bundle.js:1), :905:273)
    at h.vj (eval at module.exports (scripts.bundle.js:1), :893:280)
    at h.render (eval at module.exports (scripts.bundle.js:1), :849:77)
    at h.$setSize (eval at module.exports (scripts.bundle.js:1), :918:297)
    at h.adjust (eval at module.exports (scripts.bundle.js:1), :209:81)
    at webix.ui.resize (eval at module.exports (scripts.bundle.js:1), :193:383)

    Here my code starts

    this.grid = new webix.ui({
    view: "datatable",
    columns: [
    { id: "id", header: "#", css: "rank", batch: 2, width: 50 },
    { id: "title", header: "", fillspace: true },
    { id: "year", batch: 1, header: "Released", width: 80 },
    { id: "category", header: "Category", batch: 1 },
    { id: "votes", batch: 3, header: "Votes", width: 100 },
    { id: "rating", batch: 3, header: "Rating", width: 100 },
    { id: "rank", header: "Rank", css: "rank", batch: 2, width: 50 }
    data: [
    { "id": "100", title: "Tripathi", year: "2017", category: "Number one", votes: "Yes", rating: "good", rank: "One" },
    { "id": "101", title: "Tripathi", year: "2017", category: "Number one", votes: "Yes", rating: "good", rank: "One" },
    { "id": "102", title: "Tripathi", year: "2017", category: "Number one", votes: "Yes", rating: "good", rank: "One" },
    { "id": "103", title: "Tripathi", year: "2017", category: "Number one", votes: "Yes", rating: "good", rank: "One" }

      onClick: {
        "delbtn": function (e, id, trg) {
          // webix.message("Delete row: "+id); 
          // return false; //here it blocks default behavior
            width: 200,
            id: "title" + webix.uid(),
            header: "New column"
          }, 2);
          return false;
    var columns = webix.toArray(this.grid.config.columns);
  • edited March 2017

    Please, check the following snippet:

    And please change it to demonstrate the issue, as we have not spotted it.

  • I don't know how to change it to demonstrate the issue.I am not getting your sentence 'change it to demonstrate the issue, as we have not spotted it'

  • Could you please change the snippet above ( so that it shows the browser error you have described?

    We could not reproduce it with default settings, as far as you can see from the snippet. You can change the code in the snippet, click the "Share" button and get the shareble link, which you can post here.

  • I will do like that.

  • I have a snippet at which I get JSON data into combo option drop down.But once I select data from option then it is not showing selected data.

    Please help me I have a problem with snippet below.

  • Hi,
    when you add new dynamic column is it possible to add dynamic scheme for this new column?

  • @jcr what do you mean by "dynamic scheme"?
    Data scheme is not linked with the columns configuration and can be defined only on component's init, while column properties (template, format, etc.) can be redefined at any time.

  • Hello together This is a behave in version webix 5.4: under some circumstances I'll get this error

    webix_debug.js:20994 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at o.xk (webix_debug.js:20994)
    at o.vj (webix_debug.js:20715)
    at o.render (webix_debug.js:19710)
    at window.tableRowsRenew (functions.js:932)
    at o.eval (eval at globalEval (jquery-2.2.4.min.js:2), :304:9)
    at o.callEvent (webix_debug.js:576)
    at o.hideColumn (webix_debug.js:25008)
    at o.showColumn (webix_debug.js:25093)
    at o. (webix_debug.js:27306)
    at o. (webix_debug.js:249)

    On hiding columns or viewing when columns are not fully be seen cause table have to many columns which are not all seen in the browser. When reloading the page all is okay. You can have a access on my side to see whats going on... if you want.


  • Hi @Michael

    Could you please describe the use-case and provide a snippet/example which will allow to repeat and test this issue?
    The error stack is quite useful while debugging, but as we didn't succeed in repeating this behaviour, I would request more information on it, including the configuration of your datatable and the precise actions which lead to the mentioned error.

    Thank you!

  • edited November 2018

    Oh Listopad.

    I've got the error. It was my fault! Sorry. I set tableObj.render() which cause the error in "onAfterColumnShow" "onAfterColumnHide" - Event

    So everything works fine for me now.

    But something else I would like to know how to activate headermenu on touch screens?


  • There is a possibility to open header menu on left click (or on touch).
    Please, check the example of implementation in the related article.

Sign In or Register to comment.