<table mat-table [dataSource]="dataSource" matSort [matSortActive]="sortColumn" matSortDisableClear
    [matSortDirection]="sortDirection" class="crud-table table" style="width: 100%; margin-bottom: 0;">

    <ng-container matColumnDef="sentence">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Frase
            <mat-icon *ngIf="sortColumn === 'sentence'">
                <i class="fa fa-sort-amount-desc" *ngIf="sortDirection === 'desc'"></i>
                <i class="fa fa-sort-amount-asc" *ngIf="sortDirection === 'asc'"></i>
            </mat-icon>
        </th>
        <td mat-cell *matCellDef="let element" style="text-align: left; width: 300px;"
        [matTooltip]="element.sentence.length > 30 ? element.sentence: null" triggers="hover">
            {{ (element.sentence.length>30)? (element.sentence | slice:0:30)+'...':(element.sentence) }}
        </td>
    </ng-container>

    <ng-container matColumnDef="identifier">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Intención
            <mat-icon *ngIf="sortColumn === 'identifier'">
                <i class="fa fa-sort-amount-desc" *ngIf="sortDirection === 'desc'"></i>
                <i class="fa fa-sort-amount-asc" *ngIf="sortDirection === 'asc'"></i>
            </mat-icon>
        </th>
        <td mat-cell *matCellDef="let element" style="text-align: left;">
            {{ (element.identifier.length>30)? (element.identifier | slice:0:30)+'...':(element.identifier) }} </td>
    </ng-container>

    <ng-container matColumnDef="count">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Ocurrencia
            <mat-icon *ngIf="sortColumn === 'count'">
                <i class="fa fa-sort-amount-desc" *ngIf="sortDirection === 'desc'"></i>
                <i class="fa fa-sort-amount-asc" *ngIf="sortDirection === 'asc'"></i>
            </mat-icon>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.count}} </td>
    </ng-container>

    <ng-container matColumnDef="customer">
        <th mat-header-cell *matHeaderCellDef> Clientes </th>
        <td mat-cell *matCellDef="let element"> {{element.customerCount}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>
<mat-paginator #paginator [length]="pagination?.totalItems" [pageSize]="pagination?.itemsPerPage"
    [pageSizeOptions]="[8, 10, 15]" [pageIndex]="pagination?.currentPage">
</mat-paginator>