Cell Merging ^0.8.0

Specify cells to be merged through the StkTableColumns['mergeCells'] function.

function mergeCells(data: {
    row: any,
    col: StkTableColumn<any>,
    rowIndex: number,
    colIndex: number
}): {
    /** Number of columns to merge */
    colspan:number, 
    /** Number of rows to merge */
    rowspan:number
}

Return { colspan: number, rowspan: number } to indicate the number of cells to merge, colspan for columns and rowspan for rows.

Column Merging

loading

Column Merging in Virtual List ^1.1.0

Simple Merging

loading

In the code, the mergeCells function is defined to use the colspan field in a row as the merge count.

mergeCells: ({ row }) => {
    return row.colspan ? { colspan: row.colspan } : void 0;
}

TIP

In horizontal virtual list mode, when the anchor column of a merged cell (colspan) scrolls out of the viewport, the visible column range is automatically expanded so that the merged cell is fully rendered.

Irregular Merging

loading

Huge colspan

When colspan is very large (e.g. merging 150 columns), horizontal virtual scrolling still works correctly: while the merged range overlaps the viewport, the visible column range is expanded to the whole merged range so that the merged cell is fully rendered; scrolling outside the merged range restores normal rendering.

loading

Row Merging

loading

TIP

If the table data changes, the mergeCells function will be called again to recalculate.

Note: If you mutate row fields in place (the row object reference stays the same, without passing a new dataSource) and mergeCells depends on these fields, call the instance method clearMergeCellsCache after the mutation to manually invalidate the merge result cache.

Row Merging in Virtual List ^0.8.4

Simple Merging

loading

In the code, the mergeCells function is defined to use the rowspan field in a row as the merge count.

function mergeCells({ row, col }: { row: any, col: StkTableColumn<any> }) {
    if (!row.rowspan) return;
    return { rowspan: row.rowspan[col.dataIndex] || 1 };
}

This allows you to directly define merge counts in the data without additional judgment in the mergeCells function.

{
    id: '1-1-1', continent: 'Asia', country: 'China', province: 'Beijing',
    rowspan: { continent: 12, country: 6, }
}

mergeCells Performance

In virtual list mode, all merged cells (mergeCells function) will be traversed, which may have a certain impact on performance.

Irregular Merging

loading

Huge Rowspan

When rowspan is very large (e.g. 1000~2000 rows), the virtual list still renders all rows covered by the merged cell, which may cause performance degradation. The following example demonstrates this extreme scenario.

loading

Performance Optimization

If you have a very large rowspan or colspan, consider using regular cells + hidden borders to simulate the merged cell effect.

Row and Column Merging ^1.1.0

Row merging (rowspan) and column merging (colspan) can be used together, and are compatible with virtual and virtual-x virtual scrolling.

loading

Realtime Merge Cells

If you need to dynamically merge/split cells through user interaction (area selection + context menu), refer to Realtime Merge Cells.