React Grid 셀 병합

Ignite UI for React 그리드는 동일한 값을 가진 두 개 이상의 인접한 셀을 하나의 더 큰 셀로 결합하는 셀 병합 기능을 제공합니다. 병합은 열 내에서 세로로 적용되며 중복 값을 줄여 가독성을 향상시키는 데 도움이 됩니다. 이 기능은 기본적으로 일치하는 데이터 값에 의해 또는 사용자 지정 조건을 적용하여 셀을 병합하도록 구성할 수 있습니다.

React Grid Cell Merging Example

Enabling and Using Cell Merging

그리드의 셀 병합은 다음 두 가지 수준에서 제어됩니다.

그리드 수준 병합 모드 – 병합이 적용되는 시기를 결정합니다.
열 수준 병합 토글 – 셀을 병합할 수 있는 열을 결정합니다.

Grid Merge Mode

그리드는 열거형의 값을 허용하는 속성을 노출 cellMergeMode 합니다. GridCellMergeMode

always- 정렬 상태에 관계없이 병합 조건을 충족하는 인접한 셀을 병합합니다.
onSort - Merges adjacent cells only when the column is sorted (default value).

<IgrGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrGrid>

const cellMergeMode: GridCellMergeMode = 'always';

Column Merge Toggle

열 수준에서 병합은 속성을 merge 사용하여 활성화하거나 비활성화할 수 있습니다.

<IgrColumn field="OrderID" merge={true}></IgrColumn>
<IgrColumn field="ShipperName" merge={false}></IgrColumn>

위의 예에서:

The OrderID column will merge adjacent duplicate values.
ShipperName 열은 병합되지 않고 정상적으로 렌더링됩니다.

Combined Example

<IgrGrid data={data} cellMergeMode={cellMergeMode} autoGenerate={false}>
    <IgrColumn field="OrderID" header="Order ID" merge={true}></IgrColumn>
    <IgrColumn field="ShipperName" header="Shipper Name" merge={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Salesperson"></IgrColumn>
</IgrGrid>

const cellMergeMode: GridCellMergeMode = 'onSort';

여기서 표는 열이 정렬될 때만 병합되도록 설정되며 범주 및 제품 열이 모두 병합되도록 구성됩니다.

Custom Merge Conditions

기본 제공 always 및 onSort 모드 외에도 그리드를 사용하면 속성을 통해 셀을 병합하기 위한 사용자 지정 조건을 정의할 수 있습니다 mergeStrategy. 이 전략은 셀을 비교하는 방법과 병합된 범위를 계산하는 방법을 모두 제어합니다.

Merge Strategy Class

A custom merge strategy must implement the IgrGridMergeStrategy class:

export declare class IgrGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;
}

merge- 병합된 셀이 생성되는 방법을 정의합니다.
comparer- 두 개의 인접한 레코드를 병합해야 하는지 여부를 결정하는 조건을 정의합니다.

Extending the Default Strategy

If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in IgrDefaultMergeStrategy and override the relevant methods.

export class MyCustomStrategy extends IgrDefaultMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

Applying a Custom Strategy

정의되면 속성을 통해 그리드에 전략을 할당합니다. mergeStrategy

<IgrGrid data={data} mergeStrategy={customStrategy}>
  <IgrColumn field="ActionID" merge={true}></IgrColumn>
  <IgrColumn field="ProjectName" merge={true}></IgrColumn>
</IgrGrid>

const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy;

Feature Integration

병합된 셀의 특정 동작으로 인해 그리드의 다른 기능 중 일부와 정확히 어떻게 연결되는지 주목해야 합니다.

확장/축소: 기능(예: 마스터-디테일, 그룹화 등)이 데이터가 아닌 행을 생성하면 셀 병합이 중단되고 그룹이 분할됩니다.

Excel 내보내기: 병합된 셀은 Excel로 내보낼 때 병합된 상태로 유지됩니다.
열 고정: 열이 고정될 때 셀은 병합된 상태로 유지되고 고정된 영역에 표시됩니다.
행 고정: 셀은 포함된 영역 내에서만 병합됩니다(즉, 고정된 행의 셀은 고정된 다른 행의 셀과만 병합되는 반면, 고정되지 않은 행의 셀은 고정되지 않은 행의 셀과만 병합됩니다.
업데이트/편집: 활성화하면 병합 시퀀스가 중단되므로 단일 셀만 편집 모드에 있습니다.
행 선택: 선택한 행이 병합된 셀과 교차하는 경우 관련된 모든 병합된 셀을 선택의 일부로 표시해야 합니다.
탐색/활성화: 셀이 활성화되면 동일한 행의 병합된 모든 셀이 단일 셀이 됩니다. 여기에는 키보드 탐색을 통한 활성화도 포함됩니다.

[!NOTE] If a merged cell is clicked, the closest cell from the merge sequence will become active.

Limitations

알려진 제한 사항	설명
셀 병합은 다중 행 레이아웃과 함께 지원되지 않습니다.	둘 다 결합할 때 의미가 없는 복잡한 레이아웃에 걸쳐 있습니다. 이러한 잘못된 구성이 감지되면 경고가 발생합니다.

API References

IgrGrid

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.