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 Column Pinning

The NgStarter Angular Data View column pinning example shows how to keep important Angular grid columns visible during horizontal scrolling. Use it for action columns, names, IDs, statuses, totals, and fields that must stay anchored in wide admin tables.

API used in this example: pinned, pinAlign, width, and Data View pinned column state.

Position
Name
Symbol
Weight
Discovery Year
Group
Period
Category
Atomic Mass
Electron Configuration
State
1
Element 1
E1
170.5753
1751
10
3
Halogen
110 u
[Rn] 1s2
Solid
2
Element 2
E2
149.1706
2015
13
4
Post-transition metal
285 u
[Rn] 2s2
Liquid
3
Element 3
E3
127.0814
1927
8
2
Halogen
85 u
[Rn] 3s2
Solid
4
Element 4
E4
268.6982
1899
6
5
Non-metal
145 u
[Rn] 4s2
Gas
5
Element 5
E5
97.0159
1850
10
5
Noble gas
24 u
[Rn] 5s2
Solid
6
Element 6
E6
61.011
1894
18
5
Post-transition metal
7 u
[Rn] 6s2
Liquid
7
Element 7
E7
86.5922
1975
11
7
Noble gas
215 u
[Rn] 7s2
Solid
8
Element 8
E8
181.0837
1733
11
6
Metalloid
266 u
[Rn] 8s2
Gas
9
Element 9
E9
237.1196
1824
8
1
Metalloid
174 u
[Rn] 9s2
Solid
10
Element 10
E10
195.2416
1769
6
2
Alkali metal
279 u
[Rn] 10s2
Solid