Fixed Columns

Configure StkTableColumn['fixed'] = 'left' or 'right' to achieve fixed left or right columns.

New Fixed Column Interaction

Because the table uses sticky to implement fixed columns, it supports the feature of column adsorption. You can set any column as a fixed column, and it will only be fixed when the column exceeds the visible area.

Basic

Column configuration demo

const columns: StkTableColumn<any>[] = [
    { title: 'Name', dataIndex: 'name', fixed: 'left', width: 100 },
    { title: 'Age', dataIndex: 'age', width: 100 }, 
    { title: 'Address', dataIndex: 'address', width: 200 }, 
    // All columns before the Gender column must specify width
    { title: 'Gender', dataIndex: 'gender', width: 50, fixed: 'left' },
    { title: 'Email', dataIndex: 'email' },
    { title: 'Phone', dataIndex: 'phone' },
    { title: 'Company', dataIndex: 'company'  },
    { title: 'Operation', dataIndex: 'operation', fixed: 'right', width: 100 },
];

WARNING

To calculate the adsorption position of fixed columns using column widths, all columns before the fixed left column must specify widths.

As in the table above, all columns before the Gender column must have widths set. The same applies to fixed right columns.

Right fixed column behaving "abnormally"?

Fixed right columns are normally declared at the end of columns. In that case they always stay fixed, regardless of column width configuration.

However, if you need the sticking effect (columns sticking only once they exceed the visible area, plus the fixed column shadow), you must specify widths for all columns. The sticking position is computed by accumulating each column's width, so when a middle column (such as the url column below) has no width, the computed result does not match the actual rendered width and the sticking timing becomes abnormal.

const columns: StkTableColumn<any>[] = [
    { title: 'Name', dataIndex: 'name', width: 100 },
    { title: 'Stream URL', dataIndex: 'url' }, // ❌ No width, sticking calculation becomes inaccurate
    { title: 'Operation', dataIndex: '_action', fixed: 'right', width: 150 },
];

loading

You can see that when scrolling horizontally, the Gender column automatically adsorbs to the left.

TIP

If you want to place all fixed left columns at the far left, put them at the beginning of the columns array. Similarly, put all fixed right columns at the end of the columns array.

Fixed Column Shadow

By default, fixed columns have no shadow effect. If you want a shadow effect, you can set the fixedColShadow property to true.

<StkTable fixedColShadow></StkTable>

Virtual List Column Fixing

loading

WARNING

When props.virtualX (horizontal virtual list) is set, columns without specified widths will be forced to 100px