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 README.md of the project.