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 Binding Local Data
The following sample demonstrates the Ignite UI for Web Components Data Table / Data Grid data binding to an array of data.
<!DOCTYPE html><html><head><title>DataGridBindingLocalData</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-gridid="grid"height="100%"width="100%"auto-generate-columns="false"is-column-options-enabled="true"><igc-text-columnfield="ProductID"header-text="ID"width="*>95"></igc-text-column><igc-text-columnfield="ProductName"header-text="Product"width="*>160"></igc-text-column><igc-image-columnfield="CountryFlag"header-text="Country"width="*>120"contentOpacity="1"padding-top="5"padding-bottom="5"></igc-image-column><igc-numeric-columnfield="ProductPrice"header-text="Price"width="*>95"positive-prefix="$"show-grouping-separator="true"min-fraction-digits="2"></igc-numeric-column><igc-numeric-columnfield="OrderItems"header-text="Orders"width="*>105"></igc-numeric-column><igc-numeric-columnfield="OrderValue"header-text="Order Value"width="*>140"positive-prefix="$"show-grouping-separator="true"></igc-numeric-column><igc-date-time-columnfield="OrderDate"header-text="Order Date"width="*>135"dateTimeFormat="DateShort" ></igc-date-time-column><igc-numeric-columnfield="Margin"header-text="Margin"width="*>115"positive-suffix="%"></igc-numeric-column><igc-numeric-columnfield="Profit"header-text="Profit"width="*>105"positive-prefix="$"show-grouping-separator="true"></igc-numeric-column><igc-text-columnfield="Status"header-text="Status"width="*>100"></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.