Web Components Grid Column Selection Overview

    The Web Components Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the columnSelection input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.

    Web Components Grid Column Selection Example

    The sample below demonstrates the three types of IgcGridComponent's column selection behavior. Use the column selection dropdown below to enable each of the available selection modes.

    * As colunas Título do contato, Cidade e Endereço estão com a seleção de coluna desabilitada.

    Basic Usage

    The column selection feature can be enabled through the columnSelection input, which takes GridSelectionMode values.

    Interações

    The default selection mode is None. If set to Single or Multiple, all of the presented columns will be selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

    [!Note] The Multi Column Headers feature does not reflect on the selectable input. The ColumnGroupComponent is selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as selected if all of its selectable descendants are selected.

    *No Grupo de Colunas de Informações do País, somente as colunas Cidade e Código Postal são selecionáveis.

    Keyboard Combinations

    [!Note] The keyboard combinations are available only when the grid columnSelection input is set to multiple.

    Há dois cenários para navegação pelo teclado do recurso Seleção de Coluna:

    • Seleção de várias colunas - segure ctrl + clique em cada célula de cabeçalho selecionável.
    • Seleção de coluna de intervalo - segurar shift + clicar seleciona todas as colunas selecionáveis entre elas.

    API Manipulations

    A API fornece alguns recursos adicionais quando se trata de colunas não visíveis, de modo que cada coluna oculta pode ser marcada como selected definindo o setter correspondente.

    [!Note] The above statement also applies to the ColumnGroupComponent, except that when the selected property is changed it changes the state of its descendants.

    Mais informações sobre as manipulações da API podem ser encontradas na seção Referências da API.

    Styling

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

    <igc-grid class="grid"></igc-grid>

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

    .grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

    Demo

    API References

    A interface de seleção de colunas tem mais algumas APIs para explorar, listadas abaixo.

    IgcGridComponent properties:

    IgcColumnComponent properties:

    columnGroup properties:

    IgcGridComponent events:

    • OnColumnsSelectionChange

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.