# 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](/exibicao-de-dados/componentes-dinamicos.md).

{% 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](/formulario/formulario-dinamico.md) 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/exibicao-de-dados/datatable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.