Visão geral dos cabeçalhos de várias colunas da grade de árvore do React

    O recurso Ignite UI for React Cabeçalhos de várias colunas em React Grade de árvore permite agrupar colunas colocando-as em um cabeçalho múltiplo comum. Cada grupo de cabeçalhos de várias colunas no IgrTreeGrid pode ser uma representação de combinações entre outros grupos ou colunas. Esse recurso é particularmente útil ao lidar com grandes conjuntos de dados em que a rolagem horizontal pode ser complicada.

    React Tree Grid Multi-Column Headers Example

    A declaração de cabeçalhos de várias colunas é obtida envolvendo um conjunto de colunas em um IgrColumnGroup componente com IgrHeader informações de título passadas.

    <IgrTreeGrid primaryKey="ID" foreignKey="ParentID">
    <IgrColumnGroup header="Contact Information">
        <IgrColumn sortable={true} resizable={true} field="Phone" dataType="string"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="Fax" dataType="string"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="PostalCode" dataType="string"></IgrColumn>
    </IgrColumnGroup>
</IgrTreeGrid>

    Para atingir n-th o nível de cabeçalhos aninhados, a declaração acima deve ser seguida. Portanto, o aninhamento IgrColumnGroup leva ao resultado desejado.

    <IgrTreeGrid primaryKey="ID" foreignKey="ParentID" moving={true}>
    <IgrColumnGroup pinned={false} header="General Information">
        <IgrColumn field="HireDate" sortable={true} resizable={true} dataType="date"></IgrColumn>
        <IgrColumnGroup header="Person Details">
            <IgrColumn field="ID" resizable={true} filterable={true} dataType="number"></IgrColumn>
            <IgrColumn field="Title" sortable={true} resizable={true} dataType="string"></IgrColumn>
            <IgrColumn field="Age" sortable={true} resizable={true} dataType="number"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrTreeGrid>

    Every IgrColumnGroup supports moving, pinning and hiding.

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

    <IgrTreeGrid primaryKey="ID" foreignKey="ParentID" moving={true}>
    <IgrColumnGroup header="Contact Information">
        <IgrColumn field="Phone" movable={true} sortable={true} resizable={true} dataType="string"></IgrColumn>
    </IgrColumnGroup>
    <IgrColumn field="Name" sortable={true} resizable={true} dataType="string"></IgrColumn>
    <IgrColumn field="Title" sortable={true} resizable={true} dataType="string"></IgrColumn>
    <IgrColumn field="Age" sortable={true} resizable={true} dataType="number"></IgrColumn>
</IgrTreeGrid>

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

    O exemplo a seguir demonstra como implementar grupos de colunas recolhíveis usando modelos de cabeçalho.

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <IgrTreeGrid className="grid"></IgrTreeGrid>

    Em seguida, defina as propriedades CSS relacionadas a esta classe:

    .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

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.