1.1.7 • Published 6 years ago
table-ng-quick v1.1.7
Table NG
Todo
- Search
- Order per column :fire:
- Multi Select
- Filter
- Icon
- Alter table with input html
- Config Service to GLOBAL config (basic search and style)
- Create a element Input and Button in html with events
- Create function to disable and hide input / buttons
Component parameters
Legend
- :point_left: Output
- :point_right: Input
Parameters
- :point_right: data
Array of data to list in table
- :pointright: config `Config table object is _Table`
- :point_right: search
Search to word > tip: bind one variable here
- :point_right: id
Default id is a id td but if is different set [id]='other id name'
- :point_right: activeAction
Active edit and trash icons
- :point_right: select
Select on click, return object in selected output
:point_right: displayNRows
Binding a number to select limit number rows
:point_left: delete
Emit a delete event empty to use function in html
:point_left: edit
Emit a edit event empty to use function in html
:point_left: selected
Emit object selected
- :point_left: selectedDoubleClick
Emit object double click selected
Example easy
export class AppComponent {
data = [
{ id: '1', nome: 'raphael' },
{ id: '2', nome: 'damiao', administrator: 'dondomino', trabalho: { nome: 'Desenveolvedor' } },
{ id: '3', nome: 'julia', administrator: true }
];
config: Table; //variable to config
constructor() {
this.config = {
columns: [
{ title: 'Nome', nameData: 'nome'},
{ title: 'Job', nameData: 'trabalho.nome'}
]
};
}
out(e) {
console.log(e);
}
}
Example advanced
export class AppComponent {
search = 'app';
dados = [
{ id: '1', nome: 'raphael' },
{ id: '1', nome: 'damiao', administrator: 'dondomino', trabalho: { nome: 'Desenveolvedor' } },
{ id: '1', nome: 'julia', administrator: true }
];
config: Table;
constructor() {
this.config = {
style: {
classNameContainer: 'table-responsive', //if your use bootstrap example
classNameTable: 'table table-hover'
},
search: {
nameData: ['trabalho.nome']
},
columns: [
{ title: 'Nome', nameData: 'nome', order: { active: true }, icon: { active: true , icon: 'archive'} },
{ title: 'Job', nameData: 'trabalho.nome', order: { active: true } },
{
title: 'Admin', extend: {
mathValueToString: {
default: '',
nameDatas: ['administrator'],
expected: ['dondomino', false],
resultView: ['Administrador', 'Funcionario']
}
},
order: { active: true }
}
]
};
}
out(e) {
console.log(e);
}
}
Html example
<table-ng [data]="data" [config]="config"></table-ng>