Sorting error when shifting between dynamically rendered tables.

[TheSmedegaard]

My implementation uses the same view and view-model on different routes. The view renders different tables based on input from view-model. The tables consist of varying columns.

I use the aut-sort="key.bind:column" in my table head.

Since there is no navigation between different views, an error occurs when I sort a table and shift to another. The error is Uncaught TypeError: Cannot read property 'toString' of undefined I have traced the error to

doSort(toSort) {
    toSort.sort((a, b) => {
      if (typeof this.customSort === 'function') {
        return this.customSort(a, b, this.sortOrder);
      }

      let val1;
      let val2;

      if (typeof this.sortKey === 'function') {
        val1 = this.sortKey(a, this.sortOrder);
        val2 = this.sortKey(b, this.sortOrder);
      } else {
        val1 = this.getPropertyValue(a, this.sortKey);
        val2 = this.getPropertyValue(b, this.sortKey);
      }

      if (val1 === null) val1 = '';
      if (val2 === null) val2 = '';

      if (this.isNumeric(val1) && this.isNumeric(val2)) {
        return (val1 - val2) * this.sortOrder;
      }

      let str1 = val1.toString(); //<-- the error
      let str2 = val2.toString();

      return str1.localeCompare(str2) * this.sortOrder;
    });
  }

I don't think it is an error in this module. It's more my implementation that is a bit strange. Is there a workaround to overcome this issue?

[tochoromero]

Could you please provide an example with the error?

[TheSmedegaard]

This is my view that can display multiple different tables "dynamically". I also have a view-model you can see - but I don't think it is relevant.

<template>
<div class="form-group">
    <input type="text" value.bind="filters[0].value" placeholder="Enter filter text" class="form-control"/>
</div>
  <table class="table table-striped" aurelia-table="data.bind: data; display-data.bind: $displayData; filters.bind: filters">
          <thead>
          <tr>
              <th repeat.for="column of columns" aut-sort="key.bind:column">${column} <i class="fa fa-sort"></i></th>
          </tr>
          </thead>
          <tbody>
          <tr repeat.for="row of $displayData" aut-select="row.bind: row; mode: single; selected-class:info">
              <td repeat.for="column of columns">${row[column]}</td>
          </tr>
          </tbody>
      </table>
</template>

---

Here is one of my tables.

I click on "testName" to sort it... It works.

Then I shift to another route which has a different table (but uses the same view-model and view). But the data isn't loaded.

I get this error in my console.

And this is my vendor-bundle.js

Does it make sense? I can elaborate more if you need it.

[TheSmedegaard]

Problem solved! I changed it to activationStrategy: 'replace' in the routing instead of activationStrategy: 'invoke-lifecycle' This article may help anyone interested http://stackoverflow.com/questions/39999969/how-to-set-default-activationstrategy-in-aurelia

[tochoromero]

Nice, I'm glad you figured it out. And the tip is really good, I will keep it in mind.