Angular Tree Grid Multi-column Headers Overview
IgxTreeGrid
multi-column headers
지원하므로 공통 다중 헤더 아래에 열을 배치하여 그룹화할 수 있습니다. 각 다중 열 헤더 그룹은 Material UI 그리드 내의 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다.
Angular Tree Grid 다중 열 헤더 개요 예제
import { Component, ViewChild } from '@angular/core' ;
import { GridSelectionMode, IgxTreeGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-multi-column-headers-sample' ,
styleUrls : ['./tree-grid-multi-column-headers-sample.component.scss' ],
templateUrl : './tree-grid-multi-column-headers-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective]
})
export class TreeGridMultiColumnHeadersSampleComponent {
@ViewChild (IgxTreeGridComponent, { read : IgxTreeGridComponent, static : true })
public treeGrid: IgxTreeGridComponent;
public data = generateEmployeeDetailedFlatData();
public selectionMode: GridSelectionMode = 'none' ;
public pinUnpinGroup ( ) {
const firstColumnGroup = this .treeGrid.columnList.filter((c ) => c.header === 'General Information' )[0 ];
firstColumnGroup.pinned = !firstColumnGroup.pinned;
}
public showHideGroup ( ) {
const firstColumnGroup = this .treeGrid.columnList.filter((c ) => c.header === 'General Information' )[0 ];
firstColumnGroup.hidden = !firstColumnGroup.hidden;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" [moving ]="true" foreignKey ="ParentID" [rowSelection ]="selectionMode" height ="480px"
[allowFiltering ]="true" width ="100%" >
<igx-column field ="Name" dataType ="string" [sortable ]="true" [resizable ]="true" width ="200px" > </igx-column >
<igx-column-group [pinned ]="false" header ="General Information" >
<igx-column field ="HireDate" dataType ="date" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column-group header ="Personal 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-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="City" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Address" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
<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-column-group >
<igx-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="City" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Address" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
<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-column-group >
<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 >
<section class ="button-section" >
<button igxButton ="contained" (click )="pinUnpinGroup()" > Pin/Unpin 'General Information' group</button >
<button igxButton ="contained" (click )="showHideGroup()" > Show/Hide 'General Information' group</button >
</section >
</div >
html コピー .grid__wrapper {
--ig-size: var(--ig-size-small);
margin : 10px ;
}
.igx-button--contained {
margin-right : 5px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Multi-column header
선언은 header
제목이 전달된 igx-column-group
구성 요소에 열 집합을 래핑하여 수행할 수 있습니다.
<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 >
html
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 >
html
모든 igx-column-group
moving
, pinning
및 hiding
지원합니다.
일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 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 >
html
다중 열 헤더 템플릿
그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 열 그룹에는 igxHeader
지시문으로 장식된 ng-template
태그가 필요합니다. ng-template
열 그룹 개체와 함께 컨텍스트로 제공됩니다.
...
<igx-column-group header ="General Information" >
<ng-template igxHeader let-columnGroup >
{{ columnGroup.header | uppercase }}
</ng-template >
...
</igx-column-group >
...
html
여러 열 그룹에 대해 단일 템플릿을 재사용하려면 다음과 같이 열 그룹의 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 >
...
html
열 헤더가 다시 템플릿화되고 그리드 이동이 활성화된 경우 템플릿 요소에서 해당 열의 draggable 속성을 false 로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!
<ng-template igxHeader >
<igx-icon [attr.draggable ]="false" (click )="onClick()" > </igx-icon >
</ng-template >
html
다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.
import { Component, ViewChild } from '@angular/core' ;
import { GridSelectionMode, IgxColumnGroupComponent, IgxTreeGridComponent, IgxIconComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-multi-column-header-template-sample' ,
styleUrls : ['./tree-grid-multi-column-header-template-sample.component.scss' ],
templateUrl : './tree-grid-multi-column-header-template-sample.component.html' ,
imports : [IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent]
})
export class TreeGridMultiColumnHeaderTemplateSampleComponent {
@ViewChild (IgxTreeGridComponent, { read : IgxTreeGridComponent, static : true })
public treeGrid: IgxTreeGridComponent;
public data: any [] = generateEmployeeDetailedFlatData();
public columnGroupStates = new Map <IgxColumnGroupComponent, boolean >();
public selectionMode: GridSelectionMode = 'none' ;
constructor ( ) {
for (const item of this .data) {
item.Location = `${item.Address} , ${item.City} , ${item.Country} ` ;
}
}
public toggleColumnGroup (columnGroup: IgxColumnGroupComponent ) {
const columns = columnGroup.childColumns;
if (columnGroup.header === 'General Information' ) {
const col = columns[1 ];
col.hidden = !col.hidden;
} else if (columnGroup.header === 'Address Information' ) {
for (const col of columns) {
col.hidden = !col.hidden;
}
}
this .columnGroupStates.set(columnGroup, !this .columnGroupStates.get(columnGroup));
}
}
ts コピー <div class ="grid__wrapper" >
<ng-template #columnGroupTemplate let-col >
<div class ="column-group-template__container" >
<igx-icon [attr.draggable ]="false"
(click )="toggleColumnGroup(col)"
class ="column-group-template__icon" >
{{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon >
{{col.header}}
</div >
</ng-template >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" [moving ]="true" foreignKey ="ParentID" [rowSelection ]="selectionMode" height ="520px"
[allowFiltering ]="true" width ="100%" >
<igx-column field ="Name" dataType ="string" [sortable ]="true" [resizable ]="true" width ="200px" > </igx-column >
<igx-column-group [pinned ]="false" header ="General Information" [headerTemplate ]="columnGroupTemplate" >
<igx-column field ="HireDate" dataType ="date" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column-group header ="Personal 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-column-group header ="Address Information" [headerTemplate ]="columnGroupTemplate" >
<igx-column [sortable ]="true" [resizable ]="true" field ="Location" [hidden ]="true" > </igx-column >
<igx-column [sortable ]="true" [resizable ]="true" field ="Phone" [hidden ]="true" > </igx-column >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="City" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Address" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
<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-column-group >
</igx-tree-grid >
</div >
html コピー .grid__wrapper {
--ig-size: var(--ig-size-small);
margin : 10px ;
}
.column-group-template__container {
display : flex;
align-items : center;
}
.column-group-template__icon {
cursor : pointer;
}
scss コピー
스타일링
정렬 동작 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
가장 간단한 접근 방식에 따라 우리는 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 )
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
마지막 단계는 구성요소 믹스인을 포함하는 것입니다.
@include css-vars($custom-theme );
scss
데모
import { Component } from '@angular/core' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxTreeGridComponent, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-multi-column-headers-styling' ,
styleUrls : ['./tree-grid-multi-column-headers-styling.component.scss' ],
templateUrl : './tree-grid-multi-column-headers-styling.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent]
})
export class TreeGridMultiColumnHeadersStylingComponent {
public data = generateEmployeeDetailedFlatData();
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" height ="480px" width ="100%" >
<igx-column field ="Name" dataType ="string" width ="200px" > </igx-column >
<igx-column-group header ="General Information" >
<igx-column field ="HireDate" dataType ="date" > </igx-column >
<igx-column-group header ="Personal Details" >
<igx-column field ="ID" dataType ="number" > </igx-column >
<igx-column field ="Title" dataType ="string" > </igx-column >
<igx-column field ="Age" dataType ="number" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" > </igx-column >
<igx-column field ="City" dataType ="string" > </igx-column >
<igx-column field ="Address" dataType ="string" > </igx-column >
</igx-column-group >
<igx-column-group header ="Contact Information" >
<igx-column field ="Phone" dataType ="string" > </igx-column >
<igx-column field ="Fax" dataType ="string" > </igx-column >
<igx-column field ="PostalCode" dataType ="string" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" > </igx-column >
<igx-column field ="City" dataType ="string" > </igx-column >
<igx-column field ="Address" dataType ="string" > </igx-column >
</igx-column-group >
<igx-column-group header ="Contact Information" >
<igx-column field ="Phone" dataType ="string" > </igx-column >
<igx-column field ="Fax" dataType ="string" > </igx-column >
<igx-column field ="PostalCode" dataType ="string" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-column-group header ="Contact Information" >
<igx-column field ="Phone" dataType ="string" > </igx-column >
<igx-column field ="Fax" dataType ="string" > </igx-column >
<igx-column field ="PostalCode" dataType ="string" > </igx-column >
</igx-column-group >
</igx-tree-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$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 )
);
@include css-vars($custom-theme );
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.