# ons-core-datatable

> Componente de *grid* que permite reposicionar colunas, ordenar linhas, filtrar registros e armazenar o estado. Este componente foi desenvolvido com base no [ngx-datatable](http://swimlane.github.io/ngx-datatable/). Os exemplos apresentados podem ser enco

Latest version **1.2.0** (published 2019-06-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install ons-core-datatable
pnpm add ons-core-datatable
yarn add ons-core-datatable
bun add ons-core-datatable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-06-05 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ONS |
| Maintainers | rodrigo.sul |
| Keywords | ons, core, datatable |

## Links

- npm: https://www.npmjs.com/package/ons-core-datatable
- Repository: https://onsvsts.visualstudio.com/ONSCore/_git/ONS.Core.Web.Frontend
- npm.io page: https://npm.io/package/ons-core-datatable

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-06-05

## README

# ONS Core DataTable

Componente de *grid* que permite reposicionar colunas, ordenar linhas, filtrar registros e armazenar o estado.
Este componente foi desenvolvido com base no [ngx-datatable](http://swimlane.github.io/ngx-datatable/). Os exemplos apresentados podem ser encontrados em `ons-core/src/app/samples/data-table-example`.

## Dependências

```bash
npm install --save @swimlane/ngx-datatable@^13.1.0
```

## Utilização do componente

O ONS Core DataTable tem como elemento básico o `<ngx-datatable>`. Grande parte da funcionalidade é conseguida modificando os atributos deste elemento.

### Importações

É necessário importar estes módulos no componente a ser desenvolvido.

```ts
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { OnsCoreDatatableModule } from 'ons-core-datatable';

  imports: [
    NgxDatatableModule,
    OnsCoreDatatableModule
  ]
```

### Diretivas

Atentar para os atributos `[count]` e `[rows]`, que devem fazer *bind* com o objeto `filterResult` do dataTable.

```html
<ngx-datatable
  class="material"
  [columns]="dataTable.columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [sortType]="'multi'"
  [sorts]="dataTable.sorts"

  [externalPaging]="true"
  [offset]="dataTable.filterOffset"
  [limit]="dataTable.filterRowsPerPage"
  [count]="dataTable.filterResult.totalCount"
  [rows]="dataTable.filterResult.tableData"
  (page)="dataTable.onFilter($event)"

  (reorder)="dataTable.onReorderCb($event)"
  (sort)="dataTable.onColumnSortCb($event)"
  (resize)="dataTable.onResizecb($event)">
</ngx-datatable>
```

## Estilos (CSS)

É necessário importar os estilos do componente data-table para o estilo principal do projeto que irá utilizar esta biblioteca.

```css
/* Estilos para o ngx-datatable */
@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
```

## Classes e Interfaces

### DataTableConfiguration

Contém

- Os estados (`DataTableState`) inicial e atual da tabela, para permitir desfazer alterações;
- Um serviço (`DataTableStorable`) para serialização e persistência do estado;
- Um serviço (`DataTableFilterAction`) para buscar os registros do backend de acordo com o filtro;
- O resultado (`FilterDataResponse`) da filtragem e paginação;
- O número de linhas por página e o número da página propriamente dito;
- Além de métodos para inicialização do `DataTable` e *callbacks* de eventos.

### DataTableState

Estrutura incluindo a ordem e direção ("ASC", "DESC") das colunas, bem como o filtro em efeito na tabela.

### DataTableFilterAction

Interface consumida pelo `DataTableConfiguration` contendo as informações de filtro e *callbacks* para os casos de sucesso e falha.

### FilterDataRequest

Estrutura de filtro a ser enviada ao backend, similar ao `BaseFilter` do projeto **ONS.Core.Web**.

### FilterDataResponse

Resultados da filtragem e paginação, incluindo total de registros e de páginas no backend.

### DataTableStorable

Responsável por persistir (ou não) o estado do *grid* entre recarregamentos de página.

## Referências

- A documentação e código da biblioteca base podem ser acessados no [Github](https://github.com/swimlane/ngx-datatable).
- Documentação adicional: <http://swimlane.github.io/ngx-datatable/>.

---
_Source: https://npm.io/package/ons-core-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._