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 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
269.8222
1822
9
5
Actinide
155 u
[Rn] 1s2
Gas
2
Element 2
E2
160.4837
1896
4
7
Actinide
115 u
[Rn] 2s2
Liquid
3
Element 3
E3
69.396
1960
2
3
Alkali metal
43 u
[Rn] 3s2
Liquid
4
Element 4
E4
120.9985
1742
12
3
Actinide
280 u
[Rn] 4s2
Solid
5
Element 5
E5
17.9459
1850
2
4
Noble gas
32 u
[Rn] 5s2
Gas
6
Element 6
E6
95.423
1939
11
7
Lanthanide
191 u
[Rn] 6s2
Solid
7
Element 7
E7
132.2488
1850
4
7
Non-metal
128 u
[Rn] 7s2
Solid
8
Element 8
E8
96.5686
1940
4
5
Actinide
205 u
[Rn] 8s2
Solid
9
Element 9
E9
238.0149
1897
1
5
Non-metal
136 u
[Rn] 9s2
Gas
10
Element 10
E10
70.4132
1799
3
2
Lanthanide
188 u
[Rn] 10s2
Gas