Descripción general de los grupos de columnas colapsables de la cuadrícula jerárquica React

    The Ignite UI for React Collapsible Column Groups feature in React Hierarchical Grid allows you to organize and manage multiple levels of nested columns and column groups in the IgrHierarchicalGrid by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.

    React Hierarchical Grid Collapsible Column Groups Example

    Setup

    To get started with the IgrHierarchicalGrid and the Collapsible multi-column headers feature, first you need to install Ignite UI for React by typing the following command:

    npm install igniteui-react-grids

    Para obtener una introducción completa al Ignite UI for React, lea el tema de introducción.

    Además, le recomendamos encarecidamente que eche un vistazo breve al tema de encabezados de varias columnas para ver información más detallada sobre cómo configurar los grupos de columnas en su cuadrícula.

    Usage

    Los grupos de columnas plegables son parte de la función de encabezados de varias columnas que proporciona una manera de contraer/expandir un grupo de columnas a un conjunto más pequeño de datos. Cuando se contrae un grupo de columnas, se mostrará un subconjunto de columnas al usuario final y las otras columnas secundarias del grupo se ocultarán. Cada columna contraída/expandida se puede vincular a la fuente de datos de la cuadrícula, o puede no vincularse y, por lo tanto, calcularse.

    Para definir un grupo de columnas como colapsable, necesitas establecer lacollapsible propiedad en elcolumnGroup como verdadero.

    Necesitas definir la propiedadvisibleWhenCollapsed al menos a dos columnas hijas. Al menos una columna debe ser visible cuando el grupo se colapsa (visibleWhenCollapsedse pone en verdadero) y al menos una columna debe ocultarse cuando el grupo se expande (visibleWhenCollapsedse configura a),false de lo contrario la funcionalidad plegable se desactivará. SivisibleWhenCollapsed no se especifica para algunas de las columnas hijas, entonces esta columna siempre será visible independientemente de si el estado padre está expandido o colapsado.

    Veamos el marcado a continuación:

    <IgrColumnGroup collapsible={true} header="Customer Information">
    <IgrColumn field="CustomerName" header="Customer Name" visibleWhenCollapsed={true}>
    </IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumn field="CustomerFirstName" header="First Name" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumn field="CustomerLastName" header="Last Name" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumnGroup header="Customer Address">
        <IgrColumn field="CustomerAddress"  header="Full Address" width="250px" visibleWhenCollapsed={true}>
        </IgrColumn>
        <IgrColumn field="Address" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn  field="City" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn field="Country" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn field="PostalCode" header="Postal Code" visibleWhenCollapsed={false}>
        </IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>

    En resumen, cada columna secundaria tiene tres estados:

    • Puede estar siempre visible, sin importar el estado expandido de su padre.
    • Puede ser visible cuando su padre está contraído.
    • Se puede ocultar cuando su padre está colapsado.

    El estado inicial del grupo de columnas, que se especifica como colapsable, seexpanded pone en verdadero, pero puedes cambiar fácilmente este comportamiento poniéndolo en falso.

    Expand/Collapse Indicator Template

    El indicador de expansión por defecto para elIgrHierarchicalGrid es el siguiente:

    expand_indicator

    El indicador de colapso por defecto para elIgrHierarchicalGrid es el siguiente:

    collapsed_indicator

    Además, si necesita cambiar el indicador predeterminado de expandir/contraer, proporcionamos opciones de plantillas para lograrlo.

    <IgrColumnGroup id="info" header="Customer Information" collapsible={true} collapsibleIndicatorTemplate={collapsibleIndicatorTemplate}>
    <IgrColumn field="CustomerName" header="Fullname" dataType="string" visibleWhenCollapsed={true}></IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" dataType="string" visibleWhenCollapsed={false}></IgrColumn>
    <IgrColumnGroup id="address" header="Customer Address" collapsible={true}>
        <IgrColumn field="Country" header="Country" dataType="string" sortable={true} visibleWhenCollapsed={true}></IgrColumn>
        <IgrColumn field="City" header="City" dataType="string" sortable={true} visibleWhenCollapsed={false}></IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>

const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
    return (
    <div>
        <IgrIcon iconName={ctx.column.expanded ? 'remove' : 'add'}></IgrIcon>
    </div>)
}

    Nota Tenga en cuenta que inicialmente la opción de contraer grupo tiene prioridad sobre la columna oculta. Si declaró que su columna estaba oculta usando la propiedad oculta y tiene un grupo definido donde se debe mostrar la misma columna, se mostrará la columna.

    API References

    Additional Resources

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