xenos/src/data-grid.component.html

Xenos is a data grid built upon angular2 and bootstrap.

<table #table class="table">
    <thead>
        <tr #theadrow class="xn-header-row">
            <th *ngFor="let c of columns" [hidden]="c.config?.hidden" class="xn-header-cell" #theadcell>
                <div style="display: flex; flex-direction: row;">
                    <div style="flex: 1 100%;" [class.text-primary]="c.activeFilters.length > 0" [xnHeader]="{column: c, cell: theadcell, row: theadrow}"
                        (click)="onHeaderClicked($event, c)"></div>
                    <div style="flex: 1 auto;" [ngSwitch]="c.sortDirection" style="padding-left: 4px;" *ngIf="!c.disableSorting">
                        <span *ngSwitchCase="1" class="glyphicon glyphicon-sort-by-attributes text-muted xn-sort-icon"></span>
                        <span *ngSwitchCase="2" class="glyphicon glyphicon-sort-by-attributes-alt text-muted xn-sort-icon"></span>
                        <span *ngSwitchDefault class="glyphicon glyphicon-sort text-muted xn-sort-icon"></span>
                    </div>
                    <div style="flex: 1 auto;" *ngIf="!c.disableFiltering">
                        <span class="xn-options-button" [xnPopover]="{column: c, content: content, input: input, close: close}" xn-linked>
                            <span class="glyphicon glyphicon-option-vertical"></span>
                        </span>
                    </div>
                    <div class="xn-options-container" style="display: none;" #content>
                        <div style="display: flex; flex-direction: column; height: 100%;">
                            <div style="flex: 0 auto;">
                                <p xnI18n="xn.options.no-filters" style="margin-top: 8px;" class="text-muted" *ngIf="c.activeFilters.length === 0"></p>
                            </div>
                            <div style="flex: 1 auto; overflow: auto; margin-top: 8px; max-height: 250px;" *ngIf="c.activeFilters.length > 0">
                                <div class="list-group" *ngIf="c.activeFilters.length > 0">
                                    <a href="#" class="list-group-item active" *ngFor="let f of c.activeFilters" (click)="c.removeFilter($event, f)">
                                        <div style="display: flex; flex-direction: row;">
                                            <div style="flex: 1 100%;" [xnCandidate]="{ data: f.value, column: c }"></div>
                                            <div style="flex: 0 auto;">
                                                <span class="glyphicon glyphicon-minus"></span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div *ngIf="c.activeFilters.length > 0">
                                <button class="btn btn-default" style="width: 100%;" xnI18n="xn.options.clear-filters" (click)="c.removeAllColumnFilters($event)"></button>
                                <hr style="width: 100%;" />
                            </div>
                            <div style="flex: 0 auto;">
                                <input id="input-query" class="form-control" [(ngModel)]="c.candidateQuery" #input />
                            </div>
                            <div style="flex: 0 300px; overflow: auto; margin-top: 8px;">
                                <p xnI18n="xn.options.many" class="text-muted" *ngIf="c.candidates.length > c.threshold"></p>
                                <div class="list-group" *ngIf="c.candidates.length <= c.threshold">
                                    <a href="#" class="list-group-item" *ngFor="let can of c.candidates" (click)="c.onCandidateClicked($event, can)">
                                        <div style="display: flex; flex-direction: row;">
                                            <div style="flex: 1 100%;" [xnCandidate]="{ data: can.value, column: c }"></div>
                                            <div style="flex: 0 auto;">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div style="flex: 0 auto;">
                                <button class="btn btn-default" xnI18n="xn.options.close" style="width: 100%; margin-top: 10px;" #close></button>
                            </div>
                        </div>
                    </div>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items" class="xn-row" #tbodyrow>
            <td *ngFor="let c of columns" [hidden]="c.config?.hidden" class="xn-cell" [xnCell]="{data: item, column: c, cell: tbodycell, row: tbodyrow}"
                #tbodycell></td>
        </tr>
    </tbody>
</table>
<div class="xn-paging-container">
    <div class="btn-group" role="group" aria-label="Pages" *ngIf="pageCount > 1">
        <button (click)="onPageChanged($event, 0)" class="btn btn-secondary xn-paging-button">
        <span class="glyphicon glyphicon-fast-backward"></span>
    </button>
        <button *ngFor="let i of pagingRange" (click)="onPageChanged($event, i)" class="btn btn-secondary xn-paging-button" [class.btn-primary]="pageIndex === i">{{i+1}}</button>
        <button (click)="onPageChanged($event, pageCount-1)" class="btn btn-secondary xn-paging-button">
        <span class="glyphicon glyphicon-fast-forward"></span>
    </button>
    </div>
</div>