# @nghacks/ngmat-table-query-reflector

> Stores and retrieves mat table states (sorting, pagination) with url query params

Latest version **0.1.3** (published 2020-08-15) · 0 weekly downloads

## Install

```sh
npm install @nghacks/ngmat-table-query-reflector
pnpm add @nghacks/ngmat-table-query-reflector
yarn add @nghacks/ngmat-table-query-reflector
bun add @nghacks/ngmat-table-query-reflector
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2020-08-15 |
| First published | 2020-08-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 120.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Abdun Nahid |
| Maintainers | abdunnahid |
| Keywords | angular, material, AngularMaterial, nghacks, table, QueryParam, directive, URL, ng, ngx, ngMat |

## Links

- npm: https://www.npmjs.com/package/@nghacks/ngmat-table-query-reflector
- Repository: https://github.com/abdunnahid/nghacks
- Homepage: https://ng-hack.web.app
- Issues: https://github.com/abdunnahid/nghacks/issues
- npm.io page: https://npm.io/package/@nghacks/ngmat-table-query-reflector

## Dependencies (1)

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

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2020-08-15
- 0.1.2 — 2020-08-11
- 0.1.1 — 2020-08-11
- 0.1.0 — 2020-08-11

## README

# NgMatTableQueryReflector

Stores and retrieves mat table states (sorting, pagination) with url query params

## Demo
![Demo gif](https://github.com/abdunnahid/nghacks/blob/master/articles/mat-table-query-params/src/assets/demo.gif?raw=true)

[Live Preview](https://ng-hack.web.app/mat-table-query-reflector)

## How to use

> Install package

```bash
npm install @nghacks/ngmat-table-query-reflector
```

> Import `NgmatTableQueryReflectorModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { NgmatTableQueryReflectorModule } from '@nghacks/ngmat-table-query-reflector';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgmatTableQueryReflectorModule
  ]
})
export class ConsumerModule { }
```

> Add directive to html template

```html
<table
  mat-table
  [dataSource]="dataSource"
  matSort
  matSortActive="name"
  matSortDirection="desc"
  NgMatTableQueryReflector
>
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>No.</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  ... ...

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
```

---
_Source: https://npm.io/package/@nghacks/ngmat-table-query-reflector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._