Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • API
  • Uso
  • Overview

Was this helpful?

  1. Exibição de Dados

Datatable

Construa tabelas de forma fácil e objetiva

PreviousTabNextComponentes Dinâmicos

Last updated 2 years ago

Was this helpful?

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 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 para que possa utilizar em requisições HTTP ou filtrando em memória utilizando o datasource fornecido em .

setColumns

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

setItemLine

setActionButton

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

getSelection

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

getDatasouce

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()
      );
  }
}
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

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

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 .

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

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

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

Fornece os dados carregados no método .

O filtro utilizado foi contruído utilizando o componente de do Cat UI.

CatDynamicComponent
Formulário Dinâmico
setFilter
setService
getDatasource
setItemLine
setColumns
hasActions
hasSelection
setService
CatUi
Demonstração
Logo