ng2-ya-table

Angular 4 yet another table with pagination, ordering, filtering and datasource server-side ready.

Demo

Installation

To install this library, run:

$ npm install ng2-ya-table --save

You will need bootstrap styles (Bootstrap 3)

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

How to use it with:

angular-cli please refer to getting-started-with-ng-cli
...

Minimal Setup Example

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Ng2YaTableModule } from 'ng2-ya-table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    Ng2YaTableModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- You can now use the library in app.component.html -->
<h1>
  {{title}}
</h1>
<ng2-ya-table [options]="options" [columns]="columns" [datasource]="data" [paging]="paging">
</ng2-ya-table>

public options:any = {
    orderMulti: false,
    className: ['table-striped'],
    language: "en"
};

public data: Array<any> = [...]; //array of data

public paging: any = {
    itemsPerPage: 10,
    itemsPerPageOptions: [10, 25, 50, 100],
    maxSize: 5
}

public columns:Array<any> = [
{ 
    title: 'Name', 
    name: 'name', 
    sort: true, 
    defaultSortOrder: 'asc',  
    filter: {
        type: 'default', 
        controlType: 'default',
        config: {
            placeholder: 'Filter by name'
        }
    } 
},
{ 
    title: 'Username', 
    name: 'username', 
    sort: true, 
    filter: {
        type: 'default', 
        controlType: 'default',
        config: {
            placeholder: 'Filter by username'
        }
    } 
},
{ 
    title: 'Email', 
    name: 'email', 
    sort: true, 
    filter: {
        type: 'default', 
        controlType: 'default',
        config: {
            placeholder: 'Filter by email'
        }
    } 
},
{ 
    sort: false, 
    title: '', 
    name: 'btnEdit',
    render: (data: any, row: User): string => {
        return "<div class='text-center'>" +
            "<button type='button' class='btn btn-sm btn-primary'><span class='glyphicon glyphicon-pencil'></span></button> " +
            "</div>";
    },
    action: (data: any, row: User): any => {
        alert("Id: " + row.id);
    }
},
{ 
    sort: false, 
    title: '', 
    name: 'btnDelete',
    render: (data: any, row: User): string => {
        return "<div class='text-center'>" +
            "<button type='button' class='btn btn-sm btn-danger'><span class='glyphicon glyphicon-trash'></span></button> " +
            "</div>";
    },
    action: (data: any, row: User): any => {
        alert("Id: " + row.id);
    }
}];

Server-Side datasource Setup Example

<ng2-ya-table [options]="options" [columns]="columns" [datasource]="datasource" [paging]="paging">
</ng2-ya-table>

public datasource: any = (request: any): Observable<any> => {
    return this.service.getUsers(request);
}

Server-Side plugin

.NET Standard library datasource utils ng2-ya-table.DataSource.Core.

Further Documentation

Installation, customization and other useful articles will be available soon...

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Features

Observable data source (client-side or server-side)
Filtering
Sorting
Pagination
Bootstrap 3 layout

License

MIT license.

hepifish/ng2-ya-table