Table

Virtual scroll, pagination (client / server / cursor), bottom-anchor sizing, paginator slots.

Pagination FE (client mode, 523 rows)

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$30216.37
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$68520.49
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$94945.01
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35452.37
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$89612.54
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49746.37
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$46149.12
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$5709.26
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$43513.27
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$30798.91
Showing 1–10 of 523
…
Rows

Pagination BE (server mode, simulated API)

Last call: page=1, size=10, first=0

ID
Name
Email
Role
Dept
Status
Joined
Amount
Showing 1–10 of 523
…
Rows

Pagination cursor (id-pivot, simulated API)

Last call: cursor=null, size=20, dir=first

ID
Name
Email
Role
Dept
Status
Joined
Amount
20 Rows
Rows

bottomAnchor (auto fit to anchor)

Bấm + / − để đổi chiều cao container. Table tự co/dãn để đáy chạm element dgTableBottomAnchor; virtual scroll tính lại visibleCount theo height mới.

container height: 420px
Header trên cùng — chiếm chỗ phía trên table
ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$19976.43
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$20832.14
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$28366.75
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$61299.89
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$35174.94
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49657.75
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$39396.55
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64795.61
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$94126.08
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$18435.37
11
Bùi Khánh
khanh.bui11@dungeon.dev
Engineer
Platform
error
2022-03-03
$73101.24
12
Đoàn Lan
lan.doan12@dungeon.dev
Designer
Mobile
archived
2021-08-20
$75535.33
13
Hoàng Linh
linh.hoang13@dungeon.dev
DevOps
Web
active
2020-01-09
$19573.52
14
Đỗ Long
long.do14@dungeon.dev
Intern
Data
pending
2019-06-26
$97080.68
15
Mai Mai
mai.mai15@dungeon.dev
Lead
Infra
error
2018-11-15
$24412.22
16
Huỳnh Minh
minh.huynh16@dungeon.dev
QA
Sales
archived
2024-04-04
$36743.16
17
Hồ Nam
nam.ho17@dungeon.dev
Director
Marketing
active
2023-09-21
$32808.22
18
Trịnh Ngọc
ngoc.trinh18@dungeon.dev
Sr. Engineer
Finance
pending
2022-02-10
$63655.00
19
Phan Nhi
nhi.phan19@dungeon.dev
PM
HR
error
2021-07-27
$93394.00
20
Ngô Oanh
oanh.ngo20@dungeon.dev
Manager
Support
archived
2020-12-16
$87355.53
21
Nguyễn Phong
phong.nguyen21@dungeon.dev
Engineer
Platform
active
2019-05-05
$32508.76
22
Vũ Phương
phuong.vu22@dungeon.dev
Designer
Mobile
pending
2018-10-22
$21404.25
Footer (anchor) — table luôn dừng ở đây, cách 12px.

Paginator: text labels (i18n)

Đổi text các label qua input showingLabel, ofLabel, rowsLabel, emptyLabel.

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$30216.37
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$68520.49
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$94945.01
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35452.37
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$89612.54
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49746.37
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$46149.12
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$5709.26
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$43513.27
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$30798.91
Hiển thị 1–10 trên 523
…
Dòng

Paginator: đổi vị trí slot (pageSize → nav → info)

Đảo thứ tự thông qua slotOrder input.

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$30216.37
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$68520.49
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$94945.01
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35452.37
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$89612.54
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49746.37
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$46149.12
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$5709.26
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$43513.27
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$30798.91
Rows
…
Showing 1–10 of 523

Paginator: customize từng slot

Override slot info + nav bằng <ng-template dgPaginatorInfo> / dgPaginatorNav; slot pageSize giữ default.

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$30216.37
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$68520.49
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$94945.01
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35452.37
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$89612.54
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49746.37
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$46149.12
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$5709.26
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$43513.27
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$30798.91
📊 Trang 1 / 53 (1–10 trên 523 bản ghi)
1 / 53
Rows

Paginator: thay thế toàn bộ qua dgTablePaginator

Khi cần kiểm soát hoàn toàn (dùng button của dự án, layout khác), dùng template <ng-template dgTablePaginator> để thay thế cả paginator.

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$30216.37
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$68520.49
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$94945.01
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35452.37
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$89612.54
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49746.37
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$46149.12
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$5709.26
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$43513.27
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$30798.91
Bạn đang ở trang 1 của 53 (523 bản ghi · 10/trang)

Small dataset (no virtual scroll)

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$19976.43
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$20832.14
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$28366.75
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$61299.89
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$35174.94
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49657.75
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$39396.55
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64795.61

Virtual scroll over 10,000 rows

ID
Name
Email
Role
Dept
Status
Joined
Amount
1
#1 · Nguyễn An
an.nguyen1@dungeon.dev
Engineer
Platform
active
2018-01-01
$19976.43
2
#2 · Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$20832.14
3
#3 · Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$28366.75
4
#4 · Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$61299.89
5
#5 · Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$35174.94
6
#6 · Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$49657.75
7
#7 · Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$39396.55
8
#8 · Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64795.61
9
#9 · Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$94126.08
10
#10 · Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$18435.37
11
#11 · Bùi Khánh
khanh.bui11@dungeon.dev
Engineer
Platform
error
2022-03-03
$73101.24
12
#12 · Đoàn Lan
lan.doan12@dungeon.dev
Designer
Mobile
archived
2021-08-20
$75535.33
13
#13 · Hoàng Linh
linh.hoang13@dungeon.dev
DevOps
Web
active
2020-01-09
$19573.52
14
#14 · Đỗ Long
long.do14@dungeon.dev
Intern
Data
pending
2019-06-26
$97080.68
15
#15 · Mai Mai
mai.mai15@dungeon.dev
Lead
Infra
error
2018-11-15
$24412.22
16
#16 · Huỳnh Minh
minh.huynh16@dungeon.dev
QA
Sales
archived
2024-04-04
$36743.16
17
#17 · Hồ Nam
nam.ho17@dungeon.dev
Director
Marketing
active
2023-09-21
$32808.22
18
#18 · Trịnh Ngọc
ngoc.trinh18@dungeon.dev
Sr. Engineer
Finance
pending
2022-02-10
$63655.00
19
#19 · Phan Nhi
nhi.phan19@dungeon.dev
PM
HR
error
2021-07-27
$93394.00
20
#20 · Ngô Oanh
oanh.ngo20@dungeon.dev
Manager
Support
archived
2020-12-16
$87355.53
21
#21 · Nguyễn Phong
phong.nguyen21@dungeon.dev
Engineer
Platform
active
2019-05-05
$32508.76
22
#22 · Vũ Phương
phuong.vu22@dungeon.dev
Designer
Mobile
pending
2018-10-22
$21404.25