Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Grid Column Chooser Overview

    The Ignite UI for Web Components Data Grid supports the ability show and hide columns with the UI through the IgcDataGridToolbarComponent component or by the columnChooser component that provides flexibility to place it anywhere on the page. The IsHidden property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of IsHidden will reflect in the columnChooser component. Each approach can be used interchangeably to change the visible state of the columns.

    Web Components Grid Column Chooser Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Toolbar's Column Chooser UI

    The Column Chooser UI is accessible within the IgcDataGridToolbarComponent component separate from the grid. For this purpose all we have to do is set the toolbar's columnChooser property to true. The toolbar will then display a IgcButtonComponent, when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the IgcColumnChooserComponent property will have no effect and hide the button.

    The IgcDataGridToolbarComponent provides additional properties such as adding a title to the toolbar by using the toolbarTitle property, placing text in the IgcButtonComponent by setting the ColumnChooserText property, and adding a title header to the column chooser UI by setting ColumnChooserTitle.

    The Column Chooser can be configured with animations by setting the grid's columnHidingAnimationMode and columnShowingAnimationMode properties.

    Ignite UI for Web Components | CTA Banner

    Code Snippet

    The following demonstrates how to implement the Column Chooser Toolbar UI for the Web Components Data Grid:

    <igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-chooser="true"
    column-chooser-text="Columns"
    column-chooser-title="Column Chooser">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin"
    column-hiding-animation-mode="SlideOver">
</igc-data-grid>
html
    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcDataGridToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.isHidden = true;
    this.toolbar.columnChooser = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Choose Text";
    this.toolbar.columnChooserTitle = "Choose Title Text";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}
ts

    Simple Column Chooser

    Let's say we want to manually display the IgcColumnChooserComponent UI without the toolbar 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.

    Demo

    EXAMPLE
    TS
    HTML
    DataGridStyles.css
    index.css
    Edit in:

    Code Snippet

    The following demonstrates how to implement the Column Chooser UI for the Data Grid:

    <igc-column-chooser
    id="columnUI"
    height="100%"
    width="250px"
    title="Column Chooser"
    show-all-text="Show All"
    hide-all-text="Hide All">
</igc-column-chooser>
<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    data-source={this.data}
    auto-generate-columns="false"
    column-hiding-animation-mode="SlideOver">
    <igx-text-column is-hidden="true" field="ProductPrice" header-text="Product Price"><igc-text-column>
</igc-data-grid>
html
    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private columnChooser: IgcColumnChooserComponent;

connectedCallback() {
    this.columnChooser.targetGrid = this.grid;
    this.columnChooser.showAllText = "Show All";
    this.columnChooser.hideAllText = "Hide All";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}
ts

    API References