Table not displaying new rows

[JasonWeiseUnreal]

I am using Metro-UI table (data-role="table") and have found if I add rows dynamically the table does not display the new rows.
If I bring it back to a normal table (without data-role="table") then the new rows display fine.

Essentially I am adding the rows like this:

        <table class="table striped table-border row-border" data-role="table" data-rows="5">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Book Name</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var book in BookList)
                {
                    <tr>
                        <td>@book.Id</td>
                        <td>@book.Name</td>                       
                    </tr>
                }
            </tbody>
        </table>

Is there a way to force the table to redraw after I add a row (i.e. add a new book to BookList)
I am guessing it is because in the background the Metro-UI table is being refreshed / managed by the Metro-UI JavaScript that seems to ignore the new rows once the table is initially created.

In the case of just a normal <table></table> then it just redraws each time I add a row...

In essence I am just looking for a way for the table to refresh / redraw.

Thanks in advance.

[olton]

in the current version, the table does not support the dynamic addition of rows

[JasonWeiseUnreal]

@olton thanks for the speedy reply, that is a shame though.
I will have to see if I can work around it.

I appreciate you taking the time to answer.

[olton]

I do not consider my work a shame!

[olton]

New in 4.3.2

• Table: add methods addItem([...], redraw), addItems([...], redraw), issue Table not displaying new rows #1426

var row = ['book_id', 'book_name'];
var redraw = true;
var table = Metro.getPlugin('el', 'table');
table.addItem(row, redraw);

or

var rows = [
    ['book_id_1', 'book_name'], 
    ['book_id_2', 'book_name']
];
var redraw = true;
var table = Metro.getPlugin('el', 'table');
table.addItems(rows, redraw);

[alefab]

Hello, sorry to ask but in the sample
var table = Metro.getPlugin('el', 'table');
What are supposed to be 'el' and 'table' ?

[olton]

el - table selector, table - constant, identifies which role to use to get the plugin. Example:

<table data-role="table" id="table1">...</table>
-------------------------------------------------------
var tbl = Metro.getPlugin('#table1', 'table');

now tbl contains component table, and you can use component API

[alefab]

Thanks, it's working now. Is there a way to fully clean the rows of the table also ?
I have tried to look at the source near addItem() but don't find any revelant method to do it.

[olton]

Hack

function clearTable() {
    var table = Metro.getPlugin("#t1", "table");
    table.items = [];
    table.draw();
}

[alefab]

Thanks again, working perfectly.

[olton]

I added method clear() in 4.3.3

[olton]

In 4.3.3 to clear table you can call the method clear:

var table = Metro.getPlugin(...)
table.clear();