<table description="Résultats de recherche" class="selectable">
    <thead>
    <tr>
        <th (click)="setOrder('id')" [ngClass]="setOrderClass('id')">Id</th>
        <th (click)="setOrder('nom')" [ngClass]="setOrderClass('nom')">Nom</th>
        <th (click)="setOrder('creePar')" [ngClass]="setOrderClass('creePar')">Crée par</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngIf="!documentList || documentList.length == 0">
        <td colspan="3">Aucun résultat trouvé</td>
    </tr>
    <tr *ngFor="let document of (documentList | documentFilter:selectedMetaDataFilter:filter) | orderBy: [sortingOrder+sortingPredicate]"
         title="{{ showMetaDatas(document.metaData) }}">
        <td>{{ document.id }}</td>
        <td>{{ document.nom }}</td>
        <td>{{ document.creePar }}</td>
        <td ng-repeat-end class="inline-tools">
           <a href="#">Link</a>
        </td>
    </tr>
    </tbody>
</table>

setOrder(predicate: string) {
    this.sortingOrder = (this.sortingPredicate === predicate)
        ? this.sortingOrder === '-' ? '+' : '-'
        : '+';

    this.sortingPredicate = predicate;
}

setOrderClass(predicate: string) {
    if (this.sortingPredicate !== predicate)
        return 'sorting';

    if (this.sortingOrder === '+')
        return 'sorting_asc';

    return 'sorting_desk';
}

<table description="Résultats de recherche" class="selectable" myTableComponent>
    <thead>
    <tr>
        <th>Id</th>
        <th>Nom</th>
        <th>Crée par</th>
        <th noSorting></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngIf="!documentList || documentList.length == 0">
        <td colspan="3">Aucun résultat trouvé</td>
    </tr>
    <tr *ngFor="let document of (documentList | documentFilter:selectedMetaDataFilter:filter)"
         title="{{ showMetaDatas(document.metaData) }}">
        <td>{{ document.id }}</td>
        <td>{{ document.nom }}</td>
        <td>{{ document.creePar }}</td>
        <td ng-repeat-end class="inline-tools">
           <a href="#">Link</a>
        </td>
    </tr>
    </tbody>
</table>