The Datagrid module defines a simple API to display any type of data that can be sorted and (or) paged.
Multiple datagrid can be displayed in the same page, each with its own page and order status.
Moreover, the module is agnostic about the type of the data, how to retrieve it and how the data needs to be displayed. In this way, it can be easily adapter for any situation.
The Datagrid API is divided in two parts: the controller part and the view part.
The Datagrid
class contains the logic to parse and manage the paging and ordering arguments.
Each Datagrid
class needs to be created with a prefix
values, in order to support multiple instance on the same page, without variable conflict.
Once the setup of the instance is done, it is necessary to invoke the fetchData
method, using an executor
callback in order to retrieve the correct data.
let datagrid = new Datagrid<Person>("d0-", req);
await datagrid.fetchData((params) =>
Person.findAndCount({ take: params.take, skip: params.skip, order: params.order })
);
The executor
callback is invoke with a param
argument, which contains the following properties:
take
: the number of elements to be displayed in the page;skip
: the number of elements to be skipped;order
: an object containing the name of the property by which the data needs to be ordered; the value of this property can be'ASC'
or'DESC'
.
This parameters can be directly used in the findAndCount
method defined by TypeORM.
The executor
callback shall return the total size of the elements (needed to create a correct pagination) and the actual elements to be visualized.
The complete instance of the Datagrid
class needs to be passed to the context of the rendered page.
The module defines some Nunjuks macros to helps the data displaying.
Moreover, the data retrieved by the Datagrid
class needs to be displayed.
A typical method to display the data is the following:
{% import resolvePath('/datagrid/utility') as dgUtils %}
<table>
<tr>
<td> {{ dgUtils.orderableHeader('Id', 'id', datagrid) }} </td>
<td> {{ dgUtils.orderableHeader('First Name', 'first_name', datagrid) }} </td>
<td> {{ dgUtils.orderableHeader('Salary', 'salary', datagrid) }} </td>
</tr>
{% for line in datagrid.data %}
<tr>
<td>{{line.id}}</td>
<td>{{line.first_name}}</td>
<td>{{line.salary}}</td>
</tr>
{% endfor %}
</table>
{{ dgUtils.pagination(datagrid) }}
By default, the orderableHeader
needs font-awesome to correctly display the order icons.