How to update table view in html?

I have used this code for my project https://getmdl.io. Its simple and nicely designed front-end. And it loads some checkmarks for each row after the page loads.

However I am having trouble updating the table view after I dynamically add some more rows to tbody with ajax. I add them by getting the tbody element and then use document.createElement("td")

<table id="test-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Predmet</th>
            <th>Vreme</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
        <data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic">
    <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
</tbody>
</table>

According to this source https://github.com/jasonmayes/mdl-component-design-pattern which is used for this purpose, i should just do

componentHandler.upgradeElement(document.getElementById("test-table")) 

but this doesn't work at all.

Also MaterialDataTable is visible in web console but I have no idea on how to utilize it.