Datatable dynamic add\\remove row with index and one row default

Webix JS
#1

I have this code :

webix.ready(function(){
    webix.ui({
        container:"formTable",
        view:"datatable",
        id:"d1",
        columns:[
            { id:"index", header:"#", sort:"int" },
            { header:"Loc", editor:"text", sort:"string" },
            { header:"Loc2", editor:"text", sort:"string" },
            { header:"Value", editor:"text", sort:"float" }
        ],
        select:"row",
        editable:true,
        editaction:"dblclick",
        autoheight:true,
        scheme:{
            $init:function(obj){ obj.index = this.count() + 1; }
        },
    });
    webix.ui({
        container:"addButton",
        view:"toolbar", 
		cols:[
			{ gravity:2 },
			{ view:"button", value:"Add", click:function(){
				$$("d1").add({ /* add value here */ });
			}},
			{ view:"button", value:"Remove", click:function(){
				$$("d1").remove($$("d1").getSelectedId());
			}}
		]
    });
});

But i what i’ve got is that there are no row… I need one row already exists at first load. If i add blank row like this:

data: [{}],

Then the first row index is 2, and then if i add one, the second index is 2,
If i change this his.count() without plus 1, then the fist and second row is 1…
All i need is dynamic table that has only one row by default, and if i add or remove, there will be no problem with index, and also the column can be sorted so the index is not static…

#2

Hello!

Please check the sample: Code Snippet