Reordenación y movimiento de columnas de cuadrícula

    La función de movimiento de columnas de React Grid en Ignite UI for React permite un reordenamiento rápido y fácil de las columnas. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados a otra posición mediante el mouse o gestos táctiles. En la cuadrícula de React, puede habilitar el movimiento de columnas para columnas ancladas y no ancladas y también para encabezados de varias columnas.

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

    Descripción general

    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

    Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona métodos API para permitir mover una columna/reordenar columnas mediante programación:

    moveColumn - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter Position (representing a DropPosition value), which determines whether to place the column before or after the target column.

    // 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 - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.

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

    Note that when using the column moving feature, the ColumnMovingEnd event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the moving property to true.

    Eventos

    There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are ColumnMovingStart, ColumnMoving and 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.

    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

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles.

    En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

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

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .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

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.