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();
}