As tabelas de dados foram introduzidas para simplificar o processo de visualização, agrupamento, consulta e classificação de dados. Normalmente, uma tabela é apenas uma forma tabular de dados e não tem nada de especial sobre ela. Mas uma tabela de dados pode oferecer vários recursos, incluindo classificação de dados, consulta de dados, atualização de dados, paginação, impressão e exportação de dados e muito mais.
Fazendo uso de uma tabela de dados em uma estrutura como Angular , que faz atualizações constantes à sua base de código, apresenta algumas complicações:
- Código obsoleto : Angular DataTables , que seremos usando para este artigo, não oferece suporte a versões anteriores do Angular CLI (Angular 8 e inferior). Mesmo as versões mais antigas do Node e npm usam código obsoleto e, portanto, não podem usar o serviço
- Configuração : todo desenvolvedor concordará que algumas configurações podem ser uma verdadeira dor de cabeça, e a configuração da tabela de dados no Angular não é exceção
O que é Angular DataTables?
Angular DataTables é uma biblioteca para construir tabelas HTML complexas que usa o plugin DataTables da jQuery. Ele é configurado para suportar TypeScript e otimizado para Angular 2+.
Angular DataTables será útil quando:
- Você tem um conjunto de dados muito grande vindo de um ou mais endpoints de API
- Você precisa de classificação/filtragem de dados personalizados
- Você precisa exportar e imprimir dados de uma tabela
Os recursos do Angular DataTables podem ser amplamente agrupados em dois conjuntos: básicos e avançados. A partir daí, o Angular DataTables também oferece suporte a várias extensões.
Recursos básicos
- Carregamento direto de dados usando chamadas AJAX
- Opções como renderização de coluna em seus componentes angulares
- Renderização de tabelas usando a função personalizada
dtTrigger - Processamento do lado do servidor (embora você precise substituir a opção AJAX)
Recursos avançados
- Filtragem personalizada, que abrange a filtragem por números, strings, booleanos, etc.
- Filtragem de coluna individual, que classifica os dados por coluna
- Re-renderização da tabela de dados
- Várias tabelas podem ser exibidas simultaneamente
- Links de roteador podem ser adicionados aos componentes angulares, que podem exibir uma única instância de dados em uma nova página
- Pipes são adicionados à tabela de dados para transformar os dados no formato que você deseja
Instalando Angular DataTables
Vamos agora mergulhar na instalação e no uso do Angular DataTables. Para começar, instalaremos nosso aplicativo Angular e, em seguida, instalaremos o DataTables no aplicativo:
ng nova tabela de dados angular
Quando a instalação do Angular estiver concluída, você pode acessar o diretório em seu terminal e instalar o DataTables:
cd datável angular ng adicionar tabelas de dados angulares
Isso adicionará o jQuery e o plug-in DataTables ao seu arquivo angular.json e ao seu aplicativo. Quando a instalação estiver concluída, você pode importar seu módulo de tabela de dados em app.module.ts para usá-lo globalmente no aplicativo:
//src/app/app.module.ts import {DataTablesModule} de'angular-datatables'; importações: [ BrowserModule, AppRoutingModule, DataTablesModule,
],
Fazendo uma chamada API
Usaremos a API JSONPlaceholder para preencher nossa tabela de dados com informações para dar uma olhada no Angular DataTables.
Para fazer isso, primeiro teremos que adicionar o módulo HttpClient em nosso arquivo app.module.ts para torná-lo acessível em nossos serviços para solicitações HTTP. Fazemos isso importando-o e chamando-o na matriz importações :
//src/app/app.module.ts importar {HttpClientModule} de'@ angular/common/http'; importações: [ BrowserModule, AppRoutingModule, DataTablesModule, HttpClientModule
],
Criação de um serviço Angular
Criaremos um serviço Angular que se comunicará com nosso módulo HTTP para buscar dados de nossa API. Para gerar o serviço, vamos executar o comando abaixo no terminal:
ng gerar serviços/usuários/usuários do serviço
Isso criará um novo diretório de arquivo em nossa pasta src/app contendo nosso arquivo users.services.ts :
-| Comercial/ users.service.spec.ts users.services.ts
Podemos então importar nosso HttpClient em nosso arquivo users.service.ts :
//src/app/services/users/users.service.ts importar {HttpClient} de'@ angular/common/http'; construtor (privado http: HttpClient) {}
A seguir, adicionamos nossa função, que obterá usuários do link da API:
usuários () { this.http.get ('https://jsonplaceholder.typicode.com/users');
}
Gerando um componente
Depois de criar o serviço, geramos um componente com o nome users , que conterá os dados que obtemos do serviço que acabamos de criar e os exibirá em nossa página HTML. Também usaremos o componente users para criar nossa tabela de dados e todas as funcionalidades.
Para criar um componente, basta executar o seguinte comando:
ng gerar componentes/usuários de componentes
Consumindo a API
Em nossos componentes users , consumiremos os dados da API obtidos do serviço que criamos e os armazenaremos em uma matriz chamada allUsers :
importar {UsersService} de'../../services/users/users.service'; export class UsersComponent implementa OnInit { allUsers: any=[]; construtor (serviço privado: UsersService) {} ngOnInit (): void { this.users (); } usuários (): void { this.service .Comercial() .subscribe ((resposta: qualquer)=> { this.allUsers=response.data; }); } }
Em seguida, preenchemos nosso users.component.html com nossos usuários buscados:
ID Nome Nome de usuário Número de telefone Endereço {{user.id}} {{user.name}} {{user.username}} {{user.email}} {{user.phone}} {{user.address.street}}, {{user.address.city}}
Ele exibirá algo assim:
Agora que isso está feito, estale os dedos porque estamos prestes a mergulhar no uso e manipulação de tabelas de dados! 
Adicionando nossa tabela de dados
Como já adicionamos nosso módulo de tabela de dados em app.module.ts , não teremos que importá-lo em nosso componente; simplesmente o chamamos de assunto usando rxjs :
//src/app/components/users/users.components.ts
importar {Assunto} de'rxjs';
... export class UsersComponent implementa OnInit { dtOptions: DataTables.Settings={}; dtTrigger: Assunto =novo Assunto (); }
Em seguida, adicionamos nossa função unsubscribe ao módulo Angular OnDestroy :
import {Component, OnInit, OnDestroy} de'@ angular/core'; export class UsersComponent implementa OnInit, OnDestroy { ...
} ngOnDestroy (): void { this.dtTrigger.unsubscribe ();
}
Isso redefinirá a tabela de dados sempre que deixarmos a página anexada ao componente.
Com isso, iremos agora adicionar uma tabela de dados à nossa função users e uma tabela de usuários em nosso HTML componente:
usuários (): void { this.service .Comercial() .subscribe ((resposta: qualquer)=> { this.allUsers=resposta; //iniciar nossa tabela de dados this.dtTrigger.next (); });
}
Filtragem e paginação foram adicionadas à tabela, como você pode notar na imagem abaixo:
Filtragem personalizada
Pode haver momentos em que desejamos pesquisar dados apresentados ao usuário final de nossa própria maneira. Os exemplos comuns incluem pesquisas de intervalo de números (entre dois números) e pesquisas de intervalo de datas. O Angular DataTables permite que você faça essas pesquisas personalizadas com facilidade e sem esforço.
N.B. , a documentação para filtragem personalizada em Angular DataTables está com defeito, principalmente por causa de atualizações no TypeScript com Angular, então siga meus exemplos.
Para iniciar a filtragem personalizada, primeiro importaremos um decorador @ViewChild , que nos permite injetar em uma classe de componente referências a elementos usados dentro de seu modelo:
import {Component, OnInit, OnDestroy, ViewChild} de'@ angular/core';
Em seguida, importamos DataTableDirective em nosso componente:
import {DataTableDirective} de'angular-datatables';
Em seguida, referenciamos nosso DataTableDirective e o atribuímos a uma nova variável datatableElement . Depois disso, criaremos as variáveis max e min , que usarão os números máximo e mínimo para nossa filtragem personalizada.
Vamos começar com a referência:
@ViewChild (DataTableDirective, {static: false})
datatableElement: any=DataTableDirective;
min: qualquer=0; máx.: qualquer=0;
A seguir, usamos a função personalizada para filtrar em nosso ngOnInit :
ngOnInit (): void { ... $.fn.dataTable.ext.search.push ((configurações: qualquer, dados: string [], dataIndex: qualquer)=> { const id=parseFloat (dados [0]) || 0;//use dados para a coluna id return (Number.isNaN (this.min) && Number.isNaN (this.max)) || (Number.isNaN (this.min) && id <=this.max) || (this.min <=id && Number.isNaN (this.max)) || (this.min <=id && id <=this.max); });
}
Isso obterá os números max e min , buscará os dados e, em seguida, atualizará a tabela de dados. A seguir, criamos uma função para filtrar a tabela de dados por id :
filterById (): void { this.datatableElement.dtInstance.then ((dtInstance: DataTables.Api)=> { dtInstance.draw (); });
}
Agora, ele reinicia a tabela de dados quando saímos da página:
ngOnDestroy (): void { ... $.fn.dataTable.ext.search.pop ();
}
Com tudo isso feito, atualizamos nossa página users.components.html para iniciar nossa função filterById :
E é isso-podemos usar a filtragem personalizada por id .
Extensão de botões
Conforme mencionado acima, o Angular DataTables oferece suporte a várias extensões, uma das quais é uma extensão de botões. A extensão de botões nos permite exportar e copiar os dados da nossa tabela como um arquivo. Isso é especialmente útil quando queremos compartilhar dados sem fornecer acesso ao aplicativo.
Para usar a extensão de botões DataTables, instale seu plugin usando o comando abaixo:
# Se você deseja exportar arquivos excel npm install jszip--save # Arquivo JS npm install datatables.net-buttons--save # Arquivo CSS npm install datatables.net-buttons-dt--save # Typings npm install @ types/datatables.net-buttons--save-dev
Em seguida, adicione as dependências nos atributos scripts e styles :
{ "projetos": { "nome-do-seu-aplicativo": { "arquiteto": { "construir": { "opções": { "estilos": [ ... "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css" ], "scripts": [ ... "node_modules/jszip/dist/jszip.js", "node_modules/datatables.net-buttons/js/dataTables.buttons.js", "node_modules/datatables.net-buttons/js/buttons.colVis.js", "node_modules/datatables.net-buttons/js/buttons.flash.js", "node_modules/datatables.net-buttons/js/buttons.html5.js", "node_modules/datatables.net-buttons/js/buttons.print.js" ], ...
}
Em seguida, incluímos as configurações em nosso ngOnInit :
ngOnInit (): void { this.dtOptions={ //Declara o uso da extensão no parâmetro dom dom:'Bfrtip', };
}
E aqui está o resultado-os botões Copiar , Excel , CSV e Imprimir foram adicionados:
Existem muito mais opções para escolher quando se trata de personalizar sua tabela de dados. Com alguns ajustes, você pode moldá-lo de acordo com suas especificações e ficará perfeito para o que quer que você esteja construindo.
Concluindo
E com isso, apresentamos o Angular DataTables e seus recursos. Também o aplicamos a um aplicativo, usamos alguns de seus recursos e exploramos a extensão de botões. Fiz algumas modificações na documentação original por causa das atualizações no Angular TypeScript. Espero que este tutorial tenha fornecido uma análise simples e fácil de seguir de como usar Angular DataTables em seu aplicativo Angular.
A postagem Usando Angular DataTables para construir tabelas ricas em recursos apareceu primeiro no LogRocket Blog .
