그리드 열 재정렬 및 이동

    Ignite UI for React의 React 그리드 열 이동 기능을 사용하면 빠르고 쉽게 열 순서를 변경할 수 있습니다. 이는 열 이동 API를 통해 수행하거나 마우스 또는 터치 제스처를 통해 헤더를 다른 위치로 끌어서 놓아 수행할 수 있습니다. React Grid에서는 고정된 열과 고정 해제된 열 및 다중 열 헤더에 대해서도 열 이동을 활성화할 수 있습니다.

    [!Note] Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.

    [!Note] If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false!

    [!Note] If the pinned area exceeds its maximum allowed width (80% of the total IgrGrid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

    function headerTemplate(ctx: IgrCellTemplateContext) {
    return (
    <>
       <IgrIcon draggable="false" onClick={onClick}></IgrIcon>
    </>
    );
}

    React Grid Column Moving Overview Example

    개요

    열 이동 기능은 그리드별 수준에서 활성화됩니다. 즉, IgrGrid 이동 가능하거나 움직일 수 없는 열을 가질 수 있습니다. 이는 IgrGrid의 moving 입력을 통해 수행됩니다.

    <IgrGrid moving="true"></IgrGrid>

    API

    끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 API 메서드도 제공합니다.

    moveColumn- 다른 열(대상) 앞이나 뒤로 열을 이동합니다. 첫 번째 매개변수는 이동할 컬럼이고, 두 번째 매개변수는 대상 컬럼입니다. 또한 대상 열 앞이나 뒤에 열을 배치할지 여부를 결정하는 선택적인 세 번째 매개 변수 Position (DropPosition 값을 나타냄)을 허용합니다.

    // Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

    move- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.

    // Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

    열 이동 기능을 사용할 때 작업이 성공하면 ColumnMovingEnd 이벤트가 발생합니다. 또한 끌어서 놓기 기능과 비교할 때 열 이동 기능을 사용하려면 moving 속성을 true로 설정할 필요가 없습니다.

    이벤트

    열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이는 ColumnMovingStart, ColumnMoving 및 ColumnMovingEnd 입니다.

    다음을 구독할 수 있습니다. ColumnMovingEnd의 이벤트 IgrGrid 열이 새 위치로 삭제될 때 일부 사용자 정의 논리를 구현합니다. 예를 들어 삭제를 취소할 수 있습니다. 범주 이후의 열 연도별 변화율(%) 다음 코드 조각의 열입니다.

    function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) {
   if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}

<IgrGrid autoGenerate="false" moving="true" data={data} columnMovingEnd={onColumnMovingEnd}>
    <IgrColumn field="Category"></IgrColumn>
    <IgrColumn field="Change On Year(%)" dataType="Number" ></IgrColumn>
</IgrGrid>

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다.

    일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

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

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    .grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}

    Demo

    API References

    Additional Resources

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