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

Field	Description
name	Text of the button
class	css class name to be applied to button
icon	css class name icon to be applied to button
condition	a function which receives a row and returns a boolean indicating whether this current action button should be displayed
disabled	a function which receives a row and determines whether this current action button should be disabled
handler	a function who can receive the row and will be executed when the button is clicked

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>

Event	Description
selectedChange	Will fire every time a single row change the selected status. The event will send the array with selecteds rows
selectedChangeAll	Will fire every time the table header button change the selected status. The event will send the array with selecteds rows and a boolean indicating if isAllSelected or not.

License

MIT © Pluritech