# ng2-dynatable

> Angular 2+ dynamic tables with server quering

Latest version **1.0.5** (published 2017-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-dynatable
pnpm add ng2-dynatable
yarn add ng2-dynatable
bun add ng2-dynatable
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2017-05-09 |
| First published | 2017-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jose Berrocal |
| Maintainers | jlberrocal |
| Keywords | Angular, Angular 2, ng2, dynamic tables, ajax, data tables |

## Links

- npm: https://www.npmjs.com/package/ng2-dynatable
- Repository: https://github.com/jlberrocal/ng2-dynatable
- Homepage: https://github.com/jlberrocal/ng2-dynatable#readme
- Issues: https://github.com/jlberrocal/ng2-dynatable/issues
- npm.io page: https://npm.io/package/ng2-dynatable

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2017-05-09
- 1.0.4 — 2017-04-27
- 1.0.3 — 2017-04-27
- 1.0.2 — 2017-04-27
- 1.0.1 — 2017-04-18
- 1.0.0 — 2017-04-02
- 0.3.1 — 2017-04-01
- 0.3.0 — 2017-03-31
- 0.2.12 — 2017-03-30
- 0.2.11 — 2017-03-30
- 0.2.10 — 2017-03-29
- 0.2.9 — 2017-03-29
- 0.2.8 — 2017-03-29
- 0.2.7 — 2017-03-29
- 0.2.6 — 2017-03-29
- … 13 more at https://npm.io/package/ng2-dynatable/versions

## README

# Ng2Dynatable

Ng2DynaTable is an angular 2+ component with the following features:
- Pagination.
- Sorting on headers.
- Server side data rendering.
- Api for filters .
- Cell Writers for intercept data and apply custom values.
- Components rendering in cells.
- Dynamic classes (you can set what ever you want)

## Installation

```sh
$ npm i -S ng2-dynatable
```
## Helpers
* Writer
This is a interceptor of object keys, BTW this must match with a provided key of the dyna-headers
    ```
    export interface Writer {
        [key: string]: (value: any, header: string, index: number, data:any[]) => string|number|boolean;
    }
    ```
    As you may notice it accept a key that must match with a provided key of the dyna-headers, the callback will give you some important information:
    * value: The current item of the array.
    * header: The header that is being evaluated (this is the same that the key you provided).
    * index: The index of the actual item into the array that you or the server provided.
    * data: The array with which you are working.
    Also take in mind that it should only return the primitives types of typescript(number, string, boolean)

* CellRender
This is basically the same than the writer but this will accept a component as result, BTW this component should be declared as an entryComponent.

* PaginatedResponse 
```typescript
export interface PaginatedResponse<R> {
    results: R[];
    total: number;
    page: number;
}
```
This interface is the one used for server side rendering, R is the Result Type expected.
* IQuery
```typescript
export interface IQuery {
    page: number;
    maxResults: number;
    sort?: {
        key: string;
        direction: 'ASC'|'DESC'
    }
}
```
This is the interface that you should inherit in your custom QueryInterface for example: 
```typescript
export interface PetQuery extends IQuery {
    id: number;
    name: string;
}
```

## How to use it
First all you must import it into your AppModule.

### Typescript
```typescript
@NgModule({
    imports: [
        //your imports
        Ng2DynaTableModule.forRoot()
    ]
})
```
### HTML
 ```html
 <!--Here we need to define the th elements because if not Angular will render the 
 dynaheaders next to the th which obviously is out of sense-->
 <ng2-dyna-table>
    <th>
      <dyna-header key="id" [sortable]="true">
        <!-- If you like you can use translations modules here -->
        Id
      </dyna-header>
    </th>
    <th>
      <dyna-header key="name">
        <!-- Sortable by default is false-->
        Name
      </dyna-header>
    </th>
 </ng2-dyna-table>
 ```

## Api
This component works thanks to an Api System which deals with the data source, pagination and sorting

### Initialization
First all you must inject it into the constructor
```typescript
constructor(query: QueryService<CustomQuery, ResponseType>) {}
```
in the above example CustomQuery is an instance of IQuery and ResponseType is the expected response type from server

### Available methods and properties

**emptyResult**: string = This is a custom text for empty rows. Default: There is no data to display.
**writers**: Writer = This is a interceptor which allow you to write a custom value in a given cell.
**cellRenders**: CellRender = This is a custom kind of interceptor which allow you to put a component into the cell.
**rowsPerPage**: number = This will tell to the component how many rows should be displayed at the same time. Default: 10.
**service**: This property contains the Observable source where the table is going to subscribe, you can also subscribe to this if you want to keep tracking the information.

 **create**: Here we will create the datasource for the table, you can pass an Array of type R with the information, the url where you are going to take the information or maybe you want to create a custom Request
 ```typescript
 create(dataOrUrl: R[]|string|RequestConstructor, query: Query = {page: 1, maxResults: 10} as Query): void
```

#### Usage examples
```typescript
constructor(queryService<PetQuery, Pet>)
let pets: Pet[] = [{id: 1, name: 'dog'}, {id: 2, name: 'cat'}];
query.create(pets); //here we will asume page 1 as default and maxResults as 10 which is a basicQuery
//or
query.create('https://someservice.com/api'); //here we will asume page 1 as default and maxResults as 10 which is a basicQuery
//or
let customHeaders = new Headers();
customHeaders.set('X-Access-Token', localStorage.getItem('token'));
create({
    url: 'https://someservice.com/api',
    headers: customHeaders
})
```
**addQuery**: With this method you are going to be capable of add/change params to your query object, as for example for implement a filters section

#### Usage example
```typescript
    someMethod() {
        this.query.addQuery({
            name: 'Foo'
        });
        //or
        this.query.addQuery('name', 'Foo');
    }
```

**addFilter**: This method allow you to handle the sorting of your table, so for example if for some weird reason you need to apply a sort programmatically you should use this method;

#### Usage example
```typescript
    someOtherMethod() {
        /**
        * This method receive a key that must be part of your RequestQuery Object and a value that must be 'ASC' OR 'DESC'
        **/
        this.query.addFilter('name', 'ASC');
    }
```

**repeatQuery**: As the name indicates this method will force to fetch the data again (if data is being taken from the server)
### Usage example
```typescript
    anotherMethodAfterSomethingHappen() {
        this.query.repeatQuery();
    }
```

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