Angular Tree Grid Column Hiding
Ignite UI for Angular 트리 그리드는 사용자가 사용자 인터페이스를 통해 직접 또는 Angular 구성 요소를 사용하여 열 숨기기를 수행할 수 있는 기능을 제공합니다 IgxColumnActionsComponent
IgxColumnHidingDirective
. 머티리얼 UI 그리드에는 열 숨김 UI가 내장되어 있으며, 트리 그리드의 툴바를 통해 열의 표시 상태를 변경하는 데 사용할 수 있습니다. 또한 개발자는 항상 열 숨김 UI를 별도의 구성 요소로 정의하고 페이지에서 원하는 위치에 배치할 수 있습니다.
Angular 트리 그리드 열 숨기기 예제
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
트리 그리드 설정
트리 그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.
<!--columnHiding.component.html-->
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%"
height="560px" columnWidth="200px" [allowFiltering]="true">
<igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
<igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
<igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-tree-grid>
html
툴바의 열 숨기기 UI
내장된 열 숨기기 UI는 트리 그리드 도구 모음의 IgxDropDownComponent
내부에 배치됩니다. 이 정확한 드롭다운을 사용하여 열 숨기기 UI를 표시하거나 숨길 수 있습니다. 이를 위해 우리가 해야 할 일은 트리 그리드 내부에 IgxGridToolbarActionsComponent
와 IgxGridToolbarHidingComponent
모두 설정하는 것뿐입니다. 또한 IgxGridToolbarTitleComponent
와 Tree Grid 래퍼의 사용자 정의 스타일을 사용하여 도구 모음에 제목을 추가하겠습니다.
<!--columnHiding.component.html-->
<div class="grid__wrapper">
<igx-tree-grid ...>
<igx-grid-toolbar>
<igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
...
</igx-tree-grid>
</div>
html
/* columnHiding.component.css */
.grid__wrapper {
margin: 10px;
}
css
트리 그리드는 도구 모음의 열 숨기기 UI를 사용할 때 몇 가지 유용한 속성을 제공합니다. igx-grid-toolbar-hiding
title
속성을 사용하여 툴바의 드롭다운 버튼 내부에 표시되는 제목을 설정하겠습니다.
<!--columnHiding.component.html-->
<div class="grid__wrapper">
<igx-tree-grid>
<igx-grid-toolbar>
<igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
</igx-tree-grid>
</div>
html
IgxGridToolbarHidingComponent의 columnsAreaMaxHeight
속성을 사용하면 열 작업이 포함된 영역의 최대 높이를 설정할 수 있습니다. 이렇게 하면 작업이 많고 모든 작업이 컨테이너에 들어갈 수 없는 경우 스크롤바가 나타나 원하는 작업으로 스크롤할 수 있습니다.
// columnHiding.component.ts
public ngAfterViewInit() {
this.hidingActionRef.columnsAreaMaxHeight = "200px";
}
typescript
열 숨김 UI에 대한 확장된 기능 세트를 사용하기 위해 IgxColumnActionsComponent의 columnsAreaMaxHeight
속성을 사용할 수 있습니다. 이렇게 하면 애플리케이션의 요구 사항에 따라 사용할 수 있습니다.
이 문서의 시작 부분에 있는 Angular 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.
사용자 정의 열 숨기기 UI
IgxColumnActionsComponent
를 수동으로 정의하고 IgxColumnHidingDirective
추가하여 해당 목적이 무엇인지 파악하고 페이지의 아무 곳에나 배치한다고 가정해 보겠습니다. 그러나 먼저 IgxColumnActionsModule
을 가져와야 합니다.
// app.module.ts
...
import {
...
IgxColumnActionsModule
} from 'igniteui-angular';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxColumnActionsModule],
})
export class AppModule {}
typescript
이제 IgxColumnActionsComponent
를 만들어 보겠습니다. 우리 애플리케이션에서는 이를 그리드 옆에 배치할 것입니다(구성 요소가 설계상 드롭다운 내부에 있는 툴바의 열이 UI를 숨기는 경우는 그렇지 않습니다). 또한 구성 요소의 columns
속성을 트리 그리드의 열로 설정하고 일부 사용자 정의 스타일을 포함하여 애플리케이션을 더욱 멋지게 만들 것입니다!
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
<igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns">
</igx-column-actions>
</div>
<div class="gridContainer">
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
...
</igx-tree-grid>
</div>
html
/* columnHiding.component.css */
.grid__wrapper {
margin: 15px;
display: flex;
flex-direction: row;
}
.columnHidingContainer {
min-width: 250px;
height: 560px;
display: flex;
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
border: 1px gray;
border-radius: 10px;
box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
igx-column-actions {
height: 460px;
}
}
.columnsOrderOptionsContainer {
margin-top: 20px;
margin-bottom: 20px;
}
.gridContainer {
width: 100%;
min-width: 200px;
display: flex;
flex-direction: column;
margin-left: 30px;
}
css
제목 및 필터 프롬프트 추가
열 숨김 구성 요소의 사용자 경험을 풍부하게 하기 위해 할 수 있는 몇 가지 추가 작업은 title
과 filterColumnsPrompt
속성을 설정하는 것입니다. title
상단에 표시되고 filterColumnsPrompt
는 열 숨김 UI의 필터 입력에 표시되는 프롬프트 텍스트입니다.
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
<igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns"
title="Column Hiding" filterColumnsPrompt="Type here to search">
</igx-column-actions>
</div>
html
열 표시 순서 옵션 추가
또한 사용자가 열 숨김 UI에서 열 표시 순서를 선택하도록 허용할 수도 있습니다. 이를 위해 열거형 속성이고 다음 옵션이 있는 columnDisplayOrder
속성을 사용합니다.
- 알파벳순 (열을 알파벳순으로 정렬)
- DisplayOrder (트리 그리드에 표시되는 방식에 따라 열 순서 지정)
옵션에 맞게 멋지게 디자인된 라디오 버튼 몇 개를 만들어 보겠습니다! 계속해서 IgxRadio 모듈을 구하면 됩니다.
// app.module.ts
...
import {
...
IgxRadioModule
} from 'igniteui-angular';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
})
export class AppModule {}
typescript
이제 우리가 해야 할 일은 두 라디오 버튼의 checked
속성을 각각 다른 조건으로 바인딩하고 클릭 이벤트를 처리하는 것입니다.
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
...
<div class="columnsOrderOptionsContainer">
<igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
(click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
Alphabetical order
</igx-radio>
<igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
(click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
Display order
</igx-radio>
</div>
</div>
html
열 숨기기 비활성화
단순히 disableHiding
속성을 true로 설정하면 사용자가 열 숨김 UI를 통해 열을 숨기는 것을 쉽게 방지할 수 있습니다.
<!--columnHiding.component.html-->
<div class="gridContainer">
<igx-tree-grid ... >
...
<igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
...
</igx-tree-grid>
</div>
html
모든 것이 잘 진행되었다면 UI 구성요소를 숨기는 열은 다음과 같습니다.
스타일링
열 작업 구성 요소의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
가장 간단한 접근 방식을 사용하여 column-actions-theme
확장하고 $title-color
및 $background-color
매개 변수를 허용하는 새 테마를 만듭니다.
$custom-column-actions-theme: column-actions-theme(
$background-color: #292826,
$title-color: #ffcd0f
);
scss
보시다시피, column-actions-theme
열 작업 컨테이너의 색상만 제어하지만 그 안에 있는 버튼, 확인란 및 입력 그룹에는 영향을 미치지 않습니다. 버튼에도 스타일을 지정하고 싶으므로 새 버튼 테마를 생성하겠습니다.
$custom-button: button-theme(
$foreground: #292826,
$disabled-foreground: rgba(255, 255, 255, .54)
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
이 예에서는 플랫 버튼의 텍스트 색상과 버튼 비활성화 색상만 변경했지만 button-theme
버튼 스타일을 제어할 수 있는 훨씬 더 많은 매개변수를 제공합니다.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($custom-column-actions-theme);
.igx-column-actions {
@include css-vars($custom-button);
}
scss
생성된 button-theme를 내부에.igx-column-actions
포함시켜 열 숨김 버튼만 스타일이 지정되도록 합니다. 그렇지 않으면 그리드의 다른 버튼도 영향을 받습니다.
구성 요소가 를 사용하는 경우 Emulated
ViewEncapsulation을 사용하려면 다음이 필요합니다. penetrate
이 캡슐화는 다음을 사용합니다.::ng-deep
Column Action 구성 요소 내부의 구성 요소(buttons, checkboxes ... 등):
@include css-vars($custom-column-actions-theme);
:host {
::ng-deep {
.igx-column-actions {
@include css-vars($custom-button);
}
}
}
scss
데모
API 참조
이 기사에서는 트리 그리드의 도구 모음에서 기본 제공 열 숨김 UI를 사용하는 방법을 배웠고 이를 별도의 구성 요소로도 정의했습니다. 사용자가 다양한 열 순서 중에서 선택할 수 있는 UI를 도입했으며 고유한 사용자 지정 제목을 설정하고 프롬프트 텍스트를 필터링했습니다. 또한 추가 Ignite UI for Angular 구성 요소인 IgxRadio 버튼을 사용했습니다.
열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
IgxTreeGridComponent
properties:
IgxColumnComponent
properties:
IgxGridToolbarComponent
properties:
IgxGridToolbarComponent
components:
IgxGridToolbarComponent
methods:
IgxTreeGridComponent
events:
Styles: