Datatable custom sort or sort on hidden span

[elmartino]

Hi guys,

I think it's a feature request, but maybe this is already possible: Is there a possibility to sort on a hidden span element of the <ng-template tdDataTableTemplate="column"> ?

I have a column displaying date data transformed by a pipe like:
row1: 6 years ago
row2: 3 months ago
row3: 3 hours ago
row4: 6 weeks ago

The sorting here doesn't do what it's supposed to do as you can imagine. If i could add a hidden span to the ng-template with the original date value and this is sortable, it would really help!

I hope you understand my question and you can point me in the right direction.

Thanks!!

Regards,
Martin

[michael-lang]

In your sort function, you can do whatever logic you want for sort on a given field.

@Component({
  selector: 'app-kitchen-sink-page',
  templateUrl: './kitchen-sink-page.component.html',
  styleUrls: ['./kitchen-sink-page.component.scss']
})
export class KitchenSinkPageComponent  {
  displayResults = [
    {Name: 'Material Design 2', Points: 49, Col3: 'Data X'},
    {Name: 'Angular CLI', Points: 42, Col3: 'Data Y'},
    {Name: 'NGRX Store', Points: 35, Col3: 'Data Z'}
  ];
  columns: ITdDataTableColumn[] = [
    {name: 'Name', label: 'Name', sortable: true, tooltip: ''},
    {name: 'Points', label: 'Points', numeric: true, sortable: true, tooltip: ''},
    {name: 'Col3', label: '#3', sortable: true, tooltip: ''}
  ];
  sortBy = '';
  sortOrder = '';
  sort(sortEvent: ITdDataTableSortChangeEvent): void {
    console.log('sort', sortEvent);
    this.sortBy = sortEvent.name;
    this.sortOrder = sortEvent.order === TdDataTableSortingOrder.Ascending ? 'ASC' : 'DESC';
    this.displayResults.sort((x, y) => {
      let a = x;
      let b = y;
      if (this.sortOrder.toLowerCase() === 'asc') {
        a = y;
        b = x;
      }
      if (this.sortBy.toLowerCase() === 'name') {
        return (a.Name || '').toLowerCase().localeCompare((b.Name || '').toLowerCase());
      } else if (this.sortBy.toLowerCase() === 'points') {
        return (a.Points + '').localeCompare((b.Points + ''));
      } else if (this.sortBy.toLowerCase() === 'col3') {
        return (a.Col3 || '').toLowerCase().localeCompare((b.Col3 || '').toLowerCase());
      }
      return (a.Name || '').toLowerCase().localeCompare((b.Name || '').toLowerCase());
    });
  }
}

Notice those else statements checking the 'sortBy' field. the return statement following doing a localCompare can choose a different field to do the actual sort on.

Here's the matching view.

      <td-data-table
        #dataTable
        [data]="displayResults"
        [columns]="columns"
        [sortable]="true"
        [sortBy]="sortBy"
        [sortOrder]="sortOrder"
        (sortChange)="sort($event)">
      </td-data-table>

[emoralesb05]

Closing this since a solution was provided