datatable.component.html

<accordion *ngIf="dataLength > 0" [isAnimated]="true">
    <accordion-group #ag [panelClass]="'custom-accordion'" class="my-2">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                Display result details
                &nbsp;
                <span *ngIf="ag.isOpen"><span class="fas fa-chevron-up"></span></span>
                <span *ngIf="!ag.isOpen"><span class="fas fa-chevron-down"></span></span>
            </div>
        </button>
        <div *ngIf="!dataLength || !outputList || !datasetAttributeList || !searchData" class="text-center">
            <span class="fas fa-circle-notch fa-spin fa-3x"></span>
            <span class="sr-only">Loading...</span>
        </div>
        <div *ngIf="dataLength && outputList && datasetAttributeList && searchData">
            <div *ngIf="getDataset().selectable_row" class="mb-2">
                <button [disabled]="noSelectedData() || processWip" (click)="emitProcess('csv')"
                    class="btn btn-sm btn-outline-primary">
                    To CSV
                </button>
                <span *ngIf="processWip" class="float-right mr-2">
                    <span class="fas fa-circle-notch fa-spin fa-2x"></span>
                </span>
                <a *ngIf="processDone" href="http://0.0.0.0:8085/{{ processId }}.csv"
                    class="btn btn-sm btn-outline-secondary float-right">
                    Download your CSV
                </a>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th *ngIf="getDataset().selectable_row"></th>
                            <th *ngFor="let attribute of getOutputList()" scope="col" class="clickable" (click)="sort(attribute.id)">
                                {{ attribute.label }}
                                <span *ngIf="attribute.id === sortedCol" class="pl-2">
                                    <span [ngClass]="{'active': sortedOrder === 'a', 'inactive': sortedOrder === 'd'}">
                                        <span class="fas fa-sort-amount-down-alt"></span>
                                    </span>
                                    <span [ngClass]="{'active': sortedOrder === 'd', 'inactive': sortedOrder === 'a'}">
                                        <span class="fas fa-sort-amount-up"></span>
                                    </span>
                                </span>
                                <span *ngIf="attribute.id !== sortedCol" class="pl-2">
                                    <span class="unsorted">
                                        <span class="fas fa-arrows-alt-v"></span>
                                    </span>
                                    <span class="on-hover">
                                        <span class="fas fa-sort-amount-down-alt"></span>
                                    </span>
                                </span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let datum of searchData">
                            <td *ngIf="getDataset().selectable_row" class="data-selected"
                                (click)="toggleSelection(datum)">
                                <button class="btn btn-block text-left p-0 m-0">
                                    <div *ngIf="!isSelected(datum)">
                                        <span class="far fa-square fa-lg text-secondary"></span>
                                    </div>
                                    <div *ngIf="isSelected(datum)">
                                        <span class="fas fa-check-square fa-lg theme-color"></span>
                                    </div>
                                </button>
                            </td>
                            <td *ngFor="let attribute of getOutputList()" class="align-middle">
                                <div *ngIf="datum[attribute.label]" [ngSwitch]="attribute.renderer">
                                    <div *ngSwitchCase="'detail'">
                                        <app-detail
                                            [value]="datum[attribute.label]"
                                            [datasetName]="datasetName"
                                            [config]="attribute.renderer_config">
                                        </app-detail>
                                    </div>
                                    <div *ngSwitchCase="'link'">
                                        <app-link
                                            [value]="datum[attribute.label]"
                                            [datasetName]="datasetName"
                                            [config]="attribute.renderer_config">
                                        </app-link>
                                    </div>
                                    <div *ngSwitchCase="'download'">
                                        <app-download
                                            [value]="datum[attribute.label]"
                                            [datasetName]="datasetName"
                                            [config]="attribute.renderer_config">
                                        </app-download>
                                    </div>
                                    <div *ngSwitchCase="'image'">
                                        <app-image
                                            [value]="datum[attribute.label]"
                                            [datasetName]="datasetName"
                                            [config]="attribute.renderer_config">
                                        </app-image>
                                    </div>
                                    <div *ngSwitchCase="'json'">
                                        <app-json
                                            [value]="datum[attribute.label]"
                                            [attributeLabel]="attribute.label"
                                            [config]="attribute.renderer_config">
                                        </app-json>
                                    </div>
                                    <div *ngSwitchDefault>
                                        {{ datum[attribute.label] }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row mt-3">
                <div class="col">
                    Showing 
                    <select class="custom-select" (change)="changeNbItems($event.target.value)">
                        <option value="10" selected="true">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option> 
                    </select>
                    of {{ dataLength }} items
                </div>
                <div class="col-auto">
                    <pagination
                    [totalItems]="dataLength" 
                    [boundaryLinks]="true" 
                    [rotate]="true" 
                    [maxSize]="5"
                    [itemsPerPage]="nbItems"
                    previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                    (pageChanged)="changePage($event.page)">
                </pagination>
                </div>
            </div>
        </div>
    </accordion-group>
</accordion>