# dharma-ui-dataset

> [![NPM](https://nodei.co/npm/dharma-ui-dataset.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/dharma-ui-dataset/)

Latest version **12.0.0** (published 2021-09-14) · 0 weekly downloads

## Install

```sh
npm install dharma-ui-dataset
pnpm add dharma-ui-dataset
yarn add dharma-ui-dataset
bun add dharma-ui-dataset
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 12.0.0 |
| Published | 2021-09-14 |
| First published | 2020-05-05 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 58.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | samuelfabel, renan.aquino12, ricardo_correa_dotz, diego.alves.sanches, thiago.hidalgo |

## Links

- npm: https://www.npmjs.com/package/dharma-ui-dataset
- npm.io page: https://npm.io/package/dharma-ui-dataset

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 12.0.0 (latest) — 2021-09-14
- 11.0.3-beta — 2021-05-11
- 11.0.2-beta — 2021-05-11
- 11.0.1-beta — 2021-05-11
- 0.0.1 — 2021-05-11
- 11.0.0-beta — 2021-03-29
- 8.0.0 — 2020-06-10
- 1.0.5 — 2020-05-19
- 1.0.4 — 2020-05-05
- 1.0.3 — 2020-05-05

## README

# dharma-ui-dataset

[![NPM](https://nodei.co/npm/dharma-ui-dataset.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/dharma-ui-dataset/)


### Motivação:
O dharma UI dataset tem como objetivo fornecer as funcionalidades essenciais para utilizar em uma table de dados.

O que o Dharma dataset oferece:
 - Bar Navigator

### Sumário:
<div id="TOC">
    <ul>
        <li>
            <a href="#install">Instalação</a>
        </li>
        <li>
            <a href="#bar-navigator">Bar Navigator</a>
        </li>
    </ul>
</div>

<div id="init-project">
 <h2> Instalando </h2>
</div>

Instale o módulo `dharma-ui-dataset`
`$ npm install dharma-ui-dataset`

<div id="bar-navigator">
 <h2> Bar Navigator </h2>
</div>

Descrição: Paginar uma tabela.

Vamos pegar como exemplo uma página do `Clube Dotz` que utiliza uma tabela com `bar navigator`.

O primeiro passo é importar o módulo `BarNavigatorModule` do `dharma-ui-dataset` no módulo que você for usar o componente.

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BarNavigatorModule } from 'dharma-ui-dataset';

@NgModule({
  imports: [
    CommonModule,
    BarNavigatorModule,
  ],
  declarations: [myComponent],
})
export class myModule { }
```

HTML:
```html
<div class="extract animated fadeIn">    
    <div class="row">
        <div class="col-lg-12">
            <div class="card-body">
                <dharma-ui-alert-summary></dharma-ui-alert-summary>
                <dharma-ui-alert></dharma-ui-alert>
                <table class="table-round-corner">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Descrição</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of pagedItems">
                            <td>{{item.movementDate | date: 'dd/MM/yyyy HH:mm:ss':'-3'}}</td>
                            <td>{{item.description}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-12 text-center">
                <app-bar-navigator (callNavitation)="setPage($event)" [pager]=pager></app-bar-navigator>
            </div>
        </div>
    </div>
</div>
```

Componente:
```typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ExtractView } from './models/extract-view';
import { LoaderService } from 'dharma-ui-components';
import { ClubUserService } from 'src/app/shared/services/club-user.service';
import { ExtractFilter } from './models/extract-filter';
import { PagerService } from 'dharma-ui-dataset';
import { AlertSummaryService } from 'dharma-ui-alert';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class myComponent implements OnInit {

  constructor(
    private pagerService: PagerService,
    private clubUserService: ClubUserService,
    public loaderService: LoaderService,
    private alertSumaryService: AlertSummaryService
  ) { }

  formFilter: FormGroup;
  private allItems: any[];

  extracts: ExtractView[];

  pager: any = {};
  totalItem: number;
  pagedItems: any[];
  itemsByPage = 10;
  firstPage = 1;
  currentPage = 1;

  ngOnInit() {
    this.setPage(this.firstPage);
  }

  setPage(page: number) {
    this.loaderService.show();
    const filter = new ExtractFilter(page, this.itemsByPage);
    this.clubUserService.get(filter).subscribe(view => {
      this.allItems = view.items;
      this.totalItem = view._total;
      this.pager = this.pagerService.getPager(this.totalItem, page, view._pageSize);
      this.pagedItems = this.allItems;
      this.loaderService.hide();
    }, error => {
      this.alertSumaryService.danger('Erro', error);
      this.loaderService.hide();
    });
  }
}
```

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