table-ng-quick

Table NG

Todo

• [x] Search
• [x] Order per column 🔥
• [ ] Multi Select
• [x] Filter
• [x] Icon
• [ ] Alter table with input html
• [x] Config Service to GLOBAL config (basic search and style)
• [x] Create a element Input and Button in html with events
• [x] Create function to disable and hide input / buttons

Component parameters

Legend

• 👈 Output
• 👉 Input

Parameters

• 👉 data Array of data to list in table

• 👉 config Config table object is _Table_

• 👉 search Search to word > tip: bind one variable here

• 👉 id Default id is a id td but if is different set [id]='other id name'

• 👉 activeAction Active edit and trash icons

• 👉 select Select on click, return object in selected output

• 👉 displayNRows Binding a number to select limit number rows

• 👈 delete Emit a delete event empty to use function in html

• 👈 edit Emit a edit event empty to use function in html

• 👈 selected Emit object selected

• 👈 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>