Angular Tree Grid Column Selection

The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations.

Angular Column Selection Example

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

*Units, Unit Price and Delivered are with disabled column selection.

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core';
import { GridSelectionMode, IgxTreeGridComponent, IgxGridToolbarComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular';
import { ORDERS_DATA } from '../data/orders';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'app-tree-grid-column-selection',
    templateUrl: './tree-grid-column-selection.component.html',
    styleUrls: ['./tree-grid-column-selection.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent]
})
export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit {
    private cdr = inject(ChangeDetectorRef);

    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;
    public currentColumnSelection: GridSelectionMode = 'single';
    public columnConfig = [
        { field: 'ID', header: 'ID', selectable: true },
        { field: 'Name', header: 'Order Product', selectable: true },
        { field: 'Category', header: 'Category', selectable: true },
        { field: 'Units', header: 'Units', selectable: false },
        { field: 'UnitPrice', header: 'Unit Price', selectable: false, formatter: this.formatCurrency },
        { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency },
        { field: 'OrderDate', header: 'Order Date', selectable: true, formatter: this.formatDate },
        { field: 'Delivered', header: 'Delivered', selectable: false }
    ];

    public ngOnInit(): void {
        this.data = ORDERS_DATA;
    }

    public ngAfterViewInit(): void {
        this.tGrid.getColumnByName('ID').selected = true;
        this.cdr.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public formatCurrency(value: number) {
        return `$${value.toFixed(2)}`;
    }
}
ts

<div class="grid-wrapper">
  <igx-tree-grid  [igxPreventDocumentScroll]="true"
    [data]="data"
    primaryKey="ID"
    foreignKey = "ParentID"
    height="530px"
    width="100%"
    [columnSelection]="currentColumnSelection">
    <igx-grid-toolbar>

      <igx-select [(ngModel)]="currentColumnSelection">
        <label igxLabel>Column Selection</label>
        <igx-select-item value="none">None</igx-select-item>
        <igx-select-item value="single">Single</igx-select-item>
        <igx-select-item value="multiple">Mulitple</igx-select-item>
      </igx-select>

    </igx-grid-toolbar>

    @for (c of columnConfig; track c) {
      <igx-column
        [field] = "c.field"
        [header] = "c.header"
        [selectable] = "c.selectable"
        [formatter] = "c?.formatter">
      </igx-column>
    }

  </igx-tree-grid>
</div>
html

.grid-wrapper{
    padding: 16px;

    igx-select {
        --ig-size: var(--ig-size-small);
    }
}
scss

Basic usage

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

Interactions

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.

Multi-column Headers don't reflect on the selectable input. The IgxColumnGroupComponent 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.

*Under Personal Details Column Group only column ID and Title are selectable.

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular';
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';

@Component({
    selector: 'app-column-group-selection',
    templateUrl: './column-group-selection.component.html',
    styleUrls: ['./column-group-selection.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent]
})
export class TreeGridColumnGroupSelectionComponent implements OnInit {

   @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true })
   public treeGrid: IgxTreeGridComponent;
   public data;

   public ngOnInit(): void {
    this.data = generateEmployeeDetailedFlatData();
    this.treeGrid.selectColumns(['ID', 'Title', 'City']);

  }
}
ts

<div class="grid-wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"
        #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" height="530px" width="100%" columnSelection='multiple'>
        <igx-column field="Name" dataType="string"></igx-column>
        <igx-column-group header="General Information">
            <igx-column field="HireDate" dataType="date"></igx-column>
            <igx-column-group header="Personal Details">
                <igx-column field="ID" dataType="number"></igx-column>
                <igx-column field="Title" dataType="string"></igx-column>
                <igx-column field="Age" dataType="number" [selectable]="false"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column field="Country" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="City" dataType="string"></igx-column>
                <igx-column field="Address" dataType="string"></igx-column>
            </igx-column-group>
            <igx-column-group header="Contact Information">
                <igx-column field="Phone" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="Fax" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="PostalCode" dataType="string"></igx-column>
            </igx-column-group>
        </igx-column-group>
    </igx-tree-grid>
</div>
html

.grid-wrapper {
    padding: 16px;
}scss

Keyboard combinations

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

There are two scenarios for keyboard navigation of the Column Selection feature:

Multi-column selection - holding ctrl + click on every selectable header cell.
Range column selection - holding shift + click selects all selectable columns in between.

API manipulations

The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as selected by setting the corresponding setter.

The above statement also applies to the IgxColumnGroupComponent, except that when the selected property is changed it changes the state of its descendants.

More information regarding the API manipulations could be found in the API References section.

Styling

Before diving into the styling options, the core module and all component mixins need to be imported.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

Please note that row selection and column selection can't be manipulated independently. They depend on the same variables.

With that being said, let's move on and change the selection and hover styles.
Following the simplest approach, let's define our custom theme.

$custom-grid-theme: grid-theme(
  $row-selected-background: #011627,
  $row-selected-text-color: #ecaa53,
  $row-selected-hover-background: #011627,
  $header-selected-text-color: #ecaa53,
  $header-selected-background: #011627,
  $expand-icon-color: #ecaa53,
  $expand-icon-hover-color: #b64b80
);
scss

The grid-theme accepts several parameters but those are the five responsible for changing the appearance of all selected columns:

$row-selected-background - sets the background of the selected fraction.
$row-selected-text-color - sets the text color of the selected fraction
$row-selected-hover-background - sets the color of the hovered cell or bunch of cells.
$header-selected-text-color - sets the text color of the selected column header
$header-selected-background - sets the background color of the selected column header.

Using CSS Variables

The last step is to include the custom igx-grid theme.

@include css-vars($custom-grid-theme)
scss

Demo

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core';
import { IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular';
import { ORDERS_DATA } from '../data/orders';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';


@Component({
    selector: 'app-tree-grid-column-selection-style',
    templateUrl: './tree-grid-column-selection-style.component.html',
    styleUrls: ['./tree-grid-column-selection-style.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit {
    private cd = inject(ChangeDetectorRef);

    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;

    public columnConfig = [
        { field: 'ID', header: 'ID', selectable: true },
        { field: 'Name', header: 'Order Product', selectable: true },
        { field: 'Category', header: 'Category', selectable: true },
        { field: 'Units', header: 'Units', selectable: true },
        { field: 'UnitPrice', header: 'Unit Price', selectable: true, formatter: this.formatCurrency },
        { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency },
        { field: 'OrderDate', header: 'Order Date', selectable: false, formatter: this.formatDate },
        { field: 'Delivered', header: 'Delivered', selectable: true }
    ];

    public ngOnInit(): void {
        this.data = ORDERS_DATA;
    }

    public ngAfterViewInit() {
        this.tGrid.selectColumns(['ID', 'UnitPrice']);
        this.cd.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public formatCurrency(value: number) {
        return `$${value.toFixed(2)}`;
    }
}
ts

<div class="grid-wrapper">
  <igx-tree-grid  [igxPreventDocumentScroll]="true"
    [data]="data"
    primaryKey="ID"
    foreignKey = "ParentID"
    height="530px"
    width="100%"
    columnSelection="multiple">
    @for (c of columnConfig; track c) {
      <igx-column
        [field] = "c.field"
        [header] = "c.header"
        [selectable] = "c.selectable"
        [formatter] = "c?.formatter">
      </igx-column>
    }
  </igx-tree-grid>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$custom-grid-theme: grid-theme(
  $row-selected-background: #011627,
  $row-selected-text-color: #ecaa53,
  $row-selected-hover-background: #011627,
  $header-selected-text-color: #ecaa53,
  $header-selected-background: #011627
);

@include css-vars($custom-grid-theme);
 scss