A table responsive component for your angular project.
npm install @pluritech/ng2-responsive-tableA table responsive component for your angular project.
``bash`
$ npm install @pluritech/ng2-responsive-table --save
Then, import Ng2TableModule
`typescript`
import { Ng2TableModule } from '@pluritech/ng2-responsive-table';
and add it into your AppModuletypescript
@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.
html
`
So, in the typescript you will need:
typescript
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);
}}
]
};
`$3
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
$3
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:
typescript
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:
html
(selectedChangeAll)="onSelectedChangeAll($event)">
``