각도 Angular 열 고정

열 또는 여러 열을 Angular UI Grid의 왼쪽 또는 오른쪽에 고정할 수 있습니다. Ignite UI for Angular의 열 고정을 사용하면 최종 사용자가 특정 열 순서로 열을 잠글 수 있으므로 Grid를 수평으로 스크롤하는 동안 해당 열을 볼 수 있습니다. Material UI Grid에는 내장된 열 고정 UI가 있어 Grid의 도구 모음을 통해 열의 고정 상태를 변경할 수 있습니다. 또한 사용자 지정 UI를 정의하고 Column Pinning API를 통해 열의 고정 상태를 변경할 수 있습니다.

Angular Grid Column Pinning Example

Column Pinning API

Column pinning is controlled through the pinned input of the igx-column. Pinned columns are rendered on the left side of the Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Grid body.

<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>

You may also use the Grid's pinColumn or unpinColumn methods of the IgxGridComponent to pin or unpin columns by their field name:

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

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

A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the columnPin event and changing the insertAtIndex property of the event arguments to the desired position index.

<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 열의 고정 위치를 변경할 수 있습니다. 열의 위치를 시작 또는 끝으로 설정할 수 있습니다. End로 설정하면 열은 고정되지 않은 열들 다음, 그리드 끝에 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있고, 고정된 열은 오른쪽에 고정되어 있습니다.

<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

To begin the customization of the Pinning feature, you need to import the index file, where all styling functions and mixins are located.

@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

Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the Pinning feature as desired.

$custom-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);

Note

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

Applying the custom theme

The easiest way to apply your theme is with a sass @include statement in the global styles file:

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

Demo

Note

샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

API References

• IgxGrid구성 요소
• IgxColumnComponent

Additional Resources

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

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

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