Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Data View Pinning Pagination

The NgStarter Angular Data View pinning and pagination example shows how pinned columns work together with paginated Angular data grids. Use it for wide datasets where users need stable identifiers or actions while moving through pages.

API used in this example: pinned, pinAlign, withPagination, pageSize, and pageIndex.

Position
Name
Symbol
Weight
Discovery Year
Group
Period
Category
Atomic Mass
Electron Configuration
State
1
Element 1
E1
80.3588
1943
17
1
Transition metal
259 u
[Rn] 1s2
Solid
2
Element 2
E2
274.7031
1900
2
4
Non-metal
67 u
[Rn] 2s2
Liquid
3
Element 3
E3
264.4352
1866
9
2
Post-transition metal
195 u
[Rn] 3s2
Liquid
4
Element 4
E4
65.2842
1930
6
7
Alkaline earth metal
104 u
[Rn] 4s2
Solid
5
Element 5
E5
262.07
1981
2
6
Post-transition metal
284 u
[Rn] 5s2
Liquid
6
Element 6
E6
175.0441
1778
2
5
Non-metal
256 u
[Rn] 6s2
Gas
7
Element 7
E7
46.7186
1779
3
1
Noble gas
300 u
[Rn] 7s2
Liquid
8
Element 8
E8
50.0395
1944
12
3
Metalloid
109 u
[Rn] 8s2
Solid
9
Element 9
E9
143.244
2014
12
5
Noble gas
91 u
[Rn] 9s2
Gas
10
Element 10
E10
158.3533
2015
3
6
Alkaline earth metal
109 u
[Rn] 10s2
Gas
Items per page:
1 – 10 of 100