Angular 그리드의 Excel 필터링

그리드 Excel 필터링은 그리드와 같은 모든 Angular 테이블에 대한 필터링 UI와 같은 Excel을 제공합니다.

Angular Grid Excel Style Filtering Example

Usage

그리드 엑셀 필터링을 켜려면 두 개의 입력을 설정해야 합니다. allowFiltering은 true로 설정되어야 하며 filterMode​ ​excelStyleFilter로 설정되어야 합니다.

<igx-grid [data]="data" [autoGenerate]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
</igx-grid>

상호 작용

특정 열에 대한 필터 메뉴를 열려면 헤더에 있는 Angular 필터 아이콘을 클릭해야 합니다. 또한 선택한 헤더에서 Ctrl + Shift + L 조합을 사용할 수 있습니다. 필터링 기능과 함께 열을 정렬, 고정, 이동, 선택 또는 숨길 수 있는 경우 활성화된 기능에 사용할 수 있는 버튼이 표시됩니다.

필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력에서 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 적용 버튼을 클릭하거나 Enter 키를 누를 수 있습니다. 목록 항목을 통해 적용된 필터링은 equals 연산자를 사용하여 필터 표현식을 생성하고 표현식 사이의 논리 연산자는 OR 입니다.

검색창에 내용을 입력하고 필터를 적용하면 검색 기준에 맞는 항목만 선택됩니다. 그러나 현재 필터링된 항목에 항목을 추가하려면 Add current selection to filter 옵션을 선택해야 합니다.

필터를 지우려면 Select All 옵션을 선택한 후 적용 버튼을 클릭하면 됩니다.

다양한 표현식으로 필터를 적용하려면 텍스트 필터를 클릭하면 특정 열에 대해 사용 가능한 모든 필터 연산자가 포함된 하위 메뉴가 열립니다. 그 중 하나를 선택하면 다양한 필터 및 논리 연산자를 사용하여 원하는 만큼 표현식을 추가할 수 있는 사용자 정의 필터 대화 상자가 열립니다. 필터를 지울 수 있는 지우기 버튼도 있습니다.

Configure Menu Features

정렬, 고정 및 숨기기 기능은 해당 입력(sortable, selected, disablePinning, disableHiding)을 사용하여 필터 메뉴에서 제거할 수 있습니다.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="650px" width="100%" [moving]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
    <igx-column field="ProductName" header="Product Name" [sortable]="true" [dataType]="'string'">
    </igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="false" [disablePinning]="true" [disableHiding]="true" [dataType]="'string'">
    </igx-column>
    <igx-column field="UnitPrice" header="Unit Price" [disablePinning]="true" [disableHiding]="true" [sortable]="true" [dataType]="'number'">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date" [sortable]="false"  [dataType]="'date'" [formatter]="formatDate">
    </igx-column>
    <igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'">
    </igx-column>
</igx-grid>

아래 샘플에서 제품 이름 및 단종 열에는 네 가지 기능이 모두 활성화되어 있고, 단위당 수량에는 세 가지 기능이 모두 비활성화되어 있으며, 단가에는 정렬만 있고, 주문 날짜 에는 고정 및 숨기기만 있으며 모두 selectable.

템플릿

열 기능을 비활성화하지 않고 Excel 스타일 필터 메뉴를 추가로 사용자 정의하려면 사용자 정의 템플릿을 사용할 수 있습니다. Excel 스타일 필터 메뉴는 템플릿 작성을 위한 두 가지 지시문을 제공합니다.

• IgxExcelStyleColumnOperationsTemplateDirective- 정렬, 고정 등과 같은 모든 열 작업을 사용하여 영역의 템플릿을 다시 작성합니다.
• IgxExcelStyleFilterOperationsTemplateDirective- 모든 필터 관련 작업으로 영역을 다시 템플릿화합니다.

해당 영역 중 하나만 다시 템플릿화하거나 둘 다 다시 템플릿화할 수 있습니다. 해당 지시문 안에 사용자 정의 콘텐츠를 넣을 수도 있고 내장된 Excel 스타일 필터링 구성 요소를 사용할 수도 있습니다.

다음 코드는 igx-excel-style-header, igx-excel-style-sorting 및 igx-excel-style-search 구성 요소를 사용하여 사용자 정의 Excel 스타일 필터 메뉴를 정의하는 방법을 보여줍니다.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="650px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">

    <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
        <igx-excel-style-column-operations>
            <igx-excel-style-header
                [showPinning]="true"
                [showHiding]="true"
            >
            </igx-excel-style-header>

            <igx-excel-style-sorting></igx-excel-style-sorting>
        </igx-excel-style-column-operations>

        <igx-excel-style-filter-operations>
            <igx-excel-style-search></igx-excel-style-search>
        </igx-excel-style-filter-operations>
    </igx-grid-excel-style-filtering>
    
    ...
</igx-grid>

​igxExcelStyleHeaderIcon 지시문을 사용하여 열 머리글에서 Excel 스타일 필터링 아이콘의 템플릿을 다시 지정할 수도 있습니다.

<igx-grid ...>
    <ng-template igxExcelStyleHeaderIcon>
        <igx-icon>filter_alt</igx-icon>
    </ng-template>
</igx-grid>

사용할 수 있는 Excel 스타일 필터링 구성 요소의 전체 목록은 다음과 같습니다.

• igx-excel-style-header
• igx-excel-style-sorting
• igx-excel-style-moving
• igx-excel-style-pinning
• igx-excel-style-hiding
• igx-excel-style-selecting
• igx-excel-style-clear-filters
• igx-excel-style-conditional-filter
• igx-excel-style-search

Unique Column Values Strategy

Excel 스타일 필터링 대화 상자 내의 목록 항목은 해당 열의 고유 값을 나타냅니다. 이러한 값은 수동으로 제공하고 요청 시 로드할 수 있으며 이는 Grid Remote Data Operations 항목에 설명되어 있습니다.

Formatted Values Filtering Strategy

기본적으로 그리드 구성 요소는 원래 셀 값을 기준으로 데이터를 필터링하지만 경우에 따라 서식이 지정된 값을 기준으로 데이터를 필터링해야 할 수도 있습니다. 이를 위해 FormattedValuesFilteringStrategy 사용할 수 있습니다. 다음 샘플에서는 열의 숫자 값을 문자열로 형식화하고 문자열 값을 기반으로 그리드를 필터링하는 방법을 보여줍니다.

Note

데이터의 동일한 필드에 바인딩된 열이 두 개 이상 있고 열 중 하나에 포맷터가 있는 경우 서식이 지정된 값 필터링 전략이 올바르게 작동하지 않습니다.

External Excel Style filtering

위의 데모에서 볼 수 있듯이 Excel 스타일 필터링 대화 상자의 기본 모양은 그리드 내부에 있습니다. 따라서 이 대화 상자는 필터를 구성할 때만 표시됩니다. 해당 대화 상자를 항상 표시되도록 만드는 방법이 있습니다. 이는 그리드 외부에서 독립 실행형 구성 요소로 사용할 수 있습니다. 아래 데모에서는 Excel 스타일 필터링이 그리드와 별도로 선언됩니다.

Demo

Usage

Excel 스타일 필터링 구성 요소를 구성하려면 해당 column 속성을 그리드 열 중 하나로 설정해야 합니다. 위 샘플에서는 그리드의 열을 표시하는 IgxSelectComponent의 값에 column 속성을 바인딩했습니다.

<igx-select #gridColums value="ProductID">
   <label igxLabel>Columns:</label>
   <igx-select-item *ngFor="let c of grid1.columns" [value]="c.field">
       {{ c.field }}
   </igx-select-item>
</igx-select>

<igx-grid-excel-style-filtering [column]="grid1.getColumnByName(gridColums.value)">
</igx-grid-excel-style-filtering>

External Outlet

그리드의 z-index DOM의 각 그리드에 대해 별도의 스태킹 컨텍스트를 생성합니다. 이렇게 하면 그리드의 모든 하위 요소가 서로 겹치지 않고 의도한 대로 렌더링됩니다. 그러나 그리드 외부로 이동하는 요소(예: Excel 스타일 필터)는 동일한 z-index (예: 서로 아래에 두 개의 그리드가 있음)를 가진 외부 요소와 충돌하여 잘못된 렌더링을 초래합니다. 이 문제에 대한 해결 방법은 오버레이 요소가 항상 맨 위에 표시되도록 허용하는 외부 콘센트 지시문에 outlet 속성을 설정하는 것입니다.

Demo

스타일링

Excel 스타일 필터링 대화 상자의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

Excel 스타일 필터링 대화 상자는 filtering-row-background 변수를 사용하여 그리드 테마에서 배경색을 가져옵니다. 배경을 변경하려면 사용자 정의 테마를 만들어야 합니다.

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

우리는 버튼, 체크박스, 목록, 심지어 드롭다운과 같은 필터링 대화 상자와 같이 Excel 내부에 훨씬 더 많은 구성 요소를 가지고 있습니다. 스타일을 지정하려면 각각에 대해 별도의 테마를 만들어야 합니다.

$dark-button: button-theme(
    $background: #FFCD0F,
    $foreground: #292826,
    $hover-background: #292826,
    $hover-foreground: #FFCD0F
);

$dark-input-group: input-group-theme(
    $box-background: #FFCD0F,
    $idle-text-color: #292826,
    $focused-text-color: #292826,
    $filled-text-color: #292826
);

$custom-list: list-theme(
    $background: #FFCD0F
);

$custom-checkbox: checkbox-theme(
    $empty-color: #292826,
    $fill-color: #292826,
    $tick-color: #FFCD0F,
    $label-color: #292826
);

$custom-drop-down: drop-down-theme(
    $background-color: #FFCD0F,
    $item-text-color: #292826,
    $hover-item-background: #292826,
    $hover-item-text-color: #FFCD0F
);

이 예에서는 나열된 구성요소에 대한 매개변수 중 일부만 변경했지만, button-theme, checkbox-theme, drop-down-theme, input-group-theme, list-theme 테마는 각각의 스타일을 제어하기 위한 훨씬 더 많은 매개변수를 제공합니다. .

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다. 또한 입력 자리 표시자의 색상 속성을 설정합니다.

@include drop-down($custom-drop-down);
@include grid($custom-grid);
.igx-excel-filter, .igx-excel-filter__secondary {
    @include button($dark-button);
    @include input-group($dark-input-group);
    @include list($custom-list);
    @include checkbox($custom-checkbox);
    .igx-input-group__input::placeholder {
        color: #FFCD0F;
    }
}

Note

​.igx-excel-filter 및.igx-excel-filter__secondary 내에서 대부분의 구성 요소 믹스인의 범위를 지정하므로 이러한 사용자 정의 테마는 Excel 스타일 필터링 대화 상자 및 모든 하위 대화 상자에 중첩된 구성 요소에만 영향을 미칩니다. 그렇지 않으면 다른 버튼, 확인란, 입력 그룹 및 목록도 영향을 받습니다.

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

:host {
    ::ng-deep {
        @include drop-down($custom-drop-down);
        @include grid($custom-grid);
        .igx-excel-filter, .igx-excel-filter__secondary {
            @include button($dark-button);
            @include input-group($dark-input-group);
            @include list($custom-list);
            @include checkbox($custom-checkbox);
            .igx-input-group__input::placeholder {
                color: #FFCD0F;
            }
        }
    }
}

Defining a color palette

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

$dark-button: button-theme(
    $background: color($dark-palette, "secondary", 400),
    $foreground: color($dark-palette, "primary", 400),
    $hover-background: color($dark-palette, "primary", 400),
    $hover-foreground: color($dark-palette, "secondary", 400)
);

$dark-input-group: input-group-theme(
    $box-background: color($dark-palette, "secondary", 400),
    $idle-text-color: color($dark-palette, "primary", 400),
    $focused-text-color: color($dark-palette, "primary", 400),
    $filled-text-color: color($dark-palette, "primary", 400)
);

$custom-list: list-theme(
    $background: color($dark-palette, "secondary", 400)
);

$custom-checkbox: checkbox-theme(
    $empty-color: color($dark-palette, "primary", 400),
    $fill-color: color($dark-palette, "primary", 400),
    $tick-color: color($dark-palette, "secondary", 400),
    $label-color: color($dark-palette, "primary", 400)
);

$custom-drop-down:drop-down-theme(
    $background-color: color($dark-palette, "secondary", 400),
    $item-text-color: color($dark-palette, "primary", 400),
    $hover-item-background: color($dark-palette, "primary", 400),
    $hover-item-text-color: color($dark-palette, "secondary", 400)
);

Note

​igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using Schemas

테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

모든 구성 요소(이 경우 light-grid, light-input-group, light-button, light-list, light-checkbox 및 light-drop-down 스키마)에 대해 제공되는 두 가지 사전 정의된 스키마 중 하나를 확장합니다.

$custom-grid-schema: extend($_light-grid,
    (
        filtering-row-background:(
           color: ("secondary", 400)
        )
    )
);

$custom-button-schema: extend($_light-button,
    (
        flat-background:(
           color: ("secondary", 400)
        ),
        flat-text-color:(
           color: ("primary", 400)
        ),
        flat-hover-background:(
           color: ("primary", 400)
        ),
        flat-hover-text-color:(
           color: ("secondary", 400)
        ),

        contained-background:(
           color: ("secondary", 400)
        ),
        contained-text-color:(
           color: ("primary", 400)
        ),
        contained-hover-background:(
           color: ("primary", 400)
        ),
        contained-hover-text-color:(
           color: ("secondary", 400)
        )
    )
);

$custom-input-group-schema: extend($_light-input-group,
    (
        box-background:(
           color: ("secondary", 400)
        ),
        idle-text-color:(
           color: ("primary", 400)
        ),
        focused-text-color:(
           color: ("primary", 400)
        ),
        filled-text-color:(
           color: ("primary", 400)
        )
    )
);

$custom-list-schema: extend($_light-list,
    (
        background:(
           color: ("secondary", 400)
        )
    )
);

$custom-checkbox-schema: extend($_light-checkbox,
    (
        empty-color:(
           color: ("primary", 400)
        ),
        fill-color:(
           color: ("primary", 400)
        ),
        tick-color:(
           color: ("secondary", 400)
        ),
        label-color:(
           color: ("primary", 400)
        )
    )
);

$custom-drop-down-schema: extend($_light-drop-down,
    (
        background-color:(
           color: ("secondary", 400)
        ),
        item-text-color:(
           color: ("primary", 400)
        ),
        hover-item-background:(
           color: ("primary", 400)
        ),
        hover-item-text-color:(
           color: ("secondary", 400)
        )
    )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

$custom-light-schema: extend($light-schema,(
   grid: $custom-grid-schema,
   button: $custom-button-schema,
   input-group: $custom-input-group-schema,
   list: $custom-list-schema,
   checkbox: $custom-checkbox-schema,
   drop-down: $custom-drop-down-schema
));

$custom-grid: grid-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-button: button-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-input-group: input-group-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-list: list-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-checkbox: checkbox-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-drop-down: drop-down-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

Demo

Note

샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

API References

• IgxColumnComponent
• IgxGridComponent API
• IgxGrid구성 요소 스타일

Additional Resources

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

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

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