Angular 4 yet another table
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
docs/getting-started
src
tools/gulp
.gitignore
.npmignore
.travis.yml
.yo-rc.json
LICENSE
README.MD
gulpfile.js
package.json
tsconfig.json
tslint.json

README.MD

ng2-ya-table

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

Demo

Live Demo

alt tag

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:

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.