Angular 그리드 행 고정
한 행 또는 여러 행을 Angular UI 그리드의 상단이나 하단에 고정할 수 있습니다. Ignite UI for Angular의 행 고정은 사용자가 특정 순서로 행을 고정할 수 있게 해주며, 그리드를 수직으로 스크롤해도 항상 보이는 특별한 영역에 중복 배치할 수 있습니다. Material UI Grid에는 Grid 컨텍스트에서 컴포넌트를igxActionStrip 초기화함으로써 활성화되는 내장 행 고정 UI가 있습니다. 또한, Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 핀 상태를 변경할 수 있습니다.
Angular Grid Row Pinning Example
Row Pinning UI
내장 행 고정 UI는 컴포넌트를 추가igxActionStripGridPinningActions 하면 활성화됩니다. 액션 스트립은 행을 마우스로 올리면 자동으로 표시되며, 해당 행의 상태에 따라 핀 또는 핀 해제 버튼 아이콘이 표시됩니다. 고정된 행의 복사본을 스크롤하여 볼 수 있는 추가 동작도 각 고정된 행마다 표시됩니다.
<igx-grid [data]="data" [autoGenerate]="false">
<igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
</igx-column>
<igx-action-strip #actionStrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>
</igx-grid>
Row Pinning API
행 핀닝은 입력을 통해pinnedrow 제어됩니다. 고정된 행은 기본적으로 그리드 상단에 렌더링되며, 고정되지 않은 행의 수직 스크롤을 통해 고정 상태를 유지합니다.
this.grid.getRowByIndex(0).pinned = true;
또한 Grid 또는pinRow 해당 메서드unpinRow를 사용하여 ID에 따라 기록을IgxGridComponent 고정하거나 해제할 수도 있습니다:
this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');
행 ID는 그리드의 주요primaryKey 키 값, 즉 레코드 인스턴스 자체에 의해 정의된다는 점에 유의하세요. 두 메서드 모두 해당 연산이 성공했는지 여부를 나타내는 불리언 값을 반환합니다. 보통 실패하는 이유는 행이 이미 원하는 상태에 있기 때문입니다.
한 줄은 마지막 고정된 줄 아래에 고정됩니다. 고정된 행의 순서를 변경하려면 이벤트에rowPinning 가입하고 이벤트 인자의 속성을 원하는 위치 인덱스로 변경insertAtIndex 하면 가능합니다.
<igx-grid #grid1 [data]="data" [autoGenerate]="true" (rowPinning)="rowPinning($event)">
</igx-grid>
public rowPinning(event) {
event.insertAtIndex = 0;
}
Pinning Position
설정 옵션을 통해pinning 행 고정 위치를 변경할 수 있습니다. 핀 영역 위치를 상단 또는 하단으로 설정할 수 있습니다. 아래쪽으로 설정하면 고정되지 않은 행 다음, 그리드 하단에 렌더링됩니다. 고정되지 않은 행은 세로로 스크롤할 수 있고, 고정된 행은 하단에 고정되어 있습니다.
<igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
Custom Row Pinning UI
사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.
Via extra column with icon
액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.
<igx-grid [data]="data" [primaryKey]="'ID'" [autoGenerate]="false">
<igx-column width="70px">
<ng-template igxCell let-cell="cell" let-val>
<igx-icon class="pin-icon" (mousedown)="togglePinning(cell.row, $event)">
{{cell.row.pinned ? 'lock' : 'lock_open'}}
</igx-icon>
</ng-template>
</igx-column>
<igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
</igx-column>
</igx-grid>
사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.
public togglePinning(row: IgxGridRow, event) {
event.preventDefault();
if (row.pinned) {
row.unpin();
} else {
row.pin();
}
}
데모
Via row drag
고정된 행과 고정 해제된 행 사이에 행을 직접 끌어서 놓아 핀 상태를 변경할 수 있다고 가정해 보겠습니다. 이는 행 끌기 기능을 활성화하고 놓을 때 API를 통해 행을 고정/고정 해제하여 수행할 수 있습니다.
먼저, 그리드를 디렉티브를 사용igxDrop 해 드롭 구역으로 표시하고, 해당 옵션을 통해rowDraggable 행 드래그 기능을 활성화해야 합니다.
<igx-grid [data]="data" [autoGenerate]="true" [rowDraggable]="true"
[primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
</igx-grid>
그 다음 이벤트를dropped 사용해 재정렬과 핀/핀 해제 로직을 처리할 수 있습니다.
public onDropAllowed(args) {
const event = args.originalEvent;
let currRowPinnedIndex;
const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
{ x: event.clientX, y: event.clientY });
if (currRowIndex === -1) { return; }
const currRowID = this.getCurrentRowID(this.grid.rowList.toArray(),
{ x: event.clientX, y: event.clientY });
const currentRow = this.grid.rowList.toArray().find((r) => r.rowID === currRowID);
if (currentRow.pinned) {
currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.rowID === currRowID));
}
// remove the row that was dragged and place it onto its new location
this.grid.deleteRow(args.dragData.key);
this.data.splice(currRowIndex, 0, args.dragData.data);
if (currentRow.pinned && !args.dragData.pinned) {
this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
} else if (!currentRow.pinned && args.dragData.pinned) {
this.grid.unpinRow(args.dragData.key);
} else if (currentRow.pinned && args.dragData.pinned) {
this.grid.unpinRow(args.dragData.key);
this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
}
}
이렇게 하면 행을 다시 정렬하고 고정된 행 컬렉션과 고정 해제된 행 컬렉션 간에 이동할 수 있습니다.
데모
Row Pinning Limitations
- 데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
- 행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
- 고정된 행이 그리드의 고정된 영역과 고정 해제된 영역 모두에 나타날 수 있도록 내부적으로 저장되는 방식으로 인해 그리드의 레코드를 요청 시 원격 끝점에서 가져올 때(원격 가상화) 행 고정이 지원되지 않습니다.
- 그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
- 행 선택은 전적으로 행 ID와 함께 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: Shift + 클릭 사용)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.
- 그리드에 세트가 없
primaryKey고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:- 행 선택
- 행 확장/축소
- 행 편집
- 행 고정
스타일링
IgxGrid는 스타일링Ignite UI for Angular Theme Library을 통해 가능합니다. 그리드는grid-theme 다양한 특성을 공개하여 모든 기능을 맞춤화할 수 있게 합니다.
아래에서는 그리드의 행 고정 스타일을 사용자 지정하는 단계를 살펴보겠습니다.
Importing the Styling Library
행 고정 기능을 맞춤화하려면 모든 스타일링 기능과 믹싱이 있는 파일을 가져와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 a Theme
다음으로, 원하는 대로 줄 고정 기능을 커스터마이즈하는 데 필요한 매개변수를 확장grid-theme 하고 이를 수락하는 새로운 테마를 만듭니다.
$custom-grid-theme: grid-theme(
$pinned-border-width: 5px,
$pinned-border-style: double,
$pinned-border-color: #ffcd0f,
$cell-active-border-color: #ffcd0f
);
Using CSS variables
마지막 단계는 사용자 정의 그리드 테마를 전달하는 것입니다.
@include css-vars($custom-grid-theme);
데모
Note
샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub