Datatable

Construa tabelas de forma fácil e objetiva

O Cat Ui utiliza um conceito de builder onde com chamadas de métodos encadeados permitirá a criação de formulários sem a necessidade de HTML e CSS, focando apenas na regra de negócio, garantindo assim, mais produtividade.

API

hasActions

Permite a inclusão de botões de ação para cada item da lista.

Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.

hasSelection

Permite a seleção de dados na lista.

Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.

setService

Informe uma function que passa como parâmetro o filtro recebido em setFilter e retorne um Observable ou requisições HTTP de HttpClient.

Este método possui um parâmetro opcional onde, poderá informar a forma de carga dos dados, o indice de localização da lista e do contador total de dados, para casos de retorno de um objeto ao invés de uma lista direta.

setFilter

Este método permite incluir um Observable para a realização de filtros...ideal para inclusão de valueChanges do FormGroup ou Observables customizados.

Os dados passados no observable são fornecidos no método setService para que possa utilizar em requisições HTTP ou filtrando em memória utilizando o datasource fornecido em getDatasource.

setColumns

Inclua a partir deste método os nomes das colunas que serão exibidas no cabeçalho da tabela.

A ordem em que passa as colunas importa para a passagem do índice no método setItemLine, para que seja possível posicionar a célula na coluna correta.

setItemLine

Permite a configuração de uma célula na lista, onde informará a posição, ordenação e a forma de retorno dos dados, seja em texto ou como CatDynamicComponent.

A posição da célula deve ser levada em consideração a ordem definida no método setColumns começando de 0.

setActionButton

Permite a configuração de um botão de ação de forma totalmente personalizável.

Disponível apenas em caso de ativação da seleção com o método hasActions.

getSelection

Fornece um objeto contendo todas as informações com relação a itens seletionados na lista.

Disponível apenas em caso de ativação da seleção com o método hasSelection.

getDatasouce

Fornece os dados carregados no método setService.

Uso

page-datatable-example.module.ts

import { NgModule } from "@angular/core";
import { PageDatatableExampleRoutingModule } from "./page-datatable-example.routing.module";
import { PageDatatableExampleComponent } from "./page-datatable-example.component";
import { CatDatatableModule } from "@catrx/ui/datatable";
import { CatFormModule } from "@catrx/ui/form";

@NgModule({
  declarations: [PageDatatableExampleComponent],
  imports: [
    CatFormModule,
    CatDatatableModule,
    PageDatatableExampleRoutingModule
  ]
})
export class PageDatatableExampleModule {}

page-datatable-example.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { delay } from "rxjs/internal/operators/delay";
import { first } from "rxjs/internal/operators/first";
import { map } from "rxjs/internal/operators/map";

@Injectable({providedIn: 'root'})
export class PageDatatableExampleService {
  constructor(private http: HttpClient) {
  }

  public getAll(filter: any) {
    let endpoint = 'municipios';
    if (filter.uf) {
      endpoint = `estados/${filter.uf}/municipios`;
    }
    return this.http
      .get<any[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/${endpoint}`)
      .pipe(
        map((response) =>
          response.map((item) => {
            return {
              estado: item['regiao-imediata']['regiao-intermediaria'].UF.nome,
              municipio: item.nome,
            };
          })
        ),
        delay(2000),
        first()
      );
  }
}

O filtro utilizado foi contruído utilizando o componente de Formulário Dinâmico do Cat UI.

page-datatable-example.component.ts

import { Component } from "@angular/core";
import { Route, Router } from '@angular/router';
import { CatDatatableService } from "@catrx/ui/datatable";
import { CatFormService } from "@catrx/ui/form";
import { BehaviorSubject } from "rxjs/internal/BehaviorSubject";
import { PageDatatableExampleService } from "./page-datatable-example.service";

@Component({
  templateUrl: 'page-datatable-example.component.html',
  styles: [
    `
      cat-form {
        display: block;
        margin: 20px 20px 15px;
      }
    `,
  ],
})
export class PageDatatableExampleComponent {
  datatableFilter$ = new BehaviorSubject(null);
  filterConfig = this.formService
    .build<any>()
    .search('Buscar', 'filter', (builder) => builder.grid(3).generate())
    .onChange((data) => this.datatableFilter$.next(data?.filter))
    .generate();

  datatableConfig = this.datatableService
    .build<any>()
    .setColumns(['Estado', 'Município'])
    .setFilter(this.datatableFilter$)
    .setActionButton({
      iconName: 'fa-solid fa-pencil',
      tooltip: 'Editar',
      fnAction: (itemLine) => console.log(itemLine),
    })
    .setActionButton({
      iconName: 'fa-solid fa-trash-can',
      tooltip: 'Excluir',
      fnAction: (itemLine) => console.log(itemLine),
    })
    .setItemLine({
      columnIndex: 0,
      sortColumn: 'estado',
      text: (itemLine) => itemLine.estado,
    })
    .setItemLine({
      columnIndex: 1,
      sortColumn: 'municipio',
      text: (itemLine) => itemLine.municipio,
    })
    .setService((filter) => this.service.getAll(filter))
    .hasSelection()
    .hasActions()
    .getSelection((selection) => console.log(selection.selected))
    .getDatasource((datasource) => console.log(datasource))
    .generate();

  constructor(
    private router: Router,
    private formService: CatFormService,
    private datatableService: CatDatatableService,
    private service: PageDatatableExampleService
  ) {}
}

page-datatable-example.component.html

<cat-form [config]="filterConfig"></cat-form>
<cat-datatable [config]="datatableConfig"></cat-datatable>

Overview

CatUi

Demonstração