Tabela dinâmica com Angular Material

Componente angular dinâmico que ajuda a criar uma tabela utilizando o Angular material, de maneira fácil e rápida.

Recursos

• tabela com dados dinâmicos
• botões de ações
• paginação
• ordenação de colunas

Depêndencias

| DynamicTable | Angular |
| ------------- |:-------------:| | 1.0.0 | 9.x |

Install

npm install ngx-material-dynamic-table --save

Setup

1. Adicione o css dos icones o material ao seu , e o css de algum tema do material

@import "~material-design-icons/iconfont/material-icons.css";
@import "@angular/material/prebuilt-themes/deeppurple-amber.css";

2. Adicione o DynamicTableModule ao seu NgModule, e também o browser animations

  import { CommonModule } from '@angular/common';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  import { NgxMaterialDynamicTableModule } from 'ngx-material-dynamic-table';

  @NgModule({
    imports: [
      CommonModule,
      BrowserAnimationsModule, // required animations module
      NgxMaterialDynamicTableModule // DynamicTable added
    ],
    bootstrap: [App],
    declarations: [App]
  })
  class MainModule {}

Como utilizar

  <ngx-material-dynamic-table
    [dataSource]="dataSource"
    [displayedColumns]="displayedColumns"
    [actions]="actions"
    [filter]="filter"
    (sendClick)="rowAction($event)"
  >
  </ngx-material-dynamic-table>

public displayedColumns: any = [{ column: 'id', title: 'id' }, { column: 'name', title: 'name' }, { column: 'email', title: 'email' }];
public actions = [{ column: 'read', title: 'read' }, { column: 'update', title: 'update' },{ column: 'delete', title: 'delete' }];
public filter = false;
public dataSource = [
  {
    'id': 1,
    'name': 'Leanne Graham',
    'username': 'Bret',
    'email': '[email protected]'
  },
  {
    'id': 2,
    'name': 'Ervin Howell',
    'username': 'Antonette',
    'email': '[email protected]'
  }   
];
rowAction(row){
  // you can create your callback functions after clicked in actions buttons
  console.log(row)
}

Propriedades

Obrigatórios

| propriedades | tipo | valor padrão | descrição
| ------------- |:-------------:|:-------------:|:-------------:| | Input() dataSource | [ ] any | [] | Deve ser a lista de linhas da dados, onde a chave é o nome da coluna e o valor, o valor exibido na linha correspondente a coluna | | Input() displayedColumns | [ ] < ColumnsConfig > | [] | Deve ser a lista de colunas que deverão ser exibidas na sua tabela, onde column = a coluna representada e title = nome a ser exibido |

Opcionais

| propriedades | tipo | valor padrão | descrição
| ------------- |:-------------:|:-------------:|:-------------:| | Input() actions | [ ] < ColumnsConfig > | [] | Lista de ações disponiveis que deverão esta disponivel nesta tabela (editar, deletar, etc) | | Input() filter | boolean | true | Se deve ser exibido um input de filtro na tabela | | Output() sendClick | EventEmitter | | Evento emitido ao clicar em uma das ações disponiveis da lista, envia a ação clicada e os valores da linha |

Configurações

| propriedades | tipo | valor padrão | descrição
| ------------- |:-------------:|:-------------:|:-------------:| | Input () buttonsConfig | Object < ButtonsConfig > | { read: { icon: 'search', name: 'read', tooltip: 'Visualizar' }, update: { icon: 'edit', name: 'edit', tooltip: 'Editar' }, delete: { icon: 'delete', name: 'delete', tooltip: 'Excluir' }, download: { icon: 'arrow_downward', name: 'download', tooltip: 'Download' }} | Objeto de configurações das ações disponvel no package da tabela dinamica, com o nome, icone, e texto do tooltip dos botões |

Interfaces

ColumnsConfig

| nome | descrição
| ------------- |:-------------:| | icon: string | classe do icone do botão | | name: string | nome da coluna | | tooltip: string | nome de exibição |

ButtonsConfig

| nome | descrição
| ------------- |:-------------:| | column: string | nome de referencia da coluna no objeto dataSource | | title: string | nome da coluna a ser exibido |