Pinning
Pin columns left and right together with pinned top and bottom row bands.
All four pin zones in one grid: Name is pinned left, Score is pinned right, an averages row is
pinned to the top band, and a totals row is pinned to the bottom band via the
data-grid-pinned-rows add-on.
Scroll the grid both ways: Name and Score stay pinned to their column bands while the middle columns scroll underneath, and the Average/Total rows stay pinned to their row bands while the data rows scroll underneath.
Silent Tiger
user0@example.com
63
Viewer
2023-07-05
Sales
Remote
4
Quick Lion
user1@example.com
67
Viewer
2021-04-03
Sales
Onsite
89
Swift Wolf
user2@example.com
40
Manager
2020-10-27
Engineering
Remote
80
Eager Lion
user3@example.com
50
User
2022-10-08
Engineering
Onsite
51
Eager Tiger
user4@example.com
45
Viewer
2024-10-07
Sales
Onsite
83
Silent Wolf
user5@example.com
24
User
2020-06-01
Engineering
Onsite
15
Swift Lion
user6@example.com
34
Viewer
2022-10-18
Engineering
Remote
62
Eager Lion
user7@example.com
21
Manager
2021-10-07
Sales
Remote
42
Eager Eagle
user8@example.com
25
Editor
2024-06-11
Sales
Onsite
35
Bold Tiger
user9@example.com
19
Editor
2024-03-20
Sales
Remote
52
Bold Bear
user10@example.com
42
User
2020-04-16
Engineering
Remote
28
Swift Wolf
user11@example.com
47
Manager
2022-08-04
Sales
Onsite
9
Swift Bear
user12@example.com
41
Viewer
2024-05-04
Sales
Onsite
45
Eager Wolf
user13@example.com
35
Editor
2020-02-16
Sales
Remote
44
Swift Eagle
user14@example.com
65
Viewer
2023-07-13
Sales
Onsite
51
Quick Lion
user15@example.com
22
Manager
2023-03-20
Engineering
Remote
28
Bold Wolf
user16@example.com
30
Editor
2023-08-07
Engineering
Remote
76
Swift Eagle
user17@example.com
19
Admin
2022-03-22
Sales
Remote
26
Eager Eagle
user18@example.com
35
Manager
2020-11-03
Sales
Remote
70
Eager Bear
user19@example.com
33
Editor
2022-09-21
Sales
Onsite
67
Silent Lion
user20@example.com
48
Manager
2021-01-03
Engineering
Onsite
89
Silent Tiger
user21@example.com
62
Manager
2024-01-12
Engineering
Remote
40
Eager Tiger
user22@example.com
51
Manager
2023-08-01
Sales
Remote
82
Silent Lion
user23@example.com
26
Admin
2020-09-03
Engineering
Remote
16
Bold Eagle
user24@example.com
26
Admin
2024-09-10
Engineering
Remote
38
Bold Lion
user25@example.com
49
Viewer
2022-01-02
Sales
Onsite
3
Quick Tiger
user26@example.com
26
Viewer
2021-02-08
Engineering
Onsite
41
Bold Eagle
user27@example.com
50
Editor
2024-02-20
Engineering
Remote
10
Swift Tiger
user28@example.com
55
Editor
2023-12-02
Sales
Remote
6
Silent Lion
user29@example.com
35
Viewer
2020-04-17
Sales
Remote
42
pnpm dlx shadcn@latest add @gridcn/data-grid-pinning-all-sides-demo
pin: "left" on Name and pin: "right" on Score: pinned column bandsuseDataGridPinnedRows({ topRows, bottomRows }): an averages row on top, a totals row on the bottomuseDataGridAggregate via DataGridAggregateReporter: both bands recompute from the grid's data- 200 rows and enough columns to overflow the viewport in both directions
- The pinned Name and Score columns stay in place while you scroll the grid horizontally.
- The pinned Average and Total rows stay in place while you scroll the grid vertically.
- Where a pinned column meets a pinned row, that cell stays fixed on both axes at once.
- Each pinned band casts a soft edge shadow once real content has scrolled under it: see
scroll shadows.