Grid Column Hiding

The Ignite UI for Angular Grid provides an IgxColumnHidingComponent, which allows users to perform column hiding directly through the UI or by using the angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

Demo


Grid setup

Let's start by creating our Grid and binding it to our data. We will also enable both filtering and sorting for the columns.

<!--columnHiding.component.html-->

<igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'ContactName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-grid>

Toolbar's Column Hiding UI

The built-in Column Hiding UI is placed inside an IgxDropDownComponent in the Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the showToolbar and the columnhiding properties of the Grid to true. If the toolbar is not enabled, enabling the columnhiding property will have no effect. We will also add a title to our toolbar by using the toolbarTitle property and a custom style for our Grid's wrapper.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ... [showToolbar]="true" [columnHiding]="true" toolbarTitle="Employees">
        ...
    </igx-grid>
</div>
/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

The Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the columnHidingTitle and the hiddenColumnsText properties, we will set the title and the text that is displayed inside the dropdown button in the toolbar. More specifically, the hiddenColumnsText is displayed right next to the columns count number, which is included by default in the button. The hiddenColumnsText property is quite handy since it can be used for localization purposes as well.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ... [showToolbar]="true" [columnHiding]="true" toolbarTitle="Employees" columnHidingTitle="Column Hiding" hiddenColumnsText="Hidden">
        ...
    </igx-grid>
</div>

By using the columnsAreaMaxHeight property of the column hiding UI, we can set the maximum height of the area that contains the columns. This way if we have a lot of columns and not all of them can fit in the container, a scrollbar will appear, which will allow us to navigate to any column we want by keeping the search input pinned at the top and the show/hide all buttons at the bottom.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.grid.toolbar.columnHidingUI.columnsAreaMaxHeight = "200px";
}

In order to use the expanded set of functionalities for the column hiding UI, we can use the toolbar's columnHidingUI property, which returns a reference to the column hiding UI component itself. This way we can access its respective API and use it according to our application's requirements.

You can see the result of the code from above at the beginning of this article in the Column Hiding Demo section.

Custom Column Hiding UI

Let's say we want to manually define our IgxColumnHidingComponent and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup. In order to do this, let's first grab the IgxColumnHidingModule.

// app.module.ts

...
import {
    ...
    IgxColumnHidingModule 
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxColumnHidingModule],
})
export class AppModule {}

Now let's create our IgxColumnHidingComponent! In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the columns property of the component to the columns of our Grid and include some custom styles to make our application look even better!

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-hiding #columnHidingUI [columns]="grid.columns">
    </igx-column-hiding>
</div>
<div class="gridContainer">
    <igx-grid #grid [data]="data" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-grid>
</div>
/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-hiding {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

Add title and filter prompt

A couple more things we can do in order to enrich the user experience of our column hiding component is to set the title and the filterColumnsPrompt properties! The title is displayed on the top and the filterColumnsPrompt is the prompt text that is displayed in the filter input of our column hiding UI.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-hiding #columnHidingUI [columns]="grid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-hiding>
</div>

Add column display order options

We can also allow the user to choose the display order of the columns in the column hiding UI. For this purpose we will use the columnDisplayOrder property, which is an enumeration type property and has the following options:

  • Alphabetical (order the columns alphabetically)
  • DisplayOrder (order the columns according to the way they are displayed in the Grid)

Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the IgxRadio module.

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

Now all we have to do is bind the checked property of both radio buttons respectively with different conditions and handle their click events.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

Disable hiding of a column

We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to true.

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-grid ... >
        ...
        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-grid>
</div>

If all went well, this is how our column hiding UI component should look like:


Styling

To get started with styling the column hiding component, we need to import the index file, where all the theme functions and component mixins live:

@import '~igniteui-angular/lib/core/styles/themes/index';

By using the simplest approach, we create a new theme that extends the igx-column-hiding-theme and accepts the $title-color and the $background-color parameters.

$custom-column-hiding-theme: igx-column-hiding-theme(
    $background-color: steelblue,
    $title-color: gold
);

As seen, the igx-column-hiding-theme only controls colors for the column hiding container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme:

$custom-button: igx-button-theme($flat-text-color: gold, $disabled-color: black);

In this example we only changed the text-color of the flat buttons and the button disabled color, but the igx-button-theme provides way more parameters to control the button style.

The last step is to include the component mixins, each with its respective theme:

@include igx-column-hiding($custom-column-hiding-theme);
.igx-column-hiding {
    @include igx-button($custom-button);
}
Note

We scope the igx-button mixin within .igx-column-hiding, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

:host {
    ::ng-deep {
        @include igx-column-hiding($custom-column-hiding-theme);
        .igx-column-hiding {
            @include igx-button($custom-button);
        }
    }
}

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$yellow-color: gold;
$blue-color: steelblue;

$custom-palette: igx-palette($primary: $blue-color, $secondary: $yellow-color);

And then with igx-color we can easily retrieve color from the palette.

$custom-column-hiding-theme: igx-column-hiding-theme(
    $palette: $custom-palette,
    $title-color: igx-color($custom-palette, "secondary", 400),
    $background-color: igx-color($custom-palette, "primary", 200)
);

$custom-button: igx-button-theme(
    $palette: $custom-palette,
    $flat-text-color: igx-color($custom-palette, "secondary", 400),
    $disabled-color: black
);
Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

// Extending the dark column hiding schema
$custom-column-hiding-schema: extend($_dark-column-hiding,
    (
        title-color:(
            igx-color: ("secondary", 400)
        ),
        background-color:(
            igx-color: ("primary", 200)
        )
    )
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
    (           
        flat-text-color:(
            igx-color:("secondary", 500)
        ),
        disabled-color:(
            igx-color:("primary", 700)
        )
    )
);

In order to apply our custom schemas we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-column-hiding: $custom-column-hiding-schema,
    igx-button: $custom-button-schema
));

// Defining column-hiding-theme with the global dark schema
$custom-column-hiding-theme: igx-column-hiding-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$custom-button: igx-button-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

Don't forget to include the themes in the same way as it was demonstrated above.

Demo


API References

In this article we learned how to use the built-in column hiding UI in the Grid's toolbar and we defined it as a separate component as well. We introduced a UI that allows the user to choose between different column orders and we set our own custom title and filter prompt texts. We also used an additional Ignite UI for Angular component - the IgxRadio button.

The column hiding UI has a few more APIs to explore, which are listed below.

Additional components and/or directives with relative APIs that were used:

IgxGridComponent properties:

IgxColumnComponent properties:

IgxGridToolbarComponent properties:

IgxGridToolbarComponent methods:

IgxGridComponent events:

IgxRadioComponent

Styles:

Additional Resources

Our community is active and always welcoming to new ideas.