can't “refresh” filamentgroup tablesaw responsive table after adding new rows

Question

I am using a combination of the AngularJS Utils pagination directive and the filamentgroup tablesaw responsive table library to try and get a responsive (by swiping right), paginated table.

Once I have populated the table I call the tablesaw "refresh" event from within another directive called responsive-table and it makes the table fully responsive and all is good with the world.

$("tableselector").table("refresh")

However, when I then change page (and therefore the rows change in the table) the table stops being responsive (if you inspect the HTML I can see that the new rows don't have the relevant tablesaw classes on the 'tr' elements whilst the 'th' elements still do).

I kind of expected this and tried to call the refresh event again but that didn't work, so I tried the destroy event and that didn't seem to work either!

Below is my HTML for reference.

<table class="table table--stripe" data-mode="swipe" responsive-table>
  <thead>
    <tr>
      <th>Email</th>
      <th>Name</th>
      <th>User role</th>
      <th></th>
    </tr>
  </thead>

  <tbody>

    <tr dir-paginate="user in Model.Users | itemsPerPage:Model.PageSize" current-page="Model.CurrentPage">
      <td>{{user.Email}}</td>
      <td>{{user.DisplayName}}</td>
      <td>{{user.Role}}</td>
      <td>{{user.Telephone}}</td>
    </tr>
  </tbody>
</table>

I have found roughly where the tablesaw code appears to go "wrong" (although I suspect this is just my lack of understanding)

 $.fn[pluginName] = function ()
    {
        return this.each(function ()
        {
            var $t = $(this);

            if ($t.data(pluginName))
            {
                return;
            }

            var table = new Table(this);
            $t.data(pluginName, table);
        });
    };

After going through a lot of the tablesaw code I found that the above code always exits via the return statement after the new rows are inserted and the refresh, destroy or even create events are called.

Has anyone else had these issues or know how if I am using either library incorrectly to refresh/destroy/recreate the responsive table?

Answer 1

So I was kindly pointed in the right direction on GitHub by https://github.com/zachleat.

I had to slightly change the line of code that refreshes the table after a user has clicked to move to the next paginated page.

$('#mytable').table().data("table").refresh()

Answer 2

Just because the tbody>tr>td is loaded before the refresh() called. It's accidentaly right. the refresh func doesn't call the snip $cells.wrapInner( "" ); $cells.prepend( "" + html + "" );"

You can change the source code. use the init event instand of refresh event.