Tablas de datos en Angular

1. Tablas de datos en Angular
2. Convertir JSON a tablas de datos en Angular

Presentaremos cómo usar tablas de datos y convertir respuestas JSON en tablas de datos en Angular.

Tablas de datos en Angular

Hay una biblioteca preconstruida de angular-datatables que podemos usar para mostrar tablas de datos complejas en Angular.

Podemos instalarlo fácilmente usando el siguiente comando:

# terminal
ng add angular-datatables

O podemos instalarlo manualmente usando npm:

# terminal
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Y después de eso, debemos agregar las dependencias en los scripts y atributos de estilos al archivo angular.json.

# angular
"projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
            ...
          }
}

Ahora, necesitamos importar DataTablesModule en el nivel apropiado de nuestra aplicación.

# angular
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { DataTablesModule } from "angular-datatables";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DataTablesModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Convertir JSON a tablas de datos en Angular

Podemos usar el siguiente ejemplo si queremos convertir una respuesta JSON en DataTables.

Necesitamos agregar el siguiente código a app.component.ts.

# angular
import { AfterViewInit, VERSION, Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  version = 'Angular: v' + VERSION.full;
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  persons: any = [];
  // We use this trigger because fetching the list of persons can be quite long,
  // thus we make sure the data gets fetched before rendering
  dtTrigger: Subject<any> = new Subject();

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    const dataUrl = 'https://raw.githubusercontent.com/Inventico-Sol/test-json/main/data.json';

    this.http.get(dataUrl)
      .subscribe(response => {
        setTimeout(() => {
          this.persons = response.data;
          console.log(response);
          // Calling the DT trigger to manually render the table
          this.dtTrigger.next();
        });
      });

  }

  ngAfterViewInit(): void {

    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });
    });

  }
}

Luego, debemos agregar el siguiente código a app.component.html.

# angular
{{ version }}
<table
  datatable
  [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger"
  class="row-border hover"
>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of persons">
      <td>{{ person.id }}</td>
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th><input type="text" placeholder="Search ID" name="search-id" /></th>
      <th>
        <input
          type="text"
          placeholder="Search first name"
          name="search-first-name"
        />
      </th>
      <th>
        <input
          type="text"
          placeholder="Search last name"
          name="search-last-name"
        />
      </th>
    </tr>
  </tfoot>
</table>

Producción: