Angular Tree Grid Multi-column Headers Overview

IgxTreeGrid서포트multi-column headers는 열을 공통의 다중 헤더 아래에 배치하여 그룹화할 수 있게 해줍니다. 각 다중 열 헤더 그룹은 Material UI 그리드 내 다른 그룹이나 열의 조합을 표현할 수 있습니다.

Angular Tree Grid Multi-column Headers Overview Example

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

Multi-column Header Template

격자의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 칼럼 그룹은 지시문이 새겨ng-template 진 태그를 기대igxHeader 합니다. 이ng-template는 맥락으로 열(column group) 객체를 제공합니다.

...
<igx-column-group header="General Information">
    <ng-template igxHeader let-columnGroup>
        {{ columnGroup.header | uppercase }}
    </ng-template>
    ...
</igx-column-group>
...

여러 열 그룹에 단일 템플릿을 재사용하고 싶다면, 열 그룹의 속성을 다음과 같이 설정할headerTemplate 수 있습니다:

<ng-template #columnGroupHeaderTemplate let-columnGroup>
    {{ columnGroup.header | uppercase }}
</ng-template>

...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
...

Note

열 헤더가 다시 템플릿화되고 그리드 이동이 활성화된 경우 템플릿 요소에서 해당 열의 draggable 속성을 false로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

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

스타일링

정렬 동작 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근법을 따라, 우리는 를grid-theme 확장하고 매개변수를 받아들$header-background$header-text-color$header-border-width$header-border-style$header-border-color 이는 새로운 주제를 만듭니다.

$custom-theme: grid-theme(
  $header-background: #e0f3ff,
  $header-text-color: #e41c77,
  $header-border-width: 1px,
  $header-border-style: solid,
  $header-border-color: rgba(0, 0, 0, 0.08)
);

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

마지막 단계는 구성요소 믹스인을 포함하는 것입니다.

@include css-vars($custom-theme);

Demo

Note

샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

API References

Additional Resources

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