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

Row Merging

loading

TIP

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

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, }
}

Performance

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

Note

If the rowspan is very large (e.g. 1000 rows), the merged cell will still render all the rows it covers. Therefore, rowspan is not recommended to be very large.

This feature does not support horizontal virtual list yet.

Irregular Merging

loading