Reordenação e movimentação de colunas da grade

    The React Grid Column Moving feature in Ignite UI for React allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the React Grid, you can enable Column Moving for pinned and unpinned columns and for Multi-Column Headers as well.

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

    Visão geral

    Column moving feature is enabled on a per-grid level, meaning that the IgrGrid could have either movable or immovable columns. This is done via the moving input of the IgrGrid.

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

    API

    Além da funcionalidade de arrastar e soltar, o recurso Column Moving também fornece métodos de API para permitir mover uma coluna/reordenar colunas programaticamente:

    moveColumn- Move uma coluna antes ou depois de outra coluna (um alvo). O primeiro parâmetro é a coluna a ser movida, e o segundo parâmetro é a coluna alvo. Também aceita um terceiro parâmetro opcional Position (representando um valor DropPosition), que determina se deve colocar a coluna antes ou depois da coluna alvo.

    // 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 uma coluna para um índice visível especificado. Se o parâmetro de índice passado for inválido (for negativo ou exceder o número de colunas) ou se a coluna não tiver permissão para se mover para esse índice (se estiver dentro de outro grupo), nenhuma operação será executada.

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

    Observe que ao usar o recurso de movimentação de colunas, o evento ColumnMovingEnd será emitido se a operação for bem-sucedida. Observe também que, em comparação com a funcionalidade de arrastar e soltar, usar o recurso de movimentação de colunas não requer definir a propriedade moving como true.

    Eventos

    Há vários eventos relacionados à movimentação da coluna para fornecer um meio de tocar nas operações de arrastar e soltar das colunas. Estes são ColumnMovingStart, ColumnMoving e ColumnMovingEnd.

    You can subscribe to the ColumnMovingEnd event of the IgrGrid to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category column after the Change On Year(%) column in the following code snippet.

    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

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada definindo algumas das propriedades CSS disponíveis.

    Caso você queira alterar algumas das cores, você precisa primeiro definir uma classe para a grade:

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

    Em seguida, defina as propriedades CSS relacionadas a esta classe:

    .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

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.