Cell Merging

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

loading

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.

Row Merging

loading

TIP

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

Row Merging in Virtual List

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.

Irregular Merging

loading

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