HTML Table column freezing and pagination with Angular 2

What’s it about

After working for a while with Angular 2 (version 7), I’ve decided to showcase a not-so-complex example, which can be very useful in some situations: how to freeze some of the left-side columns of a table, in regard to horizontal scrolling, as well as how to add pagination to a table.


A live demo for this example can be found here:

How it works

The top left control, above the table, contains a slider that allows you to specify how many of the columns from the left side of the table will be frozen. For example, selecting here a value of 2, will make it so that the first 2 columns, “Title” and “Author” are outside the horizontal scroll area of the rest of the columns.

The left side area of the table, containing the frozen columns, can also be horizontally resized. this is convenient when you need to freeze a large number of columns, but you want to see only the last ones.

The top right control allows you to control pagination. The slider lets you specify how many rows are displayed per page, and the buttons below it can be used to navigate between pages.

Each time the number of rows per page changes, the table jumps back to the first page, no matter on what page it currently was.

Getting the source code

The Git project for this example can be found here:

Details on how to use the project can be found in the of the project.





This entry was posted in Web Dev. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s