ng2-iq-bootstraptable

NG2 IQ-BOOTSTRAP-TABLE (DEPRECTATED => look for NGX-IQ-BOOTSTRAPTABLE

This table is an Angular 2 component based on Bootstrap3. Is prepared to handle server side requests for filtering, ordering and pagination of results, without needing to write a lot of boilerplate every time you have to add a new table view to your project.

Included sample screenshot:

Usage example:

app.component.html:

<iq-bt-table 
(onLoadData)="loadData($event)" 
        [paginatedResults]="paginatedResults" 
        [columns]="columns" 
        [pageSize]=5
        [footerLegend]="footerLegend">
    <template #rows let-item="$implicit" let-i="index">
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.firstname}}</td>
            <td>{{item.lastname}}</td>
            <td>{{item.email}}</td>
        </tr>
    </template>
</iq-bt-table>

app.component.ts:

    import { TableComponent, PaginatedResults, BootstrapTableColumn, DataRequestConfig } from 'ng2-iq-bootstraptable';
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html',
        styleUrls: ['./customers-list.component.css']
    })
    export class CustomersListComponent implements OnInit {
        private paginatedResults: PaginatedResults<Customer>;
        private drc: DataRequestConfig;
        private columns: BootstrapTableColumn[] = [
            {
                name: 'Id',
                prop: 'id',
                width: 10,
                widthUnit: '%'
            }, {
                name: 'First name',
                prop: 'firstname',
                width: 30,
                widthUnit: '%'
            }, {
                name: 'Last name',
                prop: 'lastname',
                width: 30,
                widthUnit: '%'
            }, {
                name: 'E-Mail',
                prop: 'email',
                width: 30,
                widthUnit: '%'
            }
        ];
        private footerLegend: FooterLegend = {
            showingResults: 'Mostrando resultados',
            of: 'de',
            to: 'al'
        };
        loadData(drc: DataRequestConfig) {
            this.drc = drc;
            let from = drc.firstResult;
            let sort = drc.orderBy === undefined ? null : drc.orderBy[0].property;
            let sortDir = drc.orderBy === undefined ? null : drc.orderBy[0].direction;
            this.customerService
                .listCustomers(from, drc.count, sort, sortDir)
                .subscribe((paginatedData) => {
                    this.paginatedResults = paginatedData;
                });
        }
    }