Descripción general y configuración de la cuadrícula de datos jerárquica

La cuadrícula de datos jerárquicos Ignite UI for React se utiliza para mostrar y manipular datos tabulares jerárquicos. Vincule rápidamente sus datos con muy poco código o use una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilo Excel, ordenación, paginación, plantillas, movimiento de columnas, fijación de columnas, exportación a Excel y CSV, y más. La cuadrícula jerárquica se basa en el componente de cuadrícula plana y amplía su funcionalidad al permitir a los usuarios expandir o contraer las filas de la cuadrícula principal, revelando las cuadrículas secundarias correspondientes, cuando se necesita información más detallada.

React Hierarchical Data Grid Example

En este ejemplo de cuadrícula React, puede ver cómo los usuarios pueden visualizar conjuntos jerárquicos de datos y usar plantillas de celdas para agregar otros componentes visuales.

Getting Started with Ignite UI for React Hierarchical Grid

Dependencies

Para comenzar con la cuadrícula jerárquica React, primero debe instalar los igniteui-react paquetes and igniteui-react-grids.

npm install --save igniteui-react
npm install --save igniteui-react-grids

También debe incluir la siguiente importación para usar la cuadrícula:

import "igniteui-react-grids/grids";

También se debe hacer referencia a los estilos correspondientes. Puede elegir la opción clara u oscura para uno de los temas y, según la configuración de su proyecto, importarlo:

import 'igniteui-react-grids/grids/themes/light/bootstrap.css'

Para obtener más detalles sobre cómo personalizar la apariencia de la cuadrícula jerárquica, puede echar un vistazo a la sección de estilo.

Using the React Hierarchical Data Grid

Data Binding

​IgrHierarchicalGrid se deriva de IgrGrid y comparte la mayor parte de su funcionalidad. La principal diferencia es que permite definir múltiples niveles de jerarquía. Se configuran a través de una etiqueta independiente dentro de la definición de IgrHierarchicalGrid, denominada IgrRowIsland. El componente IgrRowIsland define la configuración de cada cuadrícula secundaria para el nivel en particular. También se admiten varias islas de filas por nivel. La cuadrícula jerárquica admite dos formas de enlazar a los datos:

Using hierarchical data

Si la aplicación carga todos los datos jerárquicos como una matriz de objetos que hacen referencia a matrices de objetos secundarios, entonces la cuadrícula jerárquica se puede configurar para leerlos y vincularlos automáticamente. A continuación se muestra un ejemplo de una fuente de datos jerárquica correctamente estructurada:

export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

Cada IgrRowIsland debe especificar la clave de la propiedad que contiene los datos secundarios.

<IgrHierarchicalGrid data={singers} autoGenerate="true">
    <IgrRowIsland childDataKey="Albums" autoGenerate="true">
        <IgrRowIsland childDataKey="Songs" autoGenerate="true">
        </IgrRowIsland>
    </IgrRowIsland>
    <IgrRowIsland childDataKey="Tours" autoGenerate="true">
    </IgrRowIsland>
</IgrHierarchicalGrid>

[!NOTE] Note that instead of data the user configures only the childDataKey that the IgrHierarchicalGrid needs to read to set the data automatically.

Using Load-On-Demand

La mayoría de las aplicaciones están diseñadas para cargar la menor cantidad de datos posible inicialmente, lo que se traduce en tiempos de carga más rápidos. En tales casos, IgrHierarchicalGrid se puede configurar para permitir que los servicios creados por el usuario lo alimenten con datos a petición.

import { getData } from "./remoteService";

export default function Sample() {
  const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);

  function gridCreated(
    rowIsland: IgrRowIsland,
    event: IgrGridCreatedEventArgs,
    _parentKey: string
  ) {
    const context = event.detail;
    const dataState = {
      key: rowIsland.childDataKey,
      parentID: context.parentID,
      parentKey: _parentKey,
      rootLevel: false,
    };
    context.grid.isLoading = true;
    getData(dataState).then((data: any[]) => {
      context.grid.isLoading = false;
      context.grid.data = data;
      context.grid.markForCheck();
    });
  }

  useEffect(() => {
    hierarchicalGrid.current.isLoading = true;
    getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
      (data: any) => {
        hierarchicalGrid.current.isLoading = false;
        hierarchicalGrid.current.data = data;
        hierarchicalGrid.current.markForCheck();
      }
    );
  }, []);

  return (
    <IgrHierarchicalGrid
        ref={hierarchicalGrid}
        primaryKey="customerId"
        autoGenerate="true"
        height="600px"
        width="100%"
    >
        <IgrRowIsland
        childDataKey="Orders"
        primaryKey="orderId"
        autoGenerate="true"
        gridCreated={(
            rowIsland: IgrRowIsland,
            e: IgrGridCreatedEventArgs
        ) => gridCreated(rowIsland, e, "Customers")}
        >
        <IgrRowIsland
            childDataKey="Details"
            primaryKey="productId"
            autoGenerate="true"
            gridCreated={(
            rowIsland: IgrRowIsland,
            e: IgrGridCreatedEventArgs
            ) => gridCreated(rowIsland, e, "Orders")}
        ></IgrRowIsland>
        </IgrRowIsland>
    </IgrHierarchicalGrid>
  );
}

const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${URL}${qS}`;
}

Hide/Show row expand indicators

Si tiene una manera de proporcionar información sobre si una fila tiene elementos secundarios antes de expandirse, puede usar la HasChildrenKey propiedad input. De esta manera, podría proporcionar una propiedad booleana de los objetos de datos que indique si se debe mostrar un indicador de expansión.

<IgrHierarchicalGrid data={data} primaryKey="ID" hasChildrenKey="hasChildren">
</IgrHierarchicalGrid>

Tenga en cuenta que no es necesario establecer la HasChildrenKey propiedad. En caso de que no lo proporcione, se mostrarán indicadores de expansión para cada fila.

Además, si desea mostrar/ocultar el indicador de encabezado, expandir/contraer todo, puede usar la ShowExpandAll propiedad. Esta interfaz de usuario está deshabilitada de forma predeterminada por motivos de rendimiento y no se recomienda habilitarla en cuadrículas con datos grandes o cuadrículas con carga a petición.

Características

Las características de cuadrícula se pueden habilitar y configurar a través del marcado IgrRowIsland: se aplican a cada cuadrícula que se crea para ella. Al cambiar las opciones en tiempo de ejecución a través de la instancia de la isla de filas, se cambian para cada una de las cuadrículas que ha generado.

<IgrHierarchicalGrid data={localData} autoGenerate="false"
    allowFiltering='true' height="600px" width="800px">
    <IgrColumn field="ID" pinned="true" filterable="true"></IgrColumn>
    <IgrColumnGroup header="Information">
        <IgrColumn field="ChildLevels"></IgrColumn>
        <IgrColumn field="ProductName" hasSummary="true"></IgrColumn>
    </IgrColumnGroup>
    <IgrRowIsland childDataKey="childData" autoGenerate="false" rowSelection="multiple">
        <IgrColumn field="ID" hasSummary="true" dataType="number"></IgrColumn>
        <IgrColumnGroup header="Information2">
            <IgrColumn field="ChildLevels"></IgrColumn>
            <IgrColumn field="ProductName"></IgrColumn>
        </IgrColumnGroup>
        <IgrPaginator perPage={5}></IgrPaginator>
    <IgrRowIsland>
    <IgrPaginator></IgrPaginator>
</IgrHierarchicalGrid>

Las siguientes características de grid funcionan a nivel de grid, lo que significa que cada instancia de grid las administra independientemente del resto de grids:

• Clasificación
• Filtración
• Paginación
• Encabezados de varias columnas
• Ocultación
• Fijar
• Moviente
• resúmenes
• Buscar

Las funciones de selección y navegación funcionan globalmente para toda la cuadrícula jerárquica

• Selección La selección no permite que las celdas seleccionadas estén presentes en dos cuadrículas secundarias diferentes a la vez.
• Navegación Al navegar hacia arriba/abajo, si el elemento siguiente/anterior es una cuadrícula secundaria, la navegación continuará en la cuadrícula secundaria relacionada, marcando la celda relacionada como seleccionada y enfocada. Si la celda secundaria está fuera del puerto de visualización visible actual, se desplaza a la vista para que la celda seleccionada siempre esté visible.

Collapse All Button

La cuadrícula jerárquica permite a los usuarios contraer convenientemente todas las filas actualmente expandidas presionando el botón "Contraer todo" en la esquina superior izquierda. Además, cada cuadrícula secundaria que contiene otras cuadrículas y es una cuadrícula jerárquica en sí misma, también tiene un botón de este tipo; de esta manera, el usuario puede contraer solo una cuadrícula determinada en la jerarquía:

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 el fondo del encabezado y el color del texto, primero debe configurar una clase para la cuadrícula:

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

Luego configure las propiedades CSS--header-background y--header-text-color para esa clase:

.grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

Demo

Known Limitations

Limitación	Descripción
Agrupar por	La función Agrupar por no es compatible con la cuadrícula jerárquica.

API References

• IgrHierarchicalGrid
• IgrRowIsland
• IgrGrid
• IgrColumn
• Cell

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

• Ignite UI for React Forums
• Ignite UI for React GitHub