React Grid Column Chooser Overview

    The Ignite UI for React Data Grid supports the ability show and hide columns with the UI through the IgrDataGridToolbar 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.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

    The Column Chooser UI is accessible within the IgrDataGridToolbar 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 IgrButton, 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 IgrColumnChooser property will have no effect and hide the button.

    The IgrDataGridToolbar provides additional properties such as adding a title to the toolbar by using the toolbarTitle property, placing text in the IgrButton 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.

    Code Snippet

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

    <IgrDataGridToolbar ref={this.onToolbarRef}
    toolbarTitle="Grid Title"
    columnChooser="true"
    columnChooserText="Columns"
    columnChooserTitle="Column Chooser">
</IgrDataGridToolbar>
<IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    dataSource={this.data}
    autoGenerateColumns="true"
    columnHidingAnimationMode="SlideOver">
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrDataGridToolbar } from 'igniteui-react-grids';

public grid : IgrDataGrid;
public toolbar: IgrDataGridToolbar;

this.onGridRef = this.onGridRef.bind(this);
this.onToolbarRef = this.onToolbarRef.bind(this);


public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.toolbar != null) {
        this.toolbar.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;

        let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent;
        productNameColumn.isHidden = true;
    }
}

public onToolbarRef(toolbar: IgrDataGridToolbar) {
    this.toolbar = toolbar;
    if (this.grid != null) {
    this.toolbar.targetGrid = this.grid;
    this.toolbar.columnChooser = "true";
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Column Chooser";
    this.toolbar.columnChooserTitle = "Column Chooser";
    }
}

    Simple Column Chooser

    Let's say we want to manually display the IgrColumnChooser 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

    Code Snippet

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

    <IgrColumnChooser
    ref={this.onColumnChooserRef}
    height="100%"
    width="250px"
    title="Column Chooser"
    showAllText="Show All"
    hideAllText="Hide All">
</IgrColumnChooser>
<IgrDataGrid
    ref={this.onGridRef}
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false"
    columnHidingAnimationMode="SlideOver">
    <IgrTextColumn isHidden="true" field="ProductPrice" headerText="Product Price"/>
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrColumnChooser } from 'igniteui-react-grids';
import { ColumnMovingAnimationMode } from 'igniteui-react-grids';

public grid : IgrDataGrid;
public columnChooser: IgrColumnChooser;

public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.columnChooser) {
        this.columnChooser.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
    }
}

public onColumnChooserRef(columnChooser: IgrColumnChooser) {
    this.columnChooser = columnChooser;
    if (this.grid) {
        this.columnChooser.targetGrid = this.grid;
        this.columnChooser.showAllText = "Show All";
        this.columnChooser.hideAllText = "Hide All";
    }
}

    API References