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. Os exemplos apresentados podem ser encontrados em ons-core/src/app/samples/data-table-example.

Dependências

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.

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.

<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.

/* 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.
• Documentação adicional: http://swimlane.github.io/ngx-datatable/.