Auto Height Virtual List

Configuration

Property	Type	Default	Description
props.autoRowHeight	boolean | AutoRowHeightConfig<DT>	false	Whether to enable auto row height
props.rowHeight	number	--	When props.autoRowHeight is true, this represents the expected row height for calculation purposes. It no longer affects the actual row height.

AutoRowHeightConfig<DT>

type AutoRowHeightConfig<DT> = {
    /** Expected row height */
    expectedHeight?: number | ((row: DT) => number);
};

Expected Row Height

Estimated height of a row, used to calculate how many rows can fit within the current table height.

Priority

props.autoRowHeight.expectedHeight > props.rowHeight

Example

loading

If you want to control the top and bottom padding of cells, you can do so by overriding CSS variables:

.stk-table {
    --cell-padding-y: 8px;
}

Single Column List

Please refer to Virtual Single Column List - Variable Height

Pre-calculating Row Height with Pretext

When row height can be calculated from content in advance, it is recommended to use @chenglou/pretext for pre-calculation to avoid the performance overhead of measuring row height at runtime, and to prevent scrollbar jitter.

How it works

1. Enable auto-row-height and virtual
2. Use prepare and layout methods to calculate text height
3. Set actual row height via setAutoHeight(rowKey, height)

Example

loading

API

setAutoHeight(rowKey, height)

Manually set the row height for a specific row.

Parameter	Type	Description
rowKey	string | number	Unique identifier for the row, corresponding to row-key
height	number	Row height

Tips

• Must be called after data is loaded
• If row height changes, call this method again to update
• Pass null or undefined to clear the set row height and restore auto measurement