[!Note] 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
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.
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>
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;
}
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
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>
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;
}
API References
IgcButtonComponent
ColumnChooserText
ColumnChooserTitle
IgcColumnChooserComponent
columnHidingAnimationMode
columnShowingAnimationMode
IgcDataGridToolbarComponent