ng2-bs-table

Angular 2 bootstrap table

Install

npm i -S ng2-bs-table

SystemJS usage

paths: {
    // paths serve as alias
    'npm:': 'node_modules/',},
map:{
    'ng2-bs-pagination' : 'npm:ng2-bs-pagination',
    'ng2-bs-table' : 'npm:ng2-bs-table'
},
packages: {
    'ng2-bs-pagination': {
        main: './index.js',
        defaultExtension: 'js'
    },
    'ng2-bs-table': {
        main: './index.js',
        defaultExtension: 'js'
    }
}

Table Selector

• <table-view></table-view>

You can create table with any data in a cell. For cell can be used data or any components. To import components you can
use [imports] and any modules (ExampleModule, check bellow). For filter can be used default input or can be implemented any other custom filters. Component has many useful events for data management.

Table Settings

• [collection] - Array - (Default: [])- Data collection of objects
• [columns] - Array - Array of all columns to be displayed and how to format them for ordering
• [filters] - Array - (Default: []) - Filters for each column. You can implement own filter if you need or use exists.
• [actions] - TableActionInterface - (Default: []) - Table actions: For example: view, delete, etc.
• [transformers] - Array - (Default: []) - Transformers for data.
• [sorting] - TableViewSorting - Which column to sort on and which direction (ascending or descending)
• [imports] - Array - (Default: []) - Any additional Modules for imports.
• [autoPipe] - Boolean - (Default: true) - If you set false then all pipes(transformers) will be disabled.

TableView Example

import {Component, OnInit} from "@angular/core";
import {
    TableViewSorting,
    TableDataColumn,
    TableInputFilter,
    FilterEvent,
    OrderEvent,
    ActionClickEvent,
    TableFilterInterface,
    TableViewComponent,
    TableEmptyAction,
    TableViewAction,
    TableColumnInterface,
    TableActionInterface
} from "ng2-bs-table";
import {StatusColumn} from "./status-column";

@Component({
    moduleId: module.id,
    selector: 'table',
    templateUrl: 'table.component.html'
})
export class TableComponent {
    collection: Array<{}>;

    columns: Array<TableColumnInterface> = [
        new TableDataColumn('Name', 'name', 'text', true),
        new StatusColumn('Type', 'type', true) // Check bellow
    ];

    filters: TableFilterInterface[] = [
        new TableInputFilter('name'),
        new TableInputFilter('type')
    ];

    sorting: TableViewSorting = new TableViewSorting('name', false);

    actions: Array<TableActionInterface> = [
        new TableViewAction('view', 'Edit', null, 'glyphicon glyphicon-pencil'),
        new TableEmptyAction('link', 'Link', null, 'glyphicon glyphicon-remove')
    ];

    onActionClick(event: ActionClickEvent) {
        switch (event.action.name) {
            case 'view':
                break;
            case 'link':
                break;
        }
    }
    
    onCellChange(event: any){
        console.log(event);
    }
    
    onOrder(event: OrderEvent) {
        console.log(event);
    }

    onFilter(event: FilterEvent) {
        console.log(event);
    }

    ngOnInit(): void {
        let collection = [];
        for (let i = 0; i < 1000; i++) {
            collection.push({
                name: i,
                type: 'type ' + i
            });
        }
        this.collection = collection;
    }
}

<table-view
        [columns]="columns"
        [filters]="filters"
        [collection]="collection"
        [sorting]="sorting"
        [actions]="actions"
        (order)="onOrder($event)"
        (filter)="onFilter($event)"
        (cellChange)="onCellChange($event)"
        (actionClick)="onActionClick($event)">
    Loading table...
</table-view>

Events (Check dir events with all events objects)

• order
• filter
• cellChange
• actionClick
• pageChange

Actions

You can use actions:

• TableViewAction - On click will be called to route-
• TableEmptyAction - On click will be called event-
• TableVerifyAction - On click will be called to route with confirm-

Custom column

You can use any component if you need. For example ''. You should add to "table-view" in input "imports" some module "SharedModule" with component "TestComponent".

import {TableHtmlColumn} from "ng2-bs-table";

export class StatusColumn extends TableHtmlColumn {
    template(data: Object): string {
        // Or set some component "<test-component></test-component>"
        return '<a routerLink="/admin/templates" routerLinkActive="active">{{data.name}} - {{data.type}}</a>';
    }
}

For custom filter you can Use input filter for example. You need implementing:

• TableFilterInterface
• TableFilterInterfacePipe
• TableFilterInterfaceComponent

ExampleModule

import {AnyModule} from 'some-folder';

@NgModule({
    declarations: [ 
        AnyComponent 
    ],
    exports: [
        AnyComponent
    ],
    providers: [
    ]
})
export class ExampleModule {
}

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.component.html',
    providers: [PaginationPipe]
})
export class TestComponent{
    ...
    imports = [ ExampleModule ]
    ...
}

// Template example
<table-view
        ...
        [imports]="imports"
        ...        
    Loading table...
</table-view>

Todo

• Implement webpack. It does not work yet.
• DropDown filter.