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
$80309.94
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$50380.89
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$70256.08
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$5178.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$44694.88
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$80108.71
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$9728.26
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64665.11
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$56850.86
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$31016.86
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
$61194.10
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$25746.62
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$50308.02
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35460.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$98805.45
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$90625.64
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$34153.69
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$38790.87
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$6147.70
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$69732.70
11
Bùi Khánh
khanh.bui11@dungeon.dev
Engineer
Platform
error
2022-03-03
$26988.39
12
Đoàn Lan
lan.doan12@dungeon.dev
Designer
Mobile
archived
2021-08-20
$20189.62
13
Hoàng Linh
linh.hoang13@dungeon.dev
DevOps
Web
active
2020-01-09
$76245.56
14
Đỗ Long
long.do14@dungeon.dev
Intern
Data
pending
2019-06-26
$69158.58
15
Mai Mai
mai.mai15@dungeon.dev
Lead
Infra
error
2018-11-15
$85948.43
16
Huỳnh Minh
minh.huynh16@dungeon.dev
QA
Sales
archived
2024-04-04
$99884.50
17
Hồ Nam
nam.ho17@dungeon.dev
Director
Marketing
active
2023-09-21
$71151.85
18
Trịnh Ngọc
ngoc.trinh18@dungeon.dev
Sr. Engineer
Finance
pending
2022-02-10
$36970.20
19
Phan Nhi
nhi.phan19@dungeon.dev
PM
HR
error
2021-07-27
$60901.00
20
Ngô Oanh
oanh.ngo20@dungeon.dev
Manager
Support
archived
2020-12-16
$74456.79
21
Nguyễn Phong
phong.nguyen21@dungeon.dev
Engineer
Platform
active
2019-05-05
$25339.42
22
Vũ Phương
phuong.vu22@dungeon.dev
Designer
Mobile
pending
2018-10-22
$88604.76
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
$80309.94
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$50380.89
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$70256.08
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$5178.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$44694.88
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$80108.71
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$9728.26
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64665.11
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$56850.86
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$31016.86
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
$80309.94
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$50380.89
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$70256.08
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$5178.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$44694.88
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$80108.71
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$9728.26
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64665.11
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$56850.86
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$31016.86
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
$80309.94
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$50380.89
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$70256.08
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$5178.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$44694.88
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$80108.71
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$9728.26
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64665.11
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$56850.86
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$31016.86
📊 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
$80309.94
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$50380.89
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$70256.08
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$5178.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$44694.88
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$80108.71
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$9728.26
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$64665.11
9
Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$56850.86
10
Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$31016.86
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
$61194.10
2
Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$25746.62
3
Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$50308.02
4
Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35460.75
5
Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$98805.45
6
Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$90625.64
7
Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$34153.69
8
Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$38790.87

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
$61194.10
2
#2 · Vũ Bình
binh.vu2@dungeon.dev
Designer
Mobile
pending
2024-06-18
$25746.62
3
#3 · Dương Châu
chau.duong3@dungeon.dev
DevOps
Web
error
2023-11-07
$50308.02
4
#4 · Trần Diệp
diep.tran4@dungeon.dev
Intern
Data
archived
2022-04-24
$35460.75
5
#5 · Võ Dũng
dung.vo5@dungeon.dev
Lead
Infra
active
2021-09-13
$98805.45
6
#6 · Lý Giang
giang.ly6@dungeon.dev
QA
Sales
pending
2020-02-02
$90625.64
7
#7 · Lê Hà
ha.le7@dungeon.dev
Director
Marketing
error
2019-07-19
$34153.69
8
#8 · Đặng Hải
hai.dang8@dungeon.dev
Sr. Engineer
Finance
archived
2018-12-08
$38790.87
9
#9 · Đào Hoàng
hoang.dao9@dungeon.dev
PM
HR
active
2024-05-25
$6147.70
10
#10 · Phạm Hùng
hung.pham10@dungeon.dev
Manager
Support
pending
2023-10-14
$69732.70
11
#11 · Bùi Khánh
khanh.bui11@dungeon.dev
Engineer
Platform
error
2022-03-03
$26988.39
12
#12 · Đoàn Lan
lan.doan12@dungeon.dev
Designer
Mobile
archived
2021-08-20
$20189.62
13
#13 · Hoàng Linh
linh.hoang13@dungeon.dev
DevOps
Web
active
2020-01-09
$76245.56
14
#14 · Đỗ Long
long.do14@dungeon.dev
Intern
Data
pending
2019-06-26
$69158.58
15
#15 · Mai Mai
mai.mai15@dungeon.dev
Lead
Infra
error
2018-11-15
$85948.43
16
#16 · Huỳnh Minh
minh.huynh16@dungeon.dev
QA
Sales
archived
2024-04-04
$99884.50
17
#17 · Hồ Nam
nam.ho17@dungeon.dev
Director
Marketing
active
2023-09-21
$71151.85
18
#18 · Trịnh Ngọc
ngoc.trinh18@dungeon.dev
Sr. Engineer
Finance
pending
2022-02-10
$36970.20
19
#19 · Phan Nhi
nhi.phan19@dungeon.dev
PM
HR
error
2021-07-27
$60901.00
20
#20 · Ngô Oanh
oanh.ngo20@dungeon.dev
Manager
Support
archived
2020-12-16
$74456.79
21
#21 · Nguyễn Phong
phong.nguyen21@dungeon.dev
Engineer
Platform
active
2019-05-05
$25339.42
22
#22 · Vũ Phương
phuong.vu22@dungeon.dev
Designer
Mobile
pending
2018-10-22
$88604.76