@pluritech/ng2-responsive-table v1.2.1

ng2-responsive-table

A table responsive component for your angular project.

Installation

$ npm install @pluritech/ng2-responsive-table --save

Then, import Ng2TableModule

import { Ng2TableModule } from '@pluritech/ng2-responsive-table';

and add it into your AppModule

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    Ng2TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This library depends of bootstrap styles, so, ensure that is correctly installed and imported.

Usage

In your component template, do the following:

<ng-table [data]="data"></ng-table>

So, in the typescript you will need:

public data: TableContent = {
    columns: [
      {id: 'name', name: 'Name', width: '50%'},
      {id: 'age', name: 'Age'}
    ],
    rows: [
      { data: { name: 'Mateus', age: '23' }},
      { data: { name: 'Lucas', age: '26'}}
    ],
    actions: [
      {name: 'Add Something', class: 'btn btn-primary', icon: 'fa fa-plus',
      condition: row => {
        console.log('condition', row);
        return true;
      },
      disabled: row => {
        console.log('disabled', row);
        return true;
      },
      handler: row => {
        console.log('handler', row);
      }}
    ]
  };

The TableContent type in details

The columns of the table receive each an id. This id, has to be used in the rows to fill the table correctly. The actions columns, receive the following

You can also set noRowsMsg to show when no there data on table. Default is: Nenhum registro exibido

Working with checkboxes columns

If you need a column of checkbox in your table, where, the table header of this column will mark all registers you can do the following:

    columns: [
      {id: '', name: '', checkbox: {singleName: 'Marcar'}},
      {id: 'name', name: 'Name'},
      {id: 'age', name: 'Age'}
    ],

the singleName property is the label of every checkbox on mobile screen. To get all the changes in the selected rows, you'll need to pass a function to the following two outputs properties:

  <ng-table [data]="data"
      (selectedChange)="onSelectedChange($event)"
      (selectedChangeAll)="onSelectedChangeAll($event)"></ng-table>

License

MIT © Pluritech