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.
<!DOCTYPE html><html><head><title>DataGridColumnChooserToolbar</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-data-grid-toolbarid="toolbar"toolbar-title="Global Sales"column-chooser="true"></igc-data-grid-toolbar><igc-data-gridid="grid"height="calc(100% - 6rem)"width="100%"corner-radius-top-left="0"corner-radius-top-right="0"is-column-options-enabled="true"auto-generate-columns="false"><igc-text-columnfield="ProductID"header-text="ID"width="*>90"horizontal-alignment="center"></igc-text-column><igc-image-columnfield="CountryFlag"header-text="Country"width="*>115"content-opacity="1"horizontal-alignment="center"padding-top="5"padding-bottom="5"></igc-image-column><igc-text-columnid="productname"field="ProductName"header-text="Product"></igc-text-column><igc-numeric-columnfield="ProductPrice"header-text="Price"width="*>90"positive-prefix="$"show-grouping-separator="true"min-fraction-digits="2" ></igc-numeric-column><igc-numeric-columnfield="OrderItems"header-text="Orders"width="*>110"></igc-numeric-column><igc-numeric-columnfield="OrderValue"header-text="Order Value"width="*>135"positive-prefix="$"show-grouping-separator="true" ></igc-numeric-column><igc-date-time-columnfield="OrderDate"header-text="Order Date"width="*>130"horizontal-alignment="right"date-time-format="DateShort" ></igc-date-time-column><igc-numeric-columnfield="Margin"header-text="Margin"width="*>105"positive-suffix="%"horizontal-alignment="center" ></igc-numeric-column><igc-numeric-columnfield="Profit"header-text="Profit"width="*>100"positive-prefix="$"show-grouping-separator="true" ></igc-numeric-column><igc-text-columnfield="Status"header-text="Status"width="*>110"horizontal-alignment="center"></igc-text-column></igc-data-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
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.