Tree Grid Multi-column Headers Overview

    IgxTreeGrid supports multi-column headers which allows you to group columns by placing them under a common multi headers. Each Multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid.

    데모

    Multi-column header의 선언은 열 집합을 igx-column-group 컴포넌트에 header 제목을 전달하여 래핑합니다.

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID">
    <igx-column-group header="Contact Information">
        <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
        <igx-column field="Fax" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
        <igx-column field="PostalCode" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    </igx-column-group>
</igx-tree-grid>

    중첩 헤더의 n-th 수준을 달성하려면 상기의 선언을 따라야 실행합니다. 즉, igx-column-group을 중첩하면 원하는 결과를 얻을 수 있습니다.

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [moving]="true">
    <igx-column-group [pinned]="false" header="General Information">
        <igx-column field="HireDate" dataType="date" [sortable]="true" [resizable]="true"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column field="ID" dataType="number" [resizable]="true" [filterable]="false"></igx-column>
            <igx-column field="Title" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
            <igx-column field="Age" dataType="number" [sortable]="true" [resizable]="true"></igx-column>
        </igx-column-group>            
    </igx-column-group>
</igx-tree-grid>

    모든 igx-column-group은 moving, pinning, hiding을 지원합니다.

    Note

    열 집합과 열 그룹이 있는 경우 가장 위의 상위 열에 대해서만 핀 고정이 가능합니다. 더 구체적으로 중첩된 column groups 또는 columns의 핀 고정은 허용되지 않습니다.
    columns과 column groups 사이의 이동은 계층에서 같은 수준이고 같은 group인 경우에만 허용됩니다.
    columns/column-groups이 현재 group으로 래핑되어 있지 않은 즉, 최상위 columns인 경우 표시된 전체 열 사이에서 이동이 허용됩니다.

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [moving]="true">
    <igx-column-group header="Contact Information">
        <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    </igx-column-group>
    <igx-column field="Name" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    <igx-column field="Title" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

    API 참조

    추가 리소스

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