Внедрение Webix addRowCSS

Я очень новичок в использовании HTML. Мне нужно использовать его для проекта, и у меня нет никакого образования в этом. Вот разбивка того, что мне нужно сделать. Мне нужно иметь график текстовых полей (я добавил некоторые функции в некоторые из них, предоставленные webix), и я хотел бы иметь кнопки, которые позволяют мне добавлять или удалять строки. Я также использую таблицу данных webix. Вот мой код кнопки. На данный момент я просто хочу добавить строку в верхнюю часть диаграммы. Прямо сейчас у меня есть только кнопка добавления строк. Как только я выясню это, я могу легко удалить.

    input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");

Вот мой код с данными.

    webix.ready(function(){
                    grida = webix.ui({
                        container:"testA",
                        view:"datatable",
                        columns:[
                        { id:"stage",editor:"text",         header:"Stage", width:150},
                        { id:"component",editor:"text",     header:"Component",width:200},
                        { id:"epic",editor:"text",          header:"Epic" , width:200},
                        { id:"engineering", editor:"text",  header:"Engineering", width:200, suggest:numSuggest},
                        { id:"design",  editor:"text",      header:"Design", width:200, suggest:numSuggest},
                        { id:"research",editor:"text",      header:"Research", width:200, suggest:numSuggest},
                        { id:"notes",   editor:"popup",     header:"Notes", width:200}
                        ],

                        editable:true,
                        autoheight:true,
                        autowidth:true,

                        data: [
                        {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
                        ]


                    });
                });

Все работает, кроме кнопки, которая появляется, но ничего не делает. Это ссылка на функцию addRow webix. http://docs.webix.com/api__ui.datatable_addrowcss.html

Любая помощь приветствуется, особенно потому, что я совершенно новичок в этом. Спасибо

Редактировать1:

Спасибо за ответ. Итак, на данный момент я делаю свою кнопку такой (до скрипта)

input type="button" value="Add row" onclick= 'add_row()'

И таблица остается такой же, как и раньше, однако я включил функцию add_row после завершения таблицы. Я включу последний бит таблицы для контекста

data: [
                    {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
                    ]
                });

                function add_row(){
                    grida.add({
                        stage:"Test 2", 
                        component:"Strategy", 
                        epic:"Design", 
                        engineering:2, 
                        design:0, 
                        research:0, 
                        notes: "This is a test"
                    },2)
                }

я тоже пробовал

 

    $$("grida").add(...)

но безрезультатно. Кнопка есть на экране, но не работает. Я предполагаю, что делаю что-то не по порядку, но я не уверен, что именно.