vitocmpl/ng2-ya-table

Angular yet another table

ng2-ya-table

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

Demo

Live Demo

Installation

• 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,
    Ng2YaTableModule
  ],
  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">
    <ng-template ng2YaTableCellTemplate="btnEdit" let-data='data' let-row='row'>
      <div class='text-center'>
        <button type='button' class='btn btn-sm btn-primary' (click)="onActionClick(row.id)">Edit</button>
      </div>
    </ng-template>
    <ng-template ng2YaTableCellTemplate="btnDelete" let-data='data' let-row='row'>
      <div class='text-center'>
        <button type='button' class='btn btn-sm btn-danger' (click)="onActionClick(row.id)">Delete</button>
      </div>
    </ng-template>
</ng2-ya-table>

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

public data: unknown[] = [...]; //array of data

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

public columns: TableColumn[] = [
{ 
    title: 'Name', 
    name: 'name', 
    sort: true, 
    sortOrder: 'asc',  
    filter: {
        controlType: 'default',
        config: {
            placeholder: 'Filter by name'
        }
    } 
},
{ 
    title: 'Username', 
    name: 'username', 
    sort: true, 
    filter: {
        controlType: 'default',
        config: {
            placeholder: 'Filter by username'
        }
    } 
},
{ 
    title: 'Email', 
    name: 'email', 
    sort: true, 
    filter: {
        controlType: 'default',
        config: {
            placeholder: 'Filter by email'
        }
    } 
},
{ 
    sort: false, 
    title: '', 
    name: 'btnEdit',
    width: "10px"
},
{ 
    sort: false, 
    title: '', 
    name: 'btnDelete',
    width: "10px"
}];

Server-Side datasource Setup Example

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

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

Further Documentation

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

Features

• Observable data source (client-side or server-side)
• Filtering
• Sorting
• Pagination
• Bootstrap 4 / 5 layout

License

MIT license.