Removed rows from table still appear on UI

[mithmatt]

I'm using bootstrap-sortable v2.0.1 for a table in my ember app.

The table does not have fixed number of rows. The number of rows depend on data available at the REST endpoint. The client fetches data from the REST endpoint every 5 seconds. The number of rows can increase or decrease during that time.

At time t1, I have 3 rows, A, B and C: Sorting works perfectly. At time t1 + 5, row B is no longer available at the REST endpoint. However, with bootstrap-sortable, the old row B is shown on the table. The table has A, B and C. Sorting still works, but with stale data. It should have been A, C. Without bootstrap-sortable, B does not show up on the UI.

It looks like something is caching the old row. I don't see a problem when new rows come in. Are there any work arounds for this issue?

[drvic10k]

it shouldn't cache anything, everytime the sorting is applied, the rows are retrieved from DOM

[mithmatt]

@drvic10k I'm wondering if it is messing up something within the Ember Component lifecycle then. When I don't use the bootstrap-sortable plugin, the table renders correctly, but sadly no sorting feature.

If some code can help debug this issue Here's how my component looks like:

export default Ember.Component.extend({
  didRender() {
    this._super(...arguments);
    Ember.$.bootstrapSortable({applyLast: true, sign: 'reversed'});
  }
})

The template for the component:

<div class="panel panel-default query-table-container">
  <!-- Default panel contents -->
  <div class="panel-heading">Query Monitor</div>

  <table id="query-table" class="table query-table sortable table-hover">
    <thead id="query-table-header">
    <tr id="query-table-header-row" class="table-header">
      <th id="query-table-header-pid" data-defaultsort="asc">PID</th>
      <th id="query-table-header-status">Status</th>
      <th id="query-table-header-username">User</th>
      <th id="query-table-header-databasename">Database</th>
      <th id="query-table-header-submittime">Submit Time</th>
      <th id="query-table-header-duration">Duration</th>
      <th id="query-table-header-clientaddress">Client</th>
    </tr>
    </thead>

    <tbody id="query-table-body">
    {{#unless queries.length}}
      <tr id="no-queries" class="no-queries">
        <td colspan="8">No currently running or waiting queries</td>
      </tr>
    {{else}}
      {{#each queries as |query index|}}
        <tr id="query-table-row{{index}}">
          <td id="query-table-row{{index}}-pid" class="pid-text">{{query.pid}}</td>
          <td id="query-table-row{{index}}-status" class="{{if query.waitingResource '' (if query.waiting 'orange' 'green')}}">{{query.status}}</td>
          <td id="query-table-row{{index}}-username">{{query.userName}}</td>
          <td id="query-table-row{{index}}-databasename">{{query.databaseName}}</td>
          <td id="query-table-row{{index}}-submittime">{{query.formattedQueryStartTime}}</td>
          <td id="query-table-row{{index}}-duration">{{query.duration}}</td>
          <td id="query-table-row{{index}}-clientaddress">{{query.clientAddress}}</td>
        </tr>
      {{/each}}
    {{/unless}}
    </tbody>
  </table>
</div>

Source code is here, if you'd like to take a look.

[drvic10k]

unfortunatelly I have no experience with ember

[mithmatt]

@drvic10k No problem. Let me reach out to Ember community to assess how component lifecycle or templating might affect bootstrap-sortable table behavior. I'll get back to this one as soon as I have an answer.

[drvic10k]

did you find out something?

[mithmatt]

@drvic10k I was not able to find enough information regarding Ember component lifecycle to tackle this issue. You may close this for now.

I'm not currently active on the project, in which I was seeing this issue. I have commented out the sortable function in the code for now.

Tagging @denalex @ljainpivotalio @vvineet, in case they need to investigate this at a later point of time.

[adambedford]

I'm also running into this issue (also with Ember) where table rows aren't removed when sorting is activated on a table. Not sure what the cause is yet but I'll dig into it a bit hopefully.

Anyone find a solution to this in the end?