j-ng2-table.component.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="stylesheet" rel="stylesheet"
/>

<div class="j-ng2-table" *ngIf="data">
    <div class="settings">
        <button class="settings-btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
        <ul class="settings-contaienr">
            <li>
                Download all: 
                <i (click)="txtDownload()" class="fa fa-file-text-o" aria-hidden="true"></i>
                <i (click)="csvDownload()" class="fa fa-file-excel-o" aria-hidden="true"></i>
            </li>
            <li *ngIf="data.length != cachedData.length">
                Download filtered: 
                <i (click)="txtDownloadFiltered()" class="fa fa-file-text-o" aria-hidden="true"></i>
                <i (click)="csvDownloadFiltered()" class="fa fa-file-excel-o" aria-hidden="true"></i>
            </li>
            <li *ngFor="let col of cols">
                <i class="fa fa-thumb-tack" [ngClass]="{'hidden': !col['pinned']}" aria-hidden="true" (click)="col['pinned']=!col['pinned']"></i>
                <input type="checkbox" [name]="col['name']" [(ngModel)]="col['visible']"/>
                <label [for]="col['name']">{{col['name']}}</label>
            </li>
        </ul>
    </div>
    <div class="j-ng2-table-container">
        <div class="pinned-data">
            <div class="tr">
                <div [ngClass]="{'th' : col['pinned'] && col['visible']}" *ngFor="let col of cols; let i = index;">
                    <div *ngIf="col['pinned'] && col['visible']">
                        <span class="fa" [ngClass]="{'fa-caret-down': col['sort']==true, 'fa-caret-up': col['sort']==false, 'fa-minus': col['sort']==null}"
                            (click)="sortClicked(col)"></span>
                            <span (click)="sortClicked(col)">{{col['name']}}</span>
                            <span *ngIf="i!=0" (click)="moveLeft(i)" class="fa fa-caret-left"></span>
                            <span *ngIf="i!=cols.length-1" (click)="moveRight(i)" class="fa fa-caret-right"></span>
                            <span (click)="col.visible=false" class="fa fa-times"></span>   
                    </div>
                </div>
            </div>
            <div class="tr">
                <div [ngClass]="{'th' : col['pinned'] && col['visible']}" *ngFor="let col of cols; let i = index;">
                    <div *ngIf="col['pinned'] && col['visible']">
                        <input (keyup)="filter(col['name'])" [(ngModel)]="filters[col.name]"/>
                    </div>
                </div>
            </div>
            <div class="tr" *ngFor="let row of data; let i = index">
                <div [ngClass]="{'td' : col['pinned'] && col['visible'] && i < curPage * options.itemsPerPage && i >= (curPage * options.itemsPerPage)-options.itemsPerPage}" *ngFor="let col of cols">
                    <div *ngIf="col['pinned'] && col['visible'] && i < curPage * options.itemsPerPage && i >= (curPage * options.itemsPerPage)-options.itemsPerPage">
                        {{row[col['name']]}}
                    </div>
                </div>
            </div>
        </div>
        <div class="not-pinned-data">
            <div class="tr">
                <div [ngClass]="{'th' : !col['pinned'] && col['visible']}" *ngFor="let col of cols; let i = index;">
                    <div *ngIf="!col['pinned'] && col['visible']">
                        <span class="fa" [ngClass]="{'fa-caret-down': col['sort']==true, 'fa-caret-up': col['sort']==false, 'fa-minus': col['sort']==null}"
                            (click)="sortClicked(col)"></span>
                            <span (click)="sortClicked(col)">{{col['name']}}</span>
                            <span *ngIf="i!=0" (click)="moveLeft(i)" class="fa fa-caret-left"></span>
                            <span *ngIf="i!=cols.length-1" (click)="moveRight(i)" class="fa fa-caret-right"></span>
                            <span (click)="col.visible=false" class="fa fa-times"></span>                            
                    </div>
                </div>
            </div>
            <div class="tr">
                <div [ngClass]="{'th' : !col['pinned'] && col['visible']}" *ngFor="let col of cols; let i = index;">
                    <div *ngIf="!col['pinned'] && col['visible']">
                        <input (keyup)="filter(col['name'])" [(ngModel)]="filters[col.name]"/>
                    </div>
                </div>
            </div>
            <div class="tr" *ngFor="let row of data; let i = index;">
                <div [ngClass]="{'td' : !col['pinned'] && col['visible'] && i < curPage * options.itemsPerPage && i >= (curPage * options.itemsPerPage)-options.itemsPerPage}" *ngFor="let col of cols">
                    <div *ngIf="!col['pinned'] && col['visible'] && i < curPage * options.itemsPerPage && i >= (curPage * options.itemsPerPage)-options.itemsPerPage">
                        {{row[col['name']]}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-info">
        <span>
            Total rows: {{cachedData.length}}
        </span>
        <span *ngIf="data.length != cachedData.length">
            &nbsp;|&nbsp;
        </span>
        <span *ngIf="data.length != cachedData.length">
            Filtered rows: {{data.length}}
        </span>
        <div class="pages-holder" *ngIf="options.numberOfPages!=0">
            <span *ngFor="let page of pages" [ngClass]="{'selected' : page == curPage}" (click)="setPage(page)">{{page}}</span>
        </div>
    </div>
</div>