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

$ 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

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

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:

export interface PetQuery extends IQuery {
    id: number;
    name: string;
}

How to use it

First all you must import it into your AppModule.

Typescript

@NgModule({
    imports: [
        //your imports
        Ng2DynaTableModule.forRoot()
    ]
})

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

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

create(dataOrUrl: R[]|string|RequestConstructor, query: Query = {page: 1, maxResults: 10} as Query): void

Usage examples

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

    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

    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

    anotherMethodAfterSomethingHappen() {
        this.query.repeatQuery();
    }