Skip to content

セルマージ

StkTableColumns['mergeCells'] 関数を通じてマージするセルを指定します。

ts
function mergeCells(data: {
    row: any,
    col: StkTableColumn<any>,
    rowIndex: number,
    colIndex: number
}): {
    /** マージする列数 */
    colspan:number, 
    /** マージする行数 */
    rowspan:number
}

{ colspan: number, rowspan: number } を返してマージするセル数を示し、colspan は列用、rowspan は行用です。

列マージ

loading

列マージ仮想リスト ^1.1.0

loading

TIP

横方向仮想リストモードでは、マージセル(colspan)のアンカー列が可視エリア外にスクロールアウトした場合、可視列範囲を自動的に拡張し、マージセルの完全なレンダリングを保証します。

行マージ

loading

TIP

テーブルデータが変更されると、mergeCells 関数が再度呼び出されて再計算されます。

仮想リストでの行マージ

シンプルマージ

loading

コードでは、行の rowspan フィールドをマージ数として使用するように mergeCells 関数が定義されています。

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

これにより、mergeCells 関数で追加の判断をせず、データに直接マージ数を定義できます。

ts
{
    id: '1-1-1', continent: 'アジア', country: '日本', province: '東京',
    rowspan: { continent: 12, country: 6, }
}

パフォーマンス

仮想リストモードでは、すべてのマージセル(mergeCells関数)が走査されるため、パフォーマンスにある程度の影響を与える可能性があります。

注意

rowspanが非常に大きい場合(例如:1000行)、マージセルはそれでもカバーするすべての行をレンダリングしますTherefore, rowspan is not recommended to be very large.

不規則マージ

loading

行・列マージ ^1.1.0

行マージ(rowspan)と列マージ(colspan)は同時に使用でき、virtualvirtual-x の仮想スクロールにも対応しています。

loading

MITライセンスの下で公開されています