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

La función Grupos de columnas colapsables Ignite UI for React en React Hierarchical Grid le permite organizar y administrar múltiples niveles de columnas anidadas y grupos de columnas en IgrHierarchicalGrid agrupándolos y brindando la opción de colapsar o expandir estos grupos para mejorar la visualización y navegación de datos.

React Hierarchical Grid Collapsible Column Groups Example

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumnGroup, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import HierarchicalCustomersData from './HierarchicalCustomersData.json';

import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private grid: IgrHierarchicalGrid
    private gridRef(r: IgrHierarchicalGrid) {
        this.grid = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.gridRef = this.gridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.hierarchicalCustomersData}
                    ref={this.gridRef}
                    id="grid"
                    primaryKey="CustomerID">
                    <IgrColumnGroup
                        header="General Information"
                        collapsible={true}>
                        <IgrColumn
                            field="ContactName"
                            header="Contact Name"
                            visibleWhenCollapsed={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="ContactTitle"
                            header="Contact Title"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="CustomerID"
                            header="Customer ID"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Company"
                            header="Company Name"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumnGroup
                            header="Address Information"
                            collapsible={true}>
                            <IgrColumnGroup
                                header="Location"
                                width="250px"
                                visibleWhenCollapsed={true}>
                                <IgrColumn
                                    field="Country"
                                    header="Country"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="City"
                                    header="City"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="Address"
                                    header="Address"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="PostalCode"
                                    header="Postal Code"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                            </IgrColumnGroup>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrRowIsland
                        childDataKey="Orders"
                        autoGenerate={false}>
                        <IgrColumnGroup
                            header="Order Details"
                            collapsible={true}>
                            <IgrColumn
                                field="OrderID"
                                header="Order ID"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="EmployeeID"
                                header="Employee ID"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="OrderDate"
                                header="Order Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="RequiredDate"
                                header="Required Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="General Shipping Information"
                            collapsible={true}>
                            <IgrColumn
                                field="ShippedDate"
                                header="Shipped Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipVia"
                                header="Ship Via"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Freight"
                                header="Freight"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipName"
                                header="Ship Name"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="Shipping Location"
                            collapsible={true}>
                            <IgrColumn
                                field="ShipAddress"
                                header="Ship Address"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipCity"
                                header="Ship City"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipPostalCode"
                                header="Ship Postal Code"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipCountry"
                                header="Ship Country"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrRowIsland
                            childDataKey="OrderDetails"
                            autoGenerate={false}>
                            <IgrColumn
                                field="ProductID"
                                header="Product ID"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="UnitPrice"
                                header="Unit Price"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Quantity"
                                header="Quantity"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Discount"
                                header="Discount"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
    public get hierarchicalCustomersData(): any[] {
        return this._hierarchicalCustomersData;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Setup

Para comenzar a utilizar IgrHierarchicalGrid y la función de encabezados multicolumna colapsables, primero debe instalar Ignite UI for React escribiendo el siguiente comando:

npm install igniteui-react-grids
cmd

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 contraíble, debe establecer la Collapsible propiedad en columnGroup true.

Debe definir la propiedad visibleWhenCollapsed en al menos dos columnas secundarias. Al menos una columna debe estar visible cuando el grupo está contraído (visibleWhenCollapsed establecido en verdadero) y al menos una columna debe estar oculta cuando el grupo está expandido (visibleWhenCollapsed establecido en false); de lo contrario, la funcionalidad contraíble se deshabilitará. Si no se especifica visibleWhenCollapsed para algunas de las columnas secundarias, esta columna siempre estará visible independientemente de si el estado principal está expandido o contraído.

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>
tsx

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 contraíble es Expanded establecido en verdadero, pero puede cambiar fácilmente este comportamiento configurándolo en falso.

Expand/Collapse Indicator Template

El indicador de expansión predeterminado para el IgrHierarchicalGrid es el siguiente:

El indicador de colapso predeterminado para el IgrHierarchicalGrid es el siguiente:

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>)
}
tsx

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.