Angular 그리드 열 숨기기

The Ignite UI for Angular Grid provides an IgxColumnActionsComponent with an IgxColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

Angular Grid Column Hiding Example

Grid Setup

그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.

<!--columnHiding.component.html-->

<igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'ID'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-grid>

Toolbar's Column Hiding UI

The built-in Column Hiding UI is placed inside an IgxDropDownComponent in the Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the IgxGridToolbarActionsComponent and the IgxGridToolbarHidingComponent inside of the Grid. We will also add a title to our toolbar by using the IgxGridToolbarTitleComponent and a custom style for our Grid's wrapper.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-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-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

The Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the igx-grid-toolbar-hiding title property, we will set the title that is displayed inside the dropdown button in the toolbar.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-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-grid>
</div>

IgxGridToolbarHidingComponent의 속성을 사용columnsAreaMaxHeight 해 열 동작이 포함된 영역의 최대 높이를 설정할 수 있습니다. 이렇게 하면 많은 액션이 있고 모두 컨테이너에 들어가지 못하면 스크롤바가 나타나 원하는 액션으로 스크롤할 수 있습니다.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

열 숨기기 UI의 확장 기능 집합을 사용하려면 IgxColumnActionsComponent의columnsAreaMaxHeight 속성을 사용할 수 있습니다. 이렇게 하면 저희 애플리케이션의 요구사항에 맞게 사용할 수 있습니다.

이 문서의 시작 부분에 있는 Angular 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.

Custom Column Hiding UI

예를 들어, 수동으로 정의IgxColumnActionsComponent 하고 목적을 알도록 추가IgxColumnHidingDirective 한 후 페이지 어디에나 배치하고 싶다고 합시다. 하지만 먼저, 우리는 수입해야 합니다.IgxColumnActionsModule​

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular/grids/core';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxColumnActionsModule],
})
export class AppModule {}

Now let's create our IgxColumnActionsComponent. In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the columns property of the component to the columns of our Grid and include some custom styles to make our application look even better!

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-grid #grid [data]="data" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-grid>
</div>

/* 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;    
}

Add title and filter prompt

컬럼 숨기기 구성 요소의 사용자 경험을 풍부하게 하기 위해 할 수 있는 몇 가지 추가 방법은 와 의title 속성을 설정filterColumnsPrompt 하는 것입니다. 는title 상단에 표시되며, 열filterColumnsPrompt을 숨기는 UI의 필터 입력에 표시되는 프롬프트 텍스트입니다.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-actions>
</div>

Add column display order options

또한 사용자가 열 숨기기 UI에서 열의 표시 순서를 선택할 수 있도록 허용할 수 있습니다. 이를 위해 열거형 속성인 다음columnDisplayOrder 옵션을 사용할 것입니다:

• 알파벳순 (열을 알파벳순으로 정렬)
• DisplayOrder (그리드에 표시되는 방식에 따라 열 순서 지정)

옵션에 맞게 멋지게 디자인된 라디오 버튼 몇 개를 만들어 보겠습니다! 계속해서 IgxRadio 모듈을 구하면 됩니다.

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular/radio';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

이제 각각 다른 조건으로 두 라디오 버튼의 속성을 바인딩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>

Disable hiding of a column

사용자가 열을 숨기기 UI에서 열을 숨기는 것을 쉽게 막을 수 있는데, 단순히 속성 속성을 true로 설정disableHiding 하면 됩니다.

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-grid ... >
        ...
        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-grid>
</div>

모든 것이 잘 진행되었다면 UI 구성요소를 숨기는 열은 다음과 같습니다.

스타일링

열 작업 구성 요소의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.

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

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

가장 단순한 방법을 사용해 새로운 주제를 만들어column-actions-theme 그리고 다음을 받아들입니다.$title-color 그리고$background-color 매개변수.

$custom-column-actions-theme: column-actions-theme(
  $background-color: #292826,
  $title-color: #ffcd0f
);

보시다시피,column-actions-theme 컬럼 액션 컨테이너의 색상만 제어하며, 버튼, 체크박스, 입력 그룹에는 영향을 주지 않습니다. 버튼 스타일도 맞추고 싶으니 새 버튼 테마를 만들겠습니다:

$custom-button: button-theme(
  $foreground: #292826, 
  $disabled-foreground: rgba(255, 255, 255, .54)
);

Note

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

이 예시에서는 플랫 버튼의 텍스트 색상과 버튼 색상만 변경했지만,button-theme 버튼 스타일을 제어할 수 있는 매개변수가 훨씬 더 많아졌습니다.

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.

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

.igx-column-actions {
  @include css-vars($custom-button);
}

Note

생성된 버튼 테마​.igx-column-actions를 포함하여, 열에 숨기는 버튼만 스타일링할 수 있습니다. 그렇지 않으면 그리드 내 다른 버튼들도 영향을 받을 수 있습니다.

Note

만약 컴포넌트가 뷰 캡슐화를Emulated 사용한다면, 컬럼 액션 컴포넌트 내 컴포넌트들(버튼, 체크박스 등)에 대해 이 캡슐화penetrate를::ng-deep 사용해야 합니다. 등):

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

:host {
  ::ng-deep {
    .igx-column-actions {
      @include css-vars($custom-button);
    }
  }
}

Demo

API References

이 문서에서는 Grid 툴바에서 내장된 열 숨기기 UI를 사용하는 방법을 알아보았고 이를 별도의 구성 요소로 정의했습니다. 사용자가 다양한 열 순서 중에서 선택할 수 있는 UI를 도입했고, 자체 사용자 정의 제목과 필터 프롬프트 텍스트를 설정했습니다. 또한 Ignite UI for Angular IgxRadio 버튼도 추가로 사용했습니다.

열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

• IgxColumnActions구성 요소
• IgxColumnActions구성 요소 스타일

사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

IgxGridComponent properties:

• 숨겨진열 개수

IgxColumnComponent properties:

• 비활성화숨기기

IgxGridToolbarComponent properties:

• 진행률 표시

IgxGridToolbarComponent components:

• IgxGridToolbarTitleComponent
• IgxGridToolbarActionsComponent

IgxGridToolbarComponent methods:

IgxGridComponent events:

• 열 가시성이 변경됨

IgxRadioComponent

Styles:

• IgxGrid구성 요소 스타일
• IgxRadioComponent 스타일

Additional Resources

• 그리드 개요
• 가상화 및 성능
• 필터링
• 페이징
• 정렬
• 요약
• 열 고정
• 열 크기 조정
• 선택

• 수색

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

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular