Web Components Hierarchical Grid의 Ignite UI for Web Components 요약 기능은 열 수준에서 그룹 바닥글로 작동합니다. Web Components IgcHierarchicalGrid 요약은 열 내의 데이터 유형에 따라 또는 사용자 지정 템플릿을 구현하여 미리 정의된 기본 요약 항목 집합이 있는 별도의 컨테이너에서 열 정보를 볼 수 있는 IgcHierarchicalGridComponent 강력한 기능입니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"has-summary="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"has-summary="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"has-summary="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"has-summary="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></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
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
열 요약은 모든 열 값의 함수입니다. 필터링이 적용되지 않는 한 열 요약은 필터링된 결과 값의 함수입니다.
이제 사용자 지정 열 요약 내의 모든 계층적 그리드 데이터에 액세스할 수 있습니다. SummaryOperand 메서드에는 두 개의 추가 선택적 매개 변수가 도입되었습니다 Operate. 아래 코드 스니펫에서 볼 수 있듯이 operation 메서드에는 다음 세 가지 매개 변수가 있습니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"has-summary="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"has-summary="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"has-summary="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"has-summary="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></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
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryTemplate = this.summaryTemplate;
}
public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
return html`<span> My custom summary template</span><span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
`;
}
ts
기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과--ig-size 그리드에 따라 설계에 따라 계산됩니다. summaryRowHeight input 속성을 사용하여 기본값을 재정의합니다. 인수로 숫자 값이 필요하며 거짓 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="options vertical"><igc-property-editor-paneldescription-type="WebHierarchicalGrid"is-horizontal="true"is-wrapping-enabled="false"name="propertyEditorPanel1"id="propertyEditorPanel1"><igc-property-editor-property-descriptionproperty-path="SummaryRowHeight"label="Summary Row Height"value-type="Number"name="SummaryRowHeightEditor"id="SummaryRowHeightEditor"></igc-property-editor-property-description><igc-property-editor-property-descriptionlabel="Toggle Summaries"value-type="Boolean1"primitive-value="True"name="ToggleSummariesEditor"id="ToggleSummariesEditor"></igc-property-editor-property-description><igc-property-editor-property-descriptionname="SizeEditor"id="SizeEditor"label="Grid Size:"value-type="EnumValue"drop-down-names="Small, Medium, Large"drop-down-values="Small, Medium, Large"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"has-summary="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"has-summary="true"name="column1"id="column1"></igc-column><igc-columnfield="Debut"header="Debut"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"name="column2"id="column2"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"name="column3"id="column3"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"has-summary="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"has-summary="true"name="column4"id="column4"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"has-summary="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"has-summary="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"has-summary="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"has-summary="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"has-summary="true"></igc-column></igc-row-island></igc-row-island></igc-hierarchical-grid></div></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
The disabled-summaries property provides precise per-column control over the Web Components Hierarchical Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcHierarchicalGrid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as ['count', 'min', 'max'] by specifying their summary keys in an array.
This property can also be modified dynamically at runtime through code, providing flexibility to adapt the IgcHierarchicalGrid's summaries to changing application states or user actions.
The following examples illustrate how to use the disabled-summaries property to manage summaries for different columns and exclude specific default and custom summary types in the Web Components Hierarchical Grid:
의 UnitPrice 경우, 기본 요약은 , sum와 average 같고 count 비활성화되어 있으며 다른 요약은 같고 min max 활성 상태로 유지됩니다.
For UnitsInStock, custom summaries such as discontinued and totalDiscontinued are excluded using the disabled-summaries property.
At runtime, summaries can also be dynamically disabled using the disabled-summaries property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | Infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="grid-wrapper"><divclass="summaries"><igc-dialogid="dialog"title="Disabled Summaries"><divclass="summaries-dialog-items"></div><igc-buttonid="disableAllBtn"slot="footer"variant="flat">Disable All</igc-button><igc-buttonid="enableAllBtn"slot="footer"variant="flat">Enable All</igc-button></igc-dialog></div><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"has-summary="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"has-summary="true"></igc-column><igc-columnfield="Debut"header="Debut"has-summary="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"has-summary="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"has-summary="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"has-summary="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"has-summary="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"has-summary="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"has-summary="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"has-summary="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"has-summary="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"has-summary="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"has-summary="true"></igc-column></igc-row-island></igc-hierarchical-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
기본적으로 기본 제공 요약 피연산자에 의해 생성된 요약 결과는 그리드 locale 및 pipeArgs 열에 따라 지역화되고 형식이 지정됩니다. 사용자 정의 피연산자를 사용하는 경우 locale 및 pipeArgs 적용되지 않습니다. 요약 결과의 기본 모양을 변경하려면 summaryFormatter 속성을 사용하여 형식을 지정할 수 있습니다.
public dateSummaryFormat(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
const result = summary.summaryResult;
if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
const format = newIntl.DateTimeFormat("en", { year: "numeric" });
return format.format(newDate(result));
}
return result;
}
typescript
<igc-columnid="column"></igx-column>html
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryFormatter = this.dateSummaryFormat;
}
ts
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import SingersData from'./SingersData.json';
import { IgcSummaryResult, IgcSummaryOperand } from'igniteui-webcomponents-grids/grids';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private hierarchicalGrid: IgcHierarchicalGridComponent
private debutColumn: IgcColumnComponent
private column1: IgcColumnComponent
private _bind: () =>void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this.webHierarchicalGridRenderedExpand = this.webHierarchicalGridRenderedExpand.bind(this);
var debutColumn = this.debutColumn = document.getElementById('debutColumn') as IgcColumnComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this.webHierarchicalGridSummaryFormatter = this.webHierarchicalGridSummaryFormatter.bind(this);
this._bind = () => {
hierarchicalGrid.data = this.singersData;
hierarchicalGrid.addEventListener("rendered", this.webHierarchicalGridRenderedExpand);
column1.summaryFormatter = this.webHierarchicalGridSummaryFormatter;
}
this._bind();
}
private _singersData: any[] = SingersData;
publicgetsingersData(): any[] {
returnthis._singersData;
}
public webHierarchicalGridRenderedExpand(args:any): void {
let debutColumn = this.debutColumn;
let hierarchicalGrid = this.hierarchicalGrid;
debutColumn.formatter = (value: number) =>Math.floor(value / 10) * 10 + 's';
hierarchicalGrid.expandAll();
}
public webHierarchicalGridSummaryFormatter(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
const result = summary.summaryResult;
if (summary.key !== "count" && result !== null && result !== undefined) {
const format = newIntl.DateTimeFormat("en", { year: "numeric" });
return format.format(newDate(result));
}
return result;
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"allow-filtering="true"filter-mode="excelStyleFilter"><igc-columnfield="Artist"header="Artist"sortable="true"></igc-column><igc-columnfield="Debut"header="Debut Decade"sortable="true"has-summary="true"name="debutColumn"id="debutColumn"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"allow-filtering="true"filter-mode="excelStyleFilter"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"has-summary="true"name="column1"id="column1"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></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
키보드 탐색
요약 행은 다음 키보드 상호 작용을 통해 탐색할 수 있습니다.
UP- 한 셀 위로 이동합니다.
DOWN- 한 셀 아래로 이동합니다.
왼쪽- 한 셀 왼쪽으로 이동합니다.
RIGHT- 한 셀 오른쪽으로 이동합니다.
CTRL + LEFT 또는 HOME- 가장 왼쪽 셀로 이동합니다.
CTRL + RIGHT 또는 END- 가장 오른쪽 셀로 이동합니다.
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"has-summary="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"has-summary="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="number"has-summary="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"has-summary="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></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