Visão geral dos cabeçalhos multicolunas Blazor Grid

    O recurso Ignite UI for Blazor Multi-Column Headers no Blazor Grid permite que você agrupe colunas colocando-as sob um multi-header comum. Cada grupo de multi-colunas headers no IgbGrid pode ser uma representação de combinações entre outros grupos ou colunas. Esse recurso é particularmente útil ao lidar com grandes conjuntos de dados onde a rolagem horizontal pode ser incômoda.

    Blazor Grid Multi-Column Headers Example

    A declaração de cabeçalhos de múltiplas colunas é obtida encapsulando um conjunto de colunas em um componente IgbColumnGroup com informações de título IgbHeader passadas.

    <IgbGrid Data=data AllowFiltering=true>
    <IgbColumnGroup Header="Contact Information">
        <IgbColumn Field="Phone" Sortable=true Resizable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true Resizable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true Resizable=true></IgbColumn>
    </IgbColumnGroup>
</IgbGrid>

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

    <IgbGrid Data=data AllowFiltering=true>
    <IgbColumnGroup Header="General Information">
        <IgbColumn Field="CompanyName" Sortable=true Resizable=true Movable=true></IgbColumn>
        <IgbColumnGroup Header="Person Details" Movable=true>
            <IgbColumn Field="ContactName" Sortable=true Resizable=true Movable=true></IgbColumn>
            <IgbColumn Field="ContactTitle" Sortable=true Resizable=true Movable=true></IgbColumn>
        </IgbColumnGroup>
    </IgbColumnGroup>
</IgbGrid>

    Cada IgbColumnGroup suporta movimentação, fixação e ocultação.

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

    <IgbGrid Data=data AllowFiltering=true>
    <IgbColumnGroup Header="General Information" Pinned=true>
        <IgbColumn Field="CompanyName" Sortable=true Resizable=true Movable=true></IgbColumn>
    </IgbColumnGroup>
    <IgbColumn Field="Phone" Sortable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Fax" Sortable=true Resizable=true></IgbColumn>
    <IgbColumn Field="PostalCode" Sortable=true Resizable=true></IgbColumn>
</IgbGrid>

    Multi-Column Header Template

    Cada um dos grupos de colunas da grade pode ser modelado separadamente. O grupo de colunas espera RenderFragment para a propriedade HeaderTemplate. A expressão é fornecida com o objeto do grupo de colunas como um contexto.

    <IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>

@code {
    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        string value = ctx.Column.Header.ToUpper();
        return @<span>@value</span>;
    };
}

    Se você quiser reutilizar um único modelo para vários grupos de colunas, poderá definir a propriedade HeaderTemplate do grupo de colunas assim:

    <IgbColumnGroup Header="General Information" HeaderTemplate="Template">
</IgbColumnGroup>
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>

@code {
    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        string value = ctx.Column.Header.ToUpper();
        return @<span>@value</span>;
    };
}

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

    @code {
    public Dictionary<string, object> DraggableAttributes { get; set; } =
        new Dictionary<string, object>()
        {
            { "draggable", "false" }
        };

    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        return @<IgbIcon AdditionalAttributes="DraggableAttributes"  @onclick="onClick"/>;
    };
}

    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:

    <IgbGrid class="grid"></IgbGrid>

    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.