Many break changes are expected until version 1.0.
To install this library, run:
$ npm install ng2-simple-table --save
From your root module:
From your root component (This is optional, it will be used to set global css classes).
All examples uses this HTML. @maxPages is optional and, if setted, it will be used as a delimiter for the number of buttons in the pagination section.
This is the most basic implementation:
There are two forms to implement sorting for a column:
/** From column definition** Add "sort: true" to a column that can be sorted. This will add a default* strategy for that column treating each value as a string.** This approach may not be used for all implementations of Ng2ST.*/...columns:Array<Column>=;....../** Using "addSortStrategy"** Add a custom sort strategy to the column.*/...
Use "addPagination(initialPage, perPage)" to implement pagination.
...let table= Ng2STFactory.createAutonomous(data, columns);table.addPagination(1, 15);/*** For REST there are two options** First: We fetch all data and it has to be paged in memory.* Second: The server supports pagination for the given url. So, we use query params.*/// First approachlet tableRest= Ng2STFactory.createREST(url, columns);tableRest.addPagintion(1, 15);//Second approach/*** @param url* @param columns* @param dataResponseParam Property of the response that holds data.* @param pageRequestParam Param to add in the query string with the page value.* @param perPageRequestParam Param to add in the query string with the perPage value* @param totalPagesResponseParam Property of the response that holds the total number* of pages for the response.** If pageRequestParam or perPageRequestParam is missing, the query string will not be modified.*/let tableRest= Ng2STFactory.createREST(url, columns, "payload", "page", "perPage", "totalPages");tableRest.addPagination(1, 15);...
For the moment filter functionality works in memory.
/*** From column definition.** This will treat the value as a string.** This approach may not be used for all implementations of Ng2ST.*/...columns:Array<Column>=;....../*** Using "addFilter"*///value= The value of the object for the given target. input= User input on the filter.;//Adds a default filter for the column with target="name"table.addFilter"name";//Adds a custom filter for the column with target="name"table.addFilter"name", customFilter;...
Add a column that has to be displayed with a custom value and not a primitive. An example of this type of column is one that has actions for each row.
Primitives are strings, numbers, boolean, etc.. Custom are buttons, links, images, etc.
For this example we will use this class that uses @Component from angular and implements Ng2STComponent.
;;/*** This class represents a link that uses FontAwesome icons.*/
.../*** Return a primitive*/columns:Array<Column>=;.../*** Return an object that uses @Component from Angular2 and implements Ng2STComponent*/...columns:Array<Column>=;.../*** customValue can return an Array. Each value will be displayed next to the other.* For example: Return an Array<Ng2STRComponent> and each element will be next to the other.*/
Set the @isOptions property on a column definition to TRUE so that column cannot be sorted or filtered.
/*** This will display a column with a link that changes route for each row.*/...columns:Array<Column>=;
Lets suppose we have this data.
We can display nested objects values using dot notation in the @target property of a column.
Using the same json from the above example. We want to display data like this:
|Product Info||Category Info|
For this, in the column definition, @subColumns need to be set.
/*** rowspan: How much rows that definition should use.* colspan: How much columns that definition should use.** Rememeber to use colspan and rowspan.*/...columns:Array<Column>=;
Filter can be set to columns that are leafs of the tree, but not on roots.
Sort strategies can be set to any column root but @addSortStrategy must be used. For example, sort by category column:
/*** First sort by id, then by name. This sort strategy is dumb, but it will suffice as an* example.*//*** Since @target "category" is an object, arg0 and arg1 are objects of that type.*/;ng2STInstance.addSortStrategy"category", sortStrategy;
Using @changeTitle(columnId: number, newTitle: string) from the Ng2ST instance:
...columns:Array<Column>=;...// When some event occurs and language is changed.// If now the language is spanish....//Sets the new title to one column.instance.changeTitle1, "Información del Producto";instance.changeTitle4, "Categoría";instance.changeTitle7, "Acciones";//Sets the new title to a set of columns.instance.changeTitle, "Código";instance.changeTitle, "Nombre";...
Ng2ST is now an interface. Implement this with your own code and pass it as parameter to the "ng2-simple-table" tag.
MIT © Alva Damián