Angular 그리드 기둥 고정

하나 이상의 열을 Angular UI 그리드의 왼쪽이나 오른쪽에 고정할 수 있습니다. Ignite UI for Angular의 열 고정을 사용 하면 최종 사용자가 특정 열 순서로 열을 잠글 수 있으며, 이를 통해 그리드를 가로로 스크롤하는 동안 해당 열을 볼 수 있습니다. 머티리얼 UI 그리드에는 그리드의 도구 모음을 통해 열의 고정 상태를 변경하는 데 사용할 수 있는 열 고정 UI가 내장되어 있습니다. 또한 Column Pinning API를 통해 사용자 정의 UI를 정의하고 열의 고정 상태를 변경할 수 있습니다.

Angular Grid Column Pinning Example

Column Pinning API

기둥 고정은 다음을 통해 제어됩니다. pinned의 입력 igx-column. 고정된 열은 기본적으로 Grid의 왼쪽에 렌더링되며 Grid 본문에서 고정 해제된 열의 가로 스크롤을 통해 고정된 상태로 유지됩니다.

<igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" (columnInit)="initColumns($event)"
    (selected)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-grid>

또한 IgxGridComponent의 Grid pinColumn 또는 unpinColumn 메소드를 사용하여 필드 이름으로 열을 고정하거나 고정 해제할 수도 있습니다.

this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');

두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.

열은 가장 오른쪽에 고정된 열의 오른쪽에 고정되어 있습니다. 고정된 열의 순서를 변경하려면 columnPin 이벤트를 구독하고 이벤트 인수의 insertAtIndex 속성을 원하는 위치 인덱스로 변경하면 됩니다.

<igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (columnPin)="columnPinning($event)"></igx-grid>

public columnPinning(event) {
    if (event.column.field === 'Name') {
        event.insertAtIndex = 0;
    }
}

Pinning Position

​pinning 구성 옵션을 통해 열 고정 위치를 변경할 수 있습니다. 열 위치를 시작 또는 끝으로 설정할 수 있습니다. 끝으로 설정하면 열이 고정 해제된 열 뒤의 그리드 끝에서 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있지만 고정된 열은 오른쪽에 고정된 상태로 유지됩니다.

<igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>

public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

Demo

Custom Column Pinning UI

관련 API를 통해 사용자 정의 UI를 정의하고 열의 핀 상태를 변경할 수 있습니다.

도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.

<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'500px'">
    <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
        [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        <ng-template igxHeader>
            <div class="title-inner">
                <span style="float:left">{{col.header}}</span>
                <igx-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
            </div>
        </ng-template>
    </igx-column>
</igx-grid>

사용자 정의 아이콘을 클릭하면 해당 열의 API 메소드를 사용하여 관련 열의 고정 상태를 변경할 수 있습니다.

public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}

Demo

Pinning Limitations

• 열 너비를 백분율(%)로 명시적으로 설정하면 고정된 열이 있을 때 그리드 본문과 헤더 콘텐츠가 잘못 정렬됩니다. 열 고정이 올바르게 작동하려면 열 너비가 픽셀(px) 단위이거나 그리드에 의해 자동 할당되어야 합니다.

스타일링

igxGrid를 사용하면 Ignite UI for Angular 통해 스타일을 지정할 수 있습니다. 그리드 테마는 그리드의 모든 기능을 사용자 정의할 수 있는 다양한 속성을 노출합니다.

아래 단계에서는 그리드의 고정 스타일을 사용자 정의하는 단계를 진행합니다.

Importing global theme

고정 기능의 사용자 정의를 시작하려면 모든 스타일링 기능과 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

Defining custom theme

다음으로, grid-theme 확장하고 원하는 대로 고정 기능을 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 만듭니다.

$custom-theme: grid-theme(
    /* Pinning properties that affect styling */
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: #FFCD0F,
    $cell-active-border-color: #FFCD0F
    /* add other features properties here... */
);

Defining a custom color palette

위에서 설명한 접근 방식에서는 색상 값이 하드코딩되었습니다. 또는 igx-palette 및 igx-color 기능을 사용하여 더 큰 유연성을 얻을 수 있습니다.
igx-palette 제공된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$primary-color: #292826;
$secondary-color: #ffcd0f;

$custom-palette: palette(
 $primary: $primary-color,
 $secondary: $secondary-color
);

사용자 정의 팔레트가 생성된 후 igx-color 기능을 사용하여 다양한 기본 색상과 보조 색상을 얻을 수 있습니다.

$custom-theme: grid-theme(
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: color($custom-palette, "secondary", 500),
    $cell-active-border-color: color($custom-palette, "secondary", 500)
);

​$custom-theme 이전 섹션과 동일한 속성이 포함되어 있지만 이번에는 색상이 하드코딩되지 않습니다. 대신, 사용자 정의 igx-palette 사용되었으며 색상은 주어진 색상 변형과 함께 기본 색상과 보조 색상을 통해 얻어졌습니다.

Defining custom schemas

더 나아가 스키마의 모든 이점을 갖춘 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성요소에 대해 제공되는 두 개의 사전 정의된 스키마 중 하나를 확장하십시오. 우리의 경우에는 $_light_grid 사용합니다.

$custom-grid-schema: extend($_light-grid,(
    pinned-border-width: 5px,
    pinned-border-style: double,
    pinned-border-color: color:("secondary", 500),
    cell-active-border-color: color:("secondary", 500)
));

사용자 정의 스키마를 적용하려면 light 또는 dark 전역을 확장해야 합니다. 전체 프로세스는 실제로 구성 요소에 사용자 정의 스키마를 제공하고 이를 나중에 해당 구성 요소 테마에 추가하는 것입니다.

$my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));
$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass @include 문을 사용하는 것입니다.

@include grid($custom-theme);

Scoped component theme

사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 방금 정의한 모든 스타일을 전역 스타일 파일에서 사용자 정의 구성 요소의 스타일 파일로 이동할 수 있습니다(index 파일 가져오기 포함).

이렇게 하면 Angular의 ViewEncapsulation으로 인해 스타일이 사용자 정의 구성 요소에만 적용됩니다.

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 그리드 스타일을 지정하려면::ng-deep 사용하여 이 캡슐화를 관통해야 합니다.

Note

문을 a 안에 넣습니다.:host 스타일이 요소에 영향을 미치지 않도록 하는 선택기 밖의 우리의 구성요소:

:host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

Demo

Note

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

API References

• IgxGrid구성 요소
• IgxColumnComponent

Additional Resources

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

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

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