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 Builder
PDF Signer
PDF Viewer
Video Player
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
186.6803
1840
1
4
Post-transition metal
15 u
[Rn] 1s2
Gas
2
Element 2
E2
203.4521
1778
17
6
Metalloid
258 u
[Rn] 2s2
Liquid
3
Element 3
E3
63.2741
1935
8
2
Post-transition metal
282 u
[Rn] 3s2
Gas
4
Element 4
E4
195.6621
1930
9
5
Actinide
56 u
[Rn] 4s2
Solid
5
Element 5
E5
223.1908
1752
18
5
Halogen
160 u
[Rn] 5s2
Solid
6
Element 6
E6
41.0331
1924
18
6
Alkali metal
148 u
[Rn] 6s2
Solid
7
Element 7
E7
12.4228
1997
18
6
Metalloid
297 u
[Rn] 7s2
Solid
8
Element 8
E8
236.5277
1719
10
1
Alkali metal
114 u
[Rn] 8s2
Gas
9
Element 9
E9
184.1952
1943
9
6
Alkali metal
70 u
[Rn] 9s2
Gas
10
Element 10
E10
115.3827
1717
8
5
Halogen
9 u
[Rn] 10s2
Liquid
Items per page:
1 – 10 of 100