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
80.7362
1791
1
3
Transition metal
5 u
[Rn] 1s2
Gas
2
Element 2
E2
128.2522
1955
2
7
Actinide
265 u
[Rn] 2s2
Gas
3
Element 3
E3
11.339
1941
10
3
Non-metal
126 u
[Rn] 3s2
Liquid
4
Element 4
E4
206.7506
1854
11
7
Noble gas
44 u
[Rn] 4s2
Solid
5
Element 5
E5
209.1825
1746
1
1
Actinide
44 u
[Rn] 5s2
Gas
6
Element 6
E6
198.8807
2007
11
3
Metalloid
114 u
[Rn] 6s2
Solid
7
Element 7
E7
71.5395
1809
10
5
Metalloid
117 u
[Rn] 7s2
Solid
8
Element 8
E8
276.0063
1830
7
2
Post-transition metal
63 u
[Rn] 8s2
Solid
9
Element 9
E9
57.7874
1940
15
5
Post-transition metal
58 u
[Rn] 9s2
Solid
10
Element 10
E10
222.1457
1723
6
5
Non-metal
140 u
[Rn] 10s2
Solid