Ngx-material-dynamic-table NPM

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

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";

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': 'Sincere@april.biz'
  },
  {
    'id': 2,
    'name': 'Ervin Howell',
    'username': 'Antonette',
    'email': 'Shanna@melissa.tv'
  }   
];
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