Grid Multi-column Headers Overview

    IgxGrid 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-grid [data]="data" height="600px" [allowFiltering]="true">
    <igx-column-group header="Contact Information">
        <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
        <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
        <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
    </igx-column-group>
</igx-grid>

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

    <igx-grid [data]="data" height="600px" [allowFiltering]="true" [moving]="true">
    <igx-column-group header="General Information">
        <igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
            <igx-column sortable="true" resizable="true" field="ContactTitle"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

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

    Note

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

    <igx-grid [data]="data" height="600px" [allowFiltering]="true" [moving]="true">
    <igx-column-group [pinned]="true" header="General Information">
        <igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
    </igx-column-group>
    <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
    <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
    <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-grid>

    API 참조

    추가 리소스

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