React Grid 행 고정

React Grid의 Ignite UI for React 행 고정 기능은 한두 행을 그리드의 상단이나 하단에 고정할 수 있게 해줍니다. 행 고정은 사용자가 특정 순서로 행을 고정할 수 있게 해주며, 수직으로 스크롤IgrGrid 해도 항상 보이는 특별한 영역에 중복 배치할 수 있습니다. React Grid에는 Grid 내에서 컴포넌트를IgrActionStrip 초기화함으로써 활성화되는 내장 행 고정 UI가 있습니다. 또한, Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 핀 상태를 변경할 수 있습니다.

React Grid Row Pinning Example

Row Pinning UI

내장 행 고정 UI는 컴포넌트를 추가IgrActionStrip​IgrGridPinningActions 하면 활성화됩니다. 액션 스트립은 행을 마우스로 올리면 자동으로 표시되며, 해당 행의 상태에 따라 핀 또는 핀 해제 버튼 아이콘이 표시됩니다. 고정된 행의 복사본을 스크롤하여 볼 수 있는 추가 동작도 각 고정된 행마다 표시됩니다.

<IgrGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

Row Pinning API

행 핀닝은 입력을 통해pinned​Row 제어됩니다. 고정된 행은 기본적으로 상위 위에IgrGrid 렌더링되며, 고정되지 않은 행IgrGrid의 수직 스크롤을 통해 고정되어 있습니다.

gridRef.current.getRowByIndex(0).pinned = true;

또한 ID에 따라 기록을 고정하거나 해제하는 방법이나 방법을 사용할IgrGrid​pinRow​unpinRow 수도 있습니다:

gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');

행 ID는 그리드의 주요primaryKey 키 값, 즉 레코드 인스턴스 자체에 의해 정의된다는 점에 유의하세요. 두 메서드 모두 해당 연산이 성공했는지 여부를 나타내는 불리언 값을 반환합니다. 보통 실패하는 이유는 행이 이미 원하는 상태에 있기 때문입니다.

한 줄은 마지막 고정된 줄 아래에 고정됩니다. 고정된 행의 순서를 변경하려면 이벤트에RowPinning 가입하고 이벤트 인자의 속성을 원하는 위치 인덱스로 변경InsertAtIndex 하면 가능합니다.

const rowPinning = (event: IgrPinRowEventArgs) => {
    event.detail.insertAtIndex = 0;
}

<IgrGrid autoGenerate={true} onRowPinning={rowPinning}>
</IgrGrid>

Pinning Position

설정 옵션을 통해pinning 행 고정 위치를 변경할 수 있습니다. 핀 영역 위치를 상단 또는 하단으로 설정할 수 있습니다. 아래쪽으로 설정하면 고정되지 않은 행 다음, 그리드 하단에 렌더링됩니다. 고정되지 않은 행은 세로로 스크롤할 수 있고, 고정된 행은 하단에 고정되어 있습니다.

const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom };

<IgrGrid ref={gridRef} autoGenerate={true} pinning={pinning}>
</IgrGrid>

Custom Row Pinning UI

사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.

Via extra column with icon

액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.

const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
    const index = ctx.cell.row.index;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(index)}>📌</span>
        </>
    );
}

<IgrGrid primaryKey="ID" autoGenerate={false}>
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
</IgrGrid>

사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.

const toggleRowPin = (index: number) => {
  const grid = grid1Ref.current;
  grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}

데모

Row Pinning Limitations

• 데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
• 행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
• 그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
• 행 선택은 행 ID와 함께 완전히 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대의 경우도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: 사용 SHIFT + 클릭)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택 항목에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgrGrid className="grid"></IgrGrid>

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

데모

API References

• IgrGrid
• IgrGridRowComponent
• IgrRowType

Additional Resources

• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 크기 조정
• 선택

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

• Ignite UI for React Forums
• Ignite UI for React GitHub