Server-driven datagrid

When dealing with large amounts of data or heavy processing, a datagrid often has access the currently displayed data only, requesting only the necessary pieces from the server. This is a very common case that we fully support.

We expose events and hooks on all parts of the datagrid to make sure you can trigger any requests you need based on precise user actions. But an important thing to note is that when the server does handle pagination, it needs to also deal with sorting and filtering, because all three are tightly coupled. In light of this, we decided to expose a single global output (clrDgRefresh) that emits the current "state" of the datagrid whenever it changes due to a user action or an external one. This state has the following format:

It contains all the information you need to send to the server in order to get the slice of data currently displayed. It even contains redundant information ( page.to and page.size for instance), to make sure you have access to the most practical for you without extra processing.

One important thing to note is that since you don't have all the data available at once, you cannot use the smart iterator *clrDgItems: it would sort, filter and paginate a subset of the data that has already gone through all that. So all you need to do is to go back to a simple *ngFor, which we support.

Finally, since server calls are involved, we need some way of notifying the user that his action has been acknowledged and that we are currently working on it. To this effect, we provide an input [clrDgLoading] that you can use to display the datagrid in a loading state, while fetching data.

Here is an example showcasing all this with a fake server latency of 500ms. It also demonstrates how to adapt the state we emit when it does not match exactly your server's API: in this example, the filters are re-formatted from an array to a map.

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{total}} users