Web Components 트리 그리드 다중 열 헤더 개요

Web Components 트리 그리드의 Ignite UI for Web Components 다중 열 헤더 기능을 사용하면 공통 다중 헤더 아래에 열을 배치하여 그룹화할 수 있습니다. 의 IgcTreeGridComponent 각 다중 열 머리글 그룹은 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다. 이 기능은 가로로 스크롤하는 것이 번거로울 수 있는 대규모 데이터 세트를 처리할 때 특히 유용합니다.

Web Components Tree Grid Multi-Column Headers Example

다중 열 헤더의 선언은 제목 정보가 전달된 구성 요소 IgcHeaderComponent로 IgcColumnGroupComponent 열 집합을 래핑하여 수행됩니다.

<igc-tree-grid primaryKey="ID" foreignKey="ParentID">
    <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 field="PostalCode" data-type="String" sortable="true" resizable="true"></igc-column>
    </igc-column-group>
</igc-tree-grid>

중첩 된 헤더의 수준을 달성 n-th 하려면 위의 선언을 따라야합니다. 따라서 중첩 IgcColumnGroupComponent 하면 원하는 결과를 얻을 수 있습니다.

<igc-tree-grid primary-key="ID" foreign-key="ParentID" moving="true">
    <igc-column-group pinned="false" header="General Information">
        <igc-column field="HireDate" data-type="date" sortable="true" resizable="true"></igc-column>
        <igc-column-group header="Person Details">
            <igc-column field="ID" data-type="number" resizable="true" filterable="false"></igc-column>
            <igc-column field="Title" data-type="string" sortable="true" resizable="true"></igc-column>
            <igc-column field="Age" data-type="number" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-tree-grid>

Every IgcColumnGroupComponent supports moving, pinning and hiding.

[!Note] When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group.
When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.

<igc-tree-grid primary-key="ID" foreign-key="ParentID" moving="true">
    <igc-column-group header="Contact Information">
        <igc-column field="Phone" data-type="String" sortable="true" resizable="true"></igc-column>
    </igc-column-group>
    <igc-column field="Name" data-type="String" sortable="true" resizable="true"></igc-column>
    <igc-column field="Title" data-type="String" sortable="true" resizable="true"></igc-column>
    <igc-column field="Age" data-type="Number" sortable="true" resizable="true"></igc-column>
</igc-tree-grid>

Multi-Column Header Template

그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 다음 코드 조각은 열 그룹의 HeaderTemplate 사용하는 방법을 보여줍니다.

<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>

constructor() {
    var addresss = this.addresss = document.getElementById('addressInfo') as IgcColumnGroupComponent;
    addresss.headerTemplate = this.columnGroupHeaderTemplate;
}

public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        ${ctx.column.header.toUpperCase()}
    `;
}

여러 열 그룹에 대해 단일 템플릿을 다시 사용하려면 다음과 같이 열 그룹의 속성을 설정할 HeaderTemplate 수 있습니다.

<igc-column-group id="generalInfo" header="General Information">
</igc-column-group>
<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>

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()}
    `;
}

[!Note] If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}

다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-tree-grid class="grid"></igc-tree-grid>

그런 다음 관련 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);
}

Demo

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.