Azure table storage: pagination in Angular

How to implement true server-side pagination with Azure Functions and Angular Material

Recently in one of our projects, we were working with Azure table storage (hereafter called ATS). ATS is a NoSQL database and can be used for many purposes. We were using it as a storage for logs. There were plenty of logs and we had to retrieve them efficiently. In this article, I will show you how to make true server-side pagination and use the data in an Angular Frontend application.

Pre Requirements

You need to be familiar with:

• Azure Functions
• Azure storage, have azure storage emulator installed.
• Angular

TableStorage.Abstractions

I’ve found this great Nuget package TableStorage.Abstractions. I definitely recommend using it, because it makes communication with ATS so much easier! Check it out: https://github.com/Tazmainiandevil/TableStorage.Abstractions

Data generation

Before we start, let’s create some demo data. I will generate 100 logs via a POST call in an azure function.

After firing this POST call you should see something like this in your ATS emulator:

Pay attention to the row key. It’s a transformed date, which makes ATS save logs in descending order.

GET paginated data

Getting paginated data with TableStorage.Abstractions is as easy as this:

Calling Postman should result in something like this:

So, what are pageSize and continuationToken?

Usually, when you have a huge amount of data, you want to decrease the load from the server and the client, and therefore not return all the data at once, but in smaller chunks.

pageSize will specify how many entities per request will be returned.

continuationToken will let the frontend know if there is any data left for the next request.

Call API in Angular

We are lucky and unlucky at the same time because Angular provides MatPaginator: https://material.angular.io/components/paginator/overview
But the problem is, that MatPaginator can navigate to the specific page, while ATS supports only moving “forward” with a continuation token. So for us, there is no way to “craft” continuation token for the specific page. But I’ll show you the solution that we have come up with.

As we were already using Angular material in the project, we decided to modify the existing MatPaginator and make it work with pageSize and continuationToken.

Let’s start with a table and not connected paginator:

It will look like this (10 logs, paginator is not connected):

Now let’s remove the label for the page count (“0 of 0”), because we do not know the total number of pages. For this, we need to implement custom MatPaginatorIntl and provide an empty String.

Let’s implement “<” and “>” buttons. For this, we need to know the previous logs(we need to cache them) and the succeeding logs (we need to load them).

So, our plan is next:

• Listen on page changes.
• If it’s a new page, we need to load data from API.
• If it’s the previous page, we need to load cached data.
• If the number of records per page changes, we need to refresh the whole data and clear cached values.

Finally, update the API call and make it work with pageSize and continuationToken.

If everything is done right, you should see something like this:

As you can see “>” is enabled, because continuationToken says, that there are still records left. Let’s change to 20 entities per page and load new items.

Button “>” will be disabled as soon as we get to the last page.

Conclusion

I wanted to teach you how to work with ATS and how to use the continuation token. We have implemented server-side code with the help of azure function and the frontend side with an modified angular material paginator. The full example can be found here: https://github.com/aosyatnik/azure-table-storage-pagination-example