Reordenação e movimentação de colunas de grade hierárquica

    O recurso React Movimentação de Coluna de Grade Hierárquica no Ignite UI for React permite a reordenação rápida e fácil da coluna. Isso pode ser feito por meio da API de movimentação de colunas ou arrastando e soltando os cabeçalhos em outra posição por meio de gestos de mouse ou toque. Na React Grade hierárquica, você pode habilitar a Movimentação de colunas para colunas fixadas e não fixadas e também para cabeçalhos de várias colunas.

    [!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 IgrHierarchicalGrid 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 Hierarchical Grid Column Moving Overview Example

    Visão geral

    O recurso de movimentação de colunas é ativado em nível de grade, o que significa que podemIgrHierarchicalGrid ter colunas móveis ou imóveis. Isso é feito por meio damoving entrada doIgrHierarchicalGrid.

    <IgrHierarchicalGrid moving={true}>
    ...
    <IgrRowIsland moving={true}></IgrRowIsland>
</IgrHierarchicalGrid>

    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âmetroPosition opcional (representando umDropPosition valor), que determina se colocar a coluna antes ou depois da coluna de destino.

    // 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 (negativo ou exceder o número de colunas), ou se a coluna não puder se mover para esse índice (se estiver dentro de outro grupo), nenhuma operação é realizada.

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

    Note que, ao usar o recurso de movimentação de coluna, oColumnMovingEnd evento será emitido se a operação for bem-sucedida. Também note que, em comparação com a funcionalidade de arrastar e soltar, usar o recurso de movimento de coluna não exige definir amoving propriedade como true.

    Eventos

    Existem vários eventos relacionados ao movimento da coluna para fornecer um meio de acessar as operações de arrastar e soltar das colunas. Estes sãoColumnMovingStart,ColumnMoving eColumnMovingEnd.

    Você pode assinar oColumnMovingEnd evento de paraIgrHierarchicalGrid implementar alguma lógica personalizada quando uma coluna for colocada em uma nova posição. Por exemplo, você pode cancelar a eliminação da coluna Categoria após a coluna Alteração do Ano(%) no trecho de código a seguir.

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

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

    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:

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

    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.