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">
    <igx-column-group header="General Information">
        <igx-column [movable]="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
        <igx-column-group [movable]="true" header="Person Details">
            <igx-column [movable]="true" [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
            <igx-column [movable]="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

모든 igx-column-groupmoving, pinning, hiding을 지원합니다.

Note

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

<igx-grid [data]="data" height="600px" [allowFiltering]="true">
    <igx-column-group  [movable]="true" [pinned]="true" header="General Information">
        <igx-column [movable]="true" 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 참조

추가 리소스

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