# TABLE-V2 - COMPONENT

# INTRODUÇÃO

Esse componente será utilizado para a apresentação de dados, não sendo realizado o tratamento de dados, busca de dados, paginação dentro do componente, ficando essa responsabilidade para os componentes que o utilizarem. A princípio, ele foi desenvolvido para a LB-863, para apresentação de dados de maneira distinta ao componente que já existe em nossa biblioteca. Para evitar aninhamento de código e aumentar complexidade de um componente que irá servir apenas para apresentação simples de dados, foi criado o Table-V2.

# MODULE E IMPORTAÇÃO

Importe o módulo TableV2Module no módulo que você deseja:

```ts
import { ButtonModule, DirectivesModule, IconModule, InputModule, TableV2Module } from 'ngx-softfocus';

@NgModule({
    imports: [
        TableV2Module,
    ]
})
```

# PARÂMETROS

```ts
    @Input() tableConfig?: TableV2Config = {};
    @Input() headerColumns!: HeaderColumn[];
    @Input() dataRow!: DataRow[];
    @Output() changeOrder = new EventEmitter<HeaderColumn>();
```

-> tableConfig, será um parâmetro OPCIONAL, que terá propriedades para estilos, desde estilos para o cabeçalhos, estilos para as linhas e estilos para a tabela em um todo. Cada propriedade podeserá ser visualizada individualmente no arquivo table-v2.ts. Mesmo que não passe nada de parâmetro ao TableV2Config, ele será inicializado com valores padrões.

    `headerStyle`?: Objeto que irá receber diversos parâmetros relacionados ao estilo da `COLUNA`, como font, tamanho de font, peso da font etc. (Opcional);
    `columnStyle`?: Objeto que irá receber diversos parâmetros relacionados ao estilo da `COLUNA`, como tamanho mínimo largura. (Opcional);
    `rowStyle`?: Objeto que irá receber diversos parâmetros relacionados ao estilo da `LINHA`, como font, tamanho de font, peso da font etc. (Opcional);
    `tableStyle`?: Objeto que irá receber diversos parâmetros relacionados ao estilo da `TABELA`, como cor de fundo da tabela, border radius e cor das bordas da tabela. (Opcional);
    `scrollVisible`?: Se será possível visualizar ou não o Scroll ao lado da tabela. (Opcional).

# TODAS AS PROPRIEDADES DO HEADER STYLE, ROW STYLE, TABLE STYLE PODEM SER VISUALIZADS NO ARQUIVO TABLE-V2.TS

-> headerColumns, é o parâmetro responsável por receber o campo e valor do campo para ser adicionado ao cabeçalho. Podendo passar para cada coluna individualmente. Ele tem as propriedades: -`field`!: Representar o nome do atributo (Obrigatório); -`label`!: Representa o nome da coluna em tela (Obrigatório); -`sortButton`?: Apresentar ou não botão de ordenação (Obrigatório). -`sortAsc`?: Estado inicial de ordenação, apenas variável para controle da "flecha" que renderiza em tela (Obrigatório).

-> dataRow, receberá os valores de cada linha, os dados que serão populados. Ele será uma chave dinâmica, então o 'field' informado para cada headerColumn, será representado no dataRow como chave. - `[key: string]`: Chave representando o field da coluna;

-> changeOrder, será o evento, ao clicar no botão de ordenação de cada coluna, que irá enviar ao componente pai, o objeto da coluna, que irá conter os dados necessários para identificar qual campo precisa ordenar, e também informando se `asc` é verdadeiro ou falso.

Exemplo de chamada do componente.

```html
<soft-table-v2 [headerColumns]="headerColumns" [dataRow]="dataRow" [tableConfig]="tableConfig"> </soft-table-v2>
```

```ts
dataRow = [
    {
        produto_credito: "Produto Exemplo",
        empresa: "Empresa Exemplo",
        campo_alterado: "Taxa de juros",
        campo_de: "SELIC",
        campo_para: "SAC_365",
        usuario: "Usuário Exemplo",
        data_hora: "01/01/2021 às 12:00:00",
    },
];

headerColumns = [
    {
        field: "produto_credito",
        label: "Produto de crédito",
        sortButton: true,
        sortAsc: false,
    },
];

tableConfig = {
    headerStyle: {
        fontWeight: "600",
    },
    columnStyle: {
        minWidth: "11rem",
    },
    rowStyle: {
        fontWeight: "600",
    },
    tableStyle: {
        backgroundColor: "red",
    },
};
```