# Datatable

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. 

{% hint style="info" %}
*Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.*
{% endhint %}

#### hasSelection

Permite a seleção de dados na lista.

{% hint style="info" %}
*Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.*
{% endhint %}

#### setService

Informe uma function que passa como parâmetro o filtro recebido em [setFilter](#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](#setservice) para que possa utilizar em requisições HTTP ou filtrando em memória utilizando o datasource fornecido em [getDatasource](#getdatasouce).

#### setColumns

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

{% hint style="info" %}
A ordem em que passa as colunas importa para a passagem do índice no método [setItemLine](#setitemline), para que seja possível posicionar a célula na coluna correta.
{% endhint %}

#### 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](https://doc.catui.igordrangel.com.br/exibicao-de-dados/componentes-dinamicos).

{% hint style="info" %}
*A posição da célula deve ser levada em consideração a ordem definida no método* [*setColumns* ](#setcolumns)*começando de 0.*
{% endhint %}

#### setActionButton

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

{% hint style="info" %}
*Disponível apenas em caso de ativação da seleção com o método* [*hasActions*](#hasactions)*.*
{% endhint %}

#### getSelection

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

{% hint style="info" %}
*Disponível apenas em caso de ativação da seleção com o método* [*hasSelection*](#hasselection)*.*
{% endhint %}

#### getDatasouce

Fornece os dados carregados no método [setService](#setservice).

### Uso

{% code title="page-datatable-example.module.ts" %}

```typescript
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 {}
```

{% endcode %}

{% code title="page-datatable-example.service.ts" lineNumbers="true" %}

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

```

{% endcode %}

{% hint style="info" %}
O filtro utilizado foi contruído utilizando o componente de [Formulário Dinâmico](https://doc.catui.igordrangel.com.br/formulario/formulario-dinamico) do Cat UI.
{% endhint %}

{% code title="page-datatable-example.component.ts" lineNumbers="true" %}

```typescript
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
  ) {}
}

```

{% endcode %}

{% code title="page-datatable-example.component.html" %}

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

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/datatable>" %}
Demonstração
{% endembed %}