그리드 열 재정렬 및 이동

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

    [!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.

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

    React Grid Column Moving Overview Example

    개요

    열을 이동 시키는 기능은 격자별로 활성화되어 있어,IgrGrid 이동 가능한 열과 이동 불가능한 열 중 하나를 가질 수 있습니다. 이 작업은 의 입력moving을 통해IgrGrid 이루어집니다.

    <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 연산이 성공하면 이벤트가 발생한다는 점에 유의하세요. 또한 드래그 앤 드롭 기능과 비교했을 때, 컬럼 이동 기능을 사용할 때 속성을 true로 설정할moving 필요가 없다는 점도 유의하세요.

    이벤트

    열의 드래그 앤 드롭 작업을 활용할 수 있도록 열이 이동하는 것과 관련된 여러 이벤트가 있습니다. 이것들은 그리ColumnMovingStart 고ColumnMoving.ColumnMovingEnd​

    열이 새로운 위치로 이동할 때 이벤트에 구독ColumnMovingEnd​IgrGrid 하여 일부 사용자 정의 로직을 구현할 수 있습니다. 예를 들어, 다음 코드 스니펫에서 Change On Year(%)(%) 열에서 카테고리 열을 삭제하는 것을 취소할 수 있습니다.

    const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => {
   if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}

<IgrGrid autoGenerate={false} moving={true} data={data} onColumnMovingEnd={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

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