ng2-bs-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.11 • Public • Published

    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.

    Install

    npm i ng2-bs-table

    DownloadsWeekly Downloads

    2

    Version

    1.0.11

    License

    ISC

    Last publish

    Collaborators

    • lexxorlov