Descripción general de los encabezados de varias columnas de cuadrícula de React

    La función Ignite UI for React Encabezados de varias columnas de React cuadrícula le permite agrupar columnas colocándolas debajo de un encabezado múltiple común. Cada grupo de encabezados de varias columnas del IgrGrid podría ser una representación de combinaciones entre otros grupos o columnas. Esta característica es especialmente útil cuando se trata de grandes conjuntos de datos en los que el desplazamiento horizontal puede ser engorroso.

    React Grid Multi-Column Headers Example

    La declaración de encabezados de varias columnas se logra envolviendo un conjunto de columnas en un columnGroup componente con header información de título pasada.

    <IgrGrid allowFiltering={true}>
    <IgrColumnGroup header="Contact Information">
        <IgrColumn sortable={true} resizable={true} field="Phone"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="Fax"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="PostalCode"></IgrColumn>
    </IgrColumnGroup>
</IgrGrid>

    Para lograr n-th el nivel de encabezados anidados, se debe seguir la declaración anterior. Entonces, columnGroup al anidar conduce al resultado deseado.

    <IgrGrid height="600px" allowFiltering={true}>
    <IgrColumnGroup header="General Information">
        <IgrColumn movable={true} sortable={true} resizable={true} field="CompanyName"></IgrColumn>
        <IgrColumnGroup movable={true} header="Person Details">
            <IgrColumn movable={true} pinned={false} sortable={true} resizable={true} field="ContactName"></IgrColumn>
            <IgrColumn movable={true} sortable={true} resizable={true} field="ContactTitle"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrGrid>

    Cada columnGroup soporte para mover, fijar y esconder.​

    [!Note] When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
    Moving 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.
    When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.

    <IgrGrid height="600px" allowFiltering={true}>
    <IgrColumnGroup movable={true} pinned={true} header="General Information">
        <IgrColumn movable={true} sortable={true} resizable={true} field="CompanyName"></IgrColumn>
    </IgrColumnGroup>
    <IgrColumn sortable={true} resizable={true} field="Phone"></IgrColumn>
    <IgrColumn sortable={true} resizable={true} field="Fax"></IgrColumn>
    <IgrColumn sortable={true} resizable={true} field="PostalCode"></IgrColumn>
</IgrGrid>

    Multi-Column Header Template

    <IgrColumnGroup header="Contact Information" headerTemplate={groupHeaderTemplate}></IgrColumnGroup>

    const groupHeaderTemplate = (e: IgrColumnTemplateContext) => {
  const column = e.column as IgrColumnGroup;
  return (
    <div>
      <span style={{ float: "left" }}>{column.header.toUpperCase()}</span>
    </div>
  );
}

    [!Note] If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

    const columnHeaderTemplate = (e: IgrColumnTemplateContext ) => {
  const column = e.column as IgrColumnGroup;
  return (
    <span onClick={onClick}>
      <IgrIcon data-draggable="false"></IgrIcon>
    </span>
  );
}

    El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.

    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-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}

    Demo

    API References

    Additional Resources

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