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
298.647
1773
7
6
Lanthanide
120 u
[Rn] 1s2
Solid
2
Element 2
E2
22.4483
1810
9
3
Actinide
258 u
[Rn] 2s2
Liquid
3
Element 3
E3
44.6266
1735
7
5
Lanthanide
56 u
[Rn] 3s2
Gas
4
Element 4
E4
68.926
1896
9
1
Metalloid
33 u
[Rn] 4s2
Liquid
5
Element 5
E5
193.5466
1732
14
4
Alkali metal
245 u
[Rn] 5s2
Gas
6
Element 6
E6
7.3018
1917
6
4
Metalloid
135 u
[Rn] 6s2
Gas
7
Element 7
E7
135.7964
1772
18
2
Non-metal
85 u
[Rn] 7s2
Gas
8
Element 8
E8
111.8361
1963
11
5
Non-metal
117 u
[Rn] 8s2
Gas
9
Element 9
E9
42.0987
1970
15
5
Halogen
129 u
[Rn] 9s2
Gas
10
Element 10
E10
48.9202
1912
17
6
Lanthanide
29 u
[Rn] 10s2
Liquid
Items per page:
1 – 10 of 100