Table - Virtual Scroll

In scenarios with large data volumes, virtual scrolling technology only renders rows within the visible area, significantly improving table performance.

Vertical Virtual Scroll

Set virtual-config with enabled: true to enable virtual scroll, together with height to fix the table height. It automatically takes effect when data exceeds 100 records.

Total: 10,000 records

ID	Name	Age	Email	Address	Date

1	User 1	18	user1@example.com	City 1 · Street No. 1	2024-01-01
2	User 2	19	user2@example.com	City 2 · Street No. 2	2024-02-02
3	User 3	20	user3@example.com	City 3 · Street No. 3	2024-03-03
4	User 4	21	user4@example.com	City 4 · Street No. 4	2024-04-04
5	User 5	22	user5@example.com	City 5 · Street No. 5	2024-05-05
6	User 6	23	user6@example.com	City 6 · Street No. 6	2024-06-06
7	User 7	24	user7@example.com	City 7 · Street No. 7	2024-07-07
8	User 8	25	user8@example.com	City 8 · Street No. 8	2024-08-08
9	User 9	26	user9@example.com	City 9 · Street No. 9	2024-09-09

Vertical Virtual Scroll (10,000 records)

Custom Row Height

Set virtual-config.rowHeight to set the row height for virtual scroll, ensuring accurate scrollbar calculation. Supports fixed number or function (dynamic row height).

ID	Name	Content	Status

1	User 1	This is a long piece of content used to test different row height scenarios.	In Progress
2	User 2	Short content	Completed
3	User 3	This is a medium length Content Description.	Pending Review
4	User 4	This is a long piece of content used to test different row height scenarios.	In Progress
5	User 5	Short content	Completed
6	User 6	This is a medium length Content Description.	Pending Review
7	User 7	This is a long piece of content used to test different row height scenarios.	In Progress
8	User 8	Short content	Completed
9	User 9	This is a medium length Content Description.	Pending Review

Custom Row Height

Frozen Columns + Virtual Scroll

Virtual scroll can work together with fixed columns (fixed), ensuring key columns on both sides are always visible.

ID	Name	Department	Position	Salary	City	Phone	Actions

1	User 1	Engineering	Engineer	8000	Beijing	13800000000	View
2	User 2	Product	Manager	9000	Shanghai	13800000001	View
3	User 3	Design	Designer	10000	Guangzhou	13800000002	View
4	User 4	Operations	Operations	11000	Shenzhen	13800000003	View
5	User 5	Marketing	Marketing	12000	Hangzhou	13800000004	View
6	User 6	Engineering	Engineer	13000	Beijing	13800000005	View
7	User 7	Product	Manager	14000	Shanghai	13800000006	View
8	User 8	Design	Designer	15000	Guangzhou	13800000007	View
9	User 9	Operations	Operations	16000	Shenzhen	13800000008	View

Fixed Columns + Virtual Scroll

Sort & Filter

Virtual scroll is fully compatible with sorting and filtering. Sorting and filtering are done in memory, virtual scroll is only responsible for rendering optimization.

Total: 8,000 records (Supports sorting and filtering)

ID	Name	Age	Department	Rating

1	Staff 1	20	Engineering	72
2	Staff 2	21	Product	87
3	Staff 3	22	Design	100
4	Staff 4	23	Operations	68
5	Staff 5	24	Engineering	62
6	Staff 6	25	Product	66
7	Staff 7	26	Design	91
8	Staff 8	27	Operations	63
9	Staff 9	28	Engineering	81

Sort + Filter + Virtual Scroll

With Grouped Header

Virtual scroll can work with multi-level headers (children) to support large data rendering with grouped headers.

Basic Info			Address Info
ID	Name	Age	Province	City	Detail Address	Zip

1	User 1	20	Beijing	Chaoyang	Street No. 1	100000
2	User 2	21	Shanghai	Pudong	Street No. 2	100001
3	User 3	22	Guangdong	Tianhe	Street No. 3	100002
4	User 4	23	Zhejiang	Xihu	Street No. 4	100003
5	User 5	24	Jiangsu	Gulou District	Street No. 5	100004
6	User 6	25	Beijing	Chaoyang	Street No. 6	100005
7	User 7	26	Shanghai	Pudong	Street No. 7	100006
8	User 8	27	Guangdong	Tianhe	Street No. 8	100007
9	User 9	28	Zhejiang	Xihu	Street No. 9	100008

Group Header + Virtual Scroll

Million-Row Data

With virtual scroll, even million-level data volume can maintain smooth scrolling experience.

Click the button to generate million-level data for virtual scroll testing

Million-Level Data

API

VirtualConfig

Passed through virtual-config property.

Property	Description	Type	Default
enabled	Enable virtual scroll	boolean	false
rowHeight	Row height (fixed or function)	number | ((row, rowIndex) => number)	48
buffer	Buffer rows (extra rows rendered above/below)	number	5
overscan	Overscan rows	number	3
columnVirtual	Enable column virtualization	boolean	false
columnBuffer	Column buffer count	number	3

Methods (Called via ref)

Method	Description	Parameters
scrollTo	Scroll to position	({ top?, left?, row?, rowIndex? })
refresh	Refresh virtual scroll (call after data changes)	—
doLayout	Recalculate table layout	—

Notes

1. Must set height: Virtual scroll requires a fixed container height to calculate the visible area.
2. Must set row-key: Virtual scroll relies on unique row identifiers for rendering tracking.
3. rowHeight must be accurate: Virtual scroll calculates scroll position and visible range based on row height; inaccurate settings may cause scrollbar jumping.
4. Data volume threshold: Virtual rendering is only enabled when data exceeds 100 records by default; normal rendering when less than 100.
5. Compatibility: Virtual scroll is fully compatible with sorting, filtering, fixed columns, grouped headers, and other features.