Row Height

• props.rowHeight sets the body row height, default is 28px.
• props.headerRowHeight sets the header row height, default is 28px.
• props.footerRowHeight sets the footer row height, default is 28px.

TIP

These row-height options and props.expandConfig.height can be changed dynamically. After the change the component recalculates the visible row count and the scroll height automatically, no need to call initVirtualScroll manually.

Footer rows stick to the bottom of the scroll area (sticky) and are not counted in the virtual scroll total height.

Example

The following sets the header row height to 50px and the body row height to 40px.

<template>
    <StkTable row-height="40" header-row-height="50"></StkTable>
</template>

INFO

In normal (non-virtual list) mode, if content exceeds the row height, it will expand the row height.

In virtual list mode, the row height is always the set value.

loading

When virtual list is enabled, scrolling may cause column width changes, which is due to not setting column widths.

Flexible Row Height

First, the height of the <StkTable> component must be sufficient. You can place it in a flexible layout like flex or grid, or set its height to 100%, so that its parent element determines its height instead of being expanded by child elements.

Second, set the flex of .stk-table .stk-table-scroll-container to 1

As follows

:deep(.stk-table .stk-table-scroll-container) {
    flex: 1;
}

Drag the height controller below to see flexible row heights.

loading

This is useful for tables with fixed number of rows.

INFO

When the height is reduced to a certain extent, you can see that the minimum height is still determined by the content in the table (min-content).