Web Components 계층적 그리드 다중 열 헤더 개요
Web Components Hierarchical Grid의 Ignite UI for Web Components Multi-Column Headers 기능을 사용하면 열을 공통 다중 헤더 아래에 배치하여 그룹화할 수 있습니다. 의 IgcHierarchicalGridComponent
각 다중 열 헤더 그룹은 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다. 이 기능은 가로로 스크롤하는 것이 번거로울 수 있는 대규모 데이터 세트를 처리할 때 특히 유용합니다.
Web Components 계층적 그리드 다중 열 헤더 예
import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebColumnGroupDescriptionModule, PropertyEditorPanelDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from './HierarchicalCustomers.json';
import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent
private propertyEditorPropertyDescription2: IgcPropertyEditorPropertyDescriptionComponent
private hierarchicalGrid: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent;
this.webHierarchicalGridPinFirstGroupToggle = this.webHierarchicalGridPinFirstGroupToggle.bind(this);
var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2 = document.getElementById('propertyEditorPropertyDescription2') as IgcPropertyEditorPropertyDescriptionComponent;
this.webHierarchicalGridHideFirstGroupToggle = this.webHierarchicalGridHideFirstGroupToggle.bind(this);
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.hierarchicalGrid;
propertyEditorPropertyDescription1.buttonClicked = this.webHierarchicalGridPinFirstGroupToggle;
propertyEditorPropertyDescription2.buttonClicked = this.webHierarchicalGridHideFirstGroupToggle;
hierarchicalGrid.data = this.hierarchicalCustomers;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
public get hierarchicalCustomers(): any[] {
return this._hierarchicalCustomers;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebColumnGroupDescriptionModule.register(context);
PropertyEditorPanelDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webHierarchicalGridPinFirstGroupToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
const hgrid: IgcHierarchicalGridComponent = this.hierarchicalGrid;
const firstColumnGroup = hgrid.getColumnByName("Company").parent;
firstColumnGroup.pinned = !firstColumnGroup.pinned;
hgrid.markForCheck();
}
public webHierarchicalGridHideFirstGroupToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
const hgrid: IgcHierarchicalGridComponent = this.hierarchicalGrid;
const firstColumnGroup = hgrid.getColumnByName("Company").parent;
firstColumnGroup.hidden = !firstColumnGroup.hidden;
hgrid.markForCheck();
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
value-type="Button"
primitive-value="Pin First Group"
name="propertyEditorPropertyDescription1"
id="propertyEditorPropertyDescription1">
</igc-property-editor-property-description>
<igc-property-editor-property-description
value-type="Button"
primitive-value="Hide First Group"
name="propertyEditorPropertyDescription2"
id="propertyEditorPropertyDescription2">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
name="hierarchicalGrid"
id="hierarchicalGrid"
id="hierarchicalGrid"
primary-key="CustomerID"
moving="true"
allow-filtering="true">
<igc-column
field="CustomerID"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="General Information">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="Orders"
auto-generate="false">
<igc-column-group
header="Order Information">
<igc-column-group
header="Order Details">
<igc-column
field="OrderID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="EmployeeID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="OrderDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="RequiredDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="General Shipping Information">
<igc-column
field="ShipDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipVia"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Freight"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Shipping Locations">
<igc-column
field="ShipAddress"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCity"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipPostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCountry"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="OrderDetails"
auto-generate="false">
<igc-column
field="ProductID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="UnitPrice"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Quantity"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Discount"
data-type="number"
sortable="true"
resizable="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) { %><script src="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 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
다중 열 헤더의 선언은 제목 정보가 전달된 구성 요소 IgcHeaderComponent
로 IgcColumnGroupComponent
열 집합을 래핑하여 수행됩니다.
<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
<igc-column field="CustomerID" sortable="true" resizable="true"> </igc-column>
<igc-column-group header="Address Information">
<igc-column-group header="Location">
<igc-column field="Address" sortable="true" resizable="true"></igc-column>
<igc-column field="City" sortable="true" resizable="true"></igc-column>
<igc-column field="PostalCode" sortable="true" resizable="true"></igc-column>
<igc-column field="Country" sortable="true" resizable="true"></igc-column>
</igc-column-group>
<igc-column-group header="Contact Information">
<igc-column field="Phone" sortable="true" resizable="true"></igc-column>
<igc-column field="Fax" sortable="true" resizable="true"></igc-column>
</igc-column-group>
</igc-column-group>
</igc-hierarchical-grid>
html
중첩 된 헤더의 수준을 달성 n-th
하려면 위의 선언을 따라야합니다. 따라서 중첩 IgcColumnGroupComponent
하면 원하는 결과를 얻을 수 있습니다.
<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
<igc-column field="CustomerID" dataType="string" sortable="true" resizable="true"> </igc-column>
<igc-column-group header="General Information">
<igc-column field="CompanyName" dataType="string" sortable="true" resizable="true"></igc-column>
<igc-column-group header="Person Details">
<igc-column field="ContactName" dataType="string" sortable="true" resizable="true"></igc-column>
<igc-column field="ContactTitle" dataType="string" sortable="true" resizable="true"></igc-column>
</igc-column-group>
</igc-column-group>
</igc-hierarchical-grid>
html
Every IgcColumnGroupComponent
supports moving, pinning and hiding.
일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 열 그룹 또는 열별로 고정하는 것은 허용되지 않습니다. 열과 열 그룹 간 이동은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 열/열 그룹이 현재 그룹으로 래핑되지 않은 경우(즉, 최상위 열임을 의미) 표시되는 전체 열 간에 이동이 허용됩니다.
<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
<igc-column field="CustomerID" dataType="string" movable="true" pinned="true" sortable="true" resizable="true"> </igc-column>
<igc-column-group movable="true" pinned="true" header="General Information">
<igc-column field="CompanyName" dataType="string" sortable="true" resizable="true"></igc-column>
<igc-column-group header="Person Details">
<igc-column field="ContactName" dataType="string" sortable="true" resizable="true"></igc-column>
<igc-column field="ContactTitle" dataType="string" sortable="true" resizable="true"></igc-column>
</igc-column-group>
</igc-column-group>
</igc-hierarchical-grid>
html
다중 열 헤더 템플릿
그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 다음 코드 조각은 열 그룹의 HeaderTemplate
사용하는 방법을 보여줍니다.
<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>
html
constructor() {
var addresss = this.addresss = document.getElementById('addressInfo') as IgcColumnGroupComponent;
addresss.headerTemplate = this.columnGroupHeaderTemplate;
}
public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
return html`
${ctx.column.header.toUpperCase()}
`;
}
ts
여러 열 그룹에 대해 단일 템플릿을 다시 사용하려면 다음과 같이 열 그룹의 속성을 설정할 HeaderTemplate
수 있습니다.
<igc-column-group id="generalInfo" header="General Information">
</igc-column-group>
<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>
html
constructor() {
var general = this.general = document.getElementById('generalInfo') as IgcColumnGroupComponent;
var addresss = this.address = document.getElementById('addressInfo') as IgcColumnGroupComponent;
general.headerTemplate = this.columnGroupHeaderTemplate;
addresss.headerTemplate = this.columnGroupHeaderTemplate;
}
public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
return html`
${ctx.column.header.toUpperCase()}
`;
}
ts
헤더가 다시 템플릿화되고 해당 열 그룹이 이동 가능한 경우 템플릿 요소에서 draggable 속성을 false로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!
public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
return html`
<igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
`;
}
ts
다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent, IgcColumnGroupComponent } from 'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from './HierarchicalCustomers.json';
import { IgcGridComponent, IgcColumnTemplateContext, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private hierarchicalGrid: IgcHierarchicalGridComponent
private columnGroup1: IgcColumnGroupComponent
private columnGroup2: IgcColumnGroupComponent
private columnGroup3: IgcColumnGroupComponent
private columnGroup4: IgcColumnGroupComponent
private columnGroup5: IgcColumnGroupComponent
private _bind: () => void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
var columnGroup1 = this.columnGroup1 = document.getElementById('columnGroup1') as IgcColumnGroupComponent;
var columnGroup2 = this.columnGroup2 = document.getElementById('columnGroup2') as IgcColumnGroupComponent;
var columnGroup3 = this.columnGroup3 = document.getElementById('columnGroup3') as IgcColumnGroupComponent;
var columnGroup4 = this.columnGroup4 = document.getElementById('columnGroup4') as IgcColumnGroupComponent;
var columnGroup5 = this.columnGroup5 = document.getElementById('columnGroup5') as IgcColumnGroupComponent;
this._bind = () => {
hierarchicalGrid.data = this.hierarchicalCustomers;
columnGroup1.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup2.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup3.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup4.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup5.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
public get hierarchicalCustomers(): any[] {
return this._hierarchicalCustomers;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebColumnGroupDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webHierarchicalGridColumnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div style="display:flex;align-items:center;gap:5px;">
<span draggable="false" @click=${(e: any) => this.toggleColumnGroup(column)}>
${this.columnGroupStates.get(column) ? "🔽" : "🔼"}
</span>
<span>${column.header}</span>
</div>`;
};
public columnGroupStates = new Map<IgcColumnGroupComponent, boolean>();
public toggleColumnGroup(columnGroup: IgcColumnGroupComponent) {
const columns = columnGroup.childColumns;
if (columnGroup.header === 'General Information') {
const column = columns[1] as IgcColumnComponent;
column.hidden = !column.hidden;
} else if (columnGroup.header === 'Address Information') {
for (const column of columns) {
const col = column as IgcColumnComponent;
if (col.header === "Location"){
for (const cl of col.childColumns) {
const c = cl as IgcColumnComponent;
if (c.field !== "Address"){
c.hidden = !c.hidden;
}
}
}
else if (col.header === "Contact Information"){
const c = col.childColumns[1] as IgcColumnComponent;
c.hidden = !c.hidden;
}
}
} else {
for (let i = 1; i < columns.length; i++) {
const c = columns[i] as IgcColumnComponent;
c.hidden = !c.hidden;
}
}
this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
name="hierarchicalGrid"
id="hierarchicalGrid"
id="hierarchicalGrid"
primary-key="ID"
moving="true"
allow-filtering="true">
<igc-column
field="CustomerID"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="General Information"
name="columnGroup1"
id="columnGroup1">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information"
name="columnGroup2"
id="columnGroup2">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="Orders"
auto-generate="false">
<igc-column-group
header="Order Information">
<igc-column-group
header="Order Details"
name="columnGroup3"
id="columnGroup3">
<igc-column
field="OrderID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="EmployeeID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="OrderDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="RequiredDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="General Shipping Information"
name="columnGroup4"
id="columnGroup4">
<igc-column
field="ShipDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipVia"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Freight"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Shipping Locations"
name="columnGroup5"
id="columnGroup5">
<igc-column
field="ShipAddress"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCity"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipPostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCountry"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="OrderDetails"
auto-generate="false">
<igc-column
field="ProductID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="UnitPrice"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Quantity"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Discount"
data-type="number"
sortable="true"
resizable="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) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>
html
그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
.grid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css
데모
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from './HierarchicalCustomers.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private hierarchicalGrid: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this._bind = () => {
hierarchicalGrid.data = this.hierarchicalCustomers;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
public get hierarchicalCustomers(): any[] {
return this._hierarchicalCustomers;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebColumnGroupDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
name="hierarchicalGrid"
id="hierarchicalGrid"
id="hierarchicalGrid"
primary-key="ID"
moving="true"
allow-filtering="true">
<igc-column
field="CustomerID"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="General Information">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="Orders"
auto-generate="false">
<igc-column-group
header="Order Information">
<igc-column-group
header="Order Details">
<igc-column
field="OrderID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="EmployeeID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="OrderDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="RequiredDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="General Shipping Information">
<igc-column
field="ShipDate"
data-type="date"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipVia"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Freight"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Shipping Locations">
<igc-column
field="ShipAddress"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCity"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipPostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ShipCountry"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="OrderDetails"
auto-generate="false">
<igc-column
field="ProductID"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="UnitPrice"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Quantity"
data-type="number"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Discount"
data-type="number"
sortable="true"
resizable="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) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#hierarchicalGrid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.