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

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

    Web Components 트리 그리드 다중 열 헤더 예

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

    <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>
    html

    중첩 된 헤더의 수준을 달성 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>
    html

    Every IgcColumnGroupComponent supports moving, pinning and hiding.

    일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 열 그룹 또는 열별로 고정하는 것은 허용되지 않습니다. 열과 열 그룹 간 이동은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 열/열 그룹이 현재 그룹으로 래핑되지 않은 경우(즉, 최상위 열임을 의미) 표시되는 전체 열 간에 이동이 허용됩니다.

    <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>
    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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA 배너

    스타일링

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

    <igc-tree-grid class="grid"></igc-tree-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

    데모

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    API 참조

    추가 리소스

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