Angular 그리드 행 고정
하나 이상의 행을 Angular UI Grid의 상단 또는 하단에 고정할 수 있습니다. Ignite UI for Angular의 행 고정을 사용하면 최종 사용자가 특정 순서로 행을 고정하여 Grid를 수직으로 스크롤하더라도 항상 보이는 특수 영역에 복제할 수 있습니다. Material UI Grid에는 Grid 컨텍스트에서 igxActionStrip
구성 요소를 초기화하여 활성화되는 기본 제공 행 고정 UI가 있습니다. 또한 사용자 지정 UI를 정의하고 Row Pinning API를 통해 행의 고정 상태를 변경할 수 있습니다.
Angular 그리드 행 고정 예제
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, IPinningConfig, RowPinningPosition, IgxSwitchComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/customers' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-row-pinning' ,
templateUrl : 'grid-row-pinning.component.html' ,
styleUrls : ['./grid-row-pinning.component.scss' ],
imports : [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent]
})
export class GridRowPinningSampleComponent implements OnInit {
@ViewChild ('grid1' , { static : true })
public grid: IgxGridComponent;
public data: any [];
public pinningConfig: IPinningConfig = { rows : RowPinningPosition.Top };
constructor ( ) {
this .data = DATA;
}
public ngOnInit ( ) {
this .grid.pinRow(this .data[0 ].ID);
this .grid.pinRow(this .data[3 ].ID);
}
public changePinningPosition ( ) {
if (this .pinningConfig.rows === RowPinningPosition.Bottom) {
this .pinningConfig = { columns : this .pinningConfig.columns, rows : RowPinningPosition.Top };
} else {
this .pinningConfig = { columns : this .pinningConfig.columns, rows : RowPinningPosition.Bottom };
}
}
}
ts コピー <div class ="switches" >
<igx-switch (change )='changePinningPosition()' style ="padding-left: 20px" > Bottom Row Pinning toggle</igx-switch >
</div >
<div class ="grid-container" >
<igx-grid #grid1 [igxPreventDocumentScroll ]="true" [data ]="data" [pinning ]='pinningConfig' [height ]="'520px'" [width ]="'100%'" [autoGenerate ]="false"
[primaryKey ]="'ID'" [cellSelection ]="'none'" [rowEditable ]="true"
(dataPreLoad )="actionStrip1.hide()" >
<igx-column [field ]="'CompanyName'" [header ]="'Company Name'" [width ]="'300px'" > </igx-column >
<igx-column [field ]="'ContactName'" [header ]="'Contact Name'" > </igx-column >
<igx-column [field ]="'ContactTitle'" [header ]="'Contact Title'" > </igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" > </igx-column >
<igx-column [field ]="'City'" [header ]="'City'" > </igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" > </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" > </igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" > </igx-column >
<igx-action-strip #actionStrip1 >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
<igx-grid-editing-actions > </igx-grid-editing-actions >
</igx-action-strip >
</igx-grid >
</div >
html コピー .grid-container {
display : flex;
padding : 20px ;
}
.switches {
margin-top : 24px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
행 고정 UI
내장 행 고정 UI는 GridPinningActions
구성 요소와 함께 igxActionStrip
구성 요소를 추가하여 활성화됩니다. 행을 마우스로 가리키면 작업 스트립이 자동으로 표시되며 표시된 행의 상태에 따라 고정 또는 고정 해제 버튼 아이콘이 표시됩니다. 고정된 행의 복사본을 보기로 스크롤할 수 있는 추가 작업도 고정된 각 행에 대해 표시됩니다.
<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 >
html
행 고정 API
행 고정은 다음을 통해 제어됩니다. pinned
의 입력 row
. 고정된 행은 기본적으로 Grid 상단에 렌더링되며 Grid 본문에서 고정 해제된 행의 세로 스크롤을 통해 고정된 상태로 유지됩니다.
this .grid.getRowByIndex(0 ).pinned = true ;
typescript
IgxGridComponent
의 Grid pinRow
또는 unpinRow
메소드를 사용하여 ID별로 레코드를 고정하거나 고정 해제할 수도 있습니다.
this .grid.pinRow('ALFKI' );
this .grid.unpinRow('ALFKI' );
typescript
행 ID는 그리드의 primaryKey
또는 레코드 인스턴스 자체에 의해 정의된 기본 키 값입니다. 두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 행이 이미 원하는 상태에 있기 때문입니다.
행은 마지막으로 고정된 행 아래에 고정됩니다. 고정된 행의 순서를 변경하려면 rowPinning
이벤트를 구독하고 이벤트 인수의 insertAtIndex
속성을 원하는 위치 인덱스로 변경하면 됩니다.
<igx-grid #grid1 [data ]="data" [autoGenerate ]="true" (rowPinning )="rowPinning($event)" >
</igx-grid >
html
public rowPinning (event ) {
event.insertAtIndex = 0 ;
}
typescript
고정 위치
pinning
구성 옵션을 통해 행 고정 위치를 변경할 수 있습니다. 핀 영역 위치를 상단 또는 하단으로 설정할 수 있습니다. 아래쪽으로 설정하면 고정된 행이 고정 해제된 행 뒤의 그리드 아래쪽에 렌더링됩니다. 고정 해제된 행은 세로로 스크롤할 수 있지만 고정된 행은 아래쪽에 고정된 상태로 유지됩니다.
<igx-grid [data ]="data" [autoGenerate ]="true" [pinning ]="pinningConfig" > </igx-grid >
html
public pinningConfig: IPinningConfig = { rows : RowPinningPosition.Bottom };
typescript
사용자 정의 행 고정 UI
사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.
아이콘이 있는 추가 열을 통해
액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.
<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 >
html
사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.
public togglePinning (row: IgxGridRow, event ) {
event.preventDefault();
if (row.pinned) {
row.unpin();
} else {
row.pin();
}
}
typescript
데모
import { AfterViewInit, Component, ViewChild } from '@angular/core' ;
import { ColumnPinningPosition, IgxGridComponent, IgxIconService, IPinningConfig, RowType, RowPinningPosition, IgxSwitchComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/customers' ;
import { icons } from '../../services/svgIcons' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
const FILTERING_ICONS_FONT_SET = 'filtering-icons' ;
@Component ({
selector : 'app-grid-row-pinning-extra-column' ,
templateUrl : 'grid-row-pinning-extra-column.component.html' ,
styleUrls : ['./grid-row-pinning-extra-column.component.scss' ],
imports : [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent]
})
export class GridRowPinningExtraColumnSampleComponent implements AfterViewInit {
@ViewChild ('grid' , {read : IgxGridComponent, static : true })
public grid: IgxGridComponent;
public data: any [];
public pinningConfig: IPinningConfig = { rows : RowPinningPosition.Top, columns : ColumnPinningPosition.End };
constructor (private iconService: IgxIconService ) {
this .data = DATA;
}
public togglePinning (row: RowType, event ) {
event.preventDefault();
if (row.pinned) {
row.unpin();
} else {
row.pin();
}
}
public changePinningPosition ( ) {
if (this .pinningConfig.rows === RowPinningPosition.Bottom) {
this .pinningConfig = { columns : this .pinningConfig.columns, rows : RowPinningPosition.Top };
} else {
this .pinningConfig = { columns : this .pinningConfig.columns, rows : RowPinningPosition.Bottom };
}
}
public ngAfterViewInit ( ) {
const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin' );
pinnedIcons.forEach(icon => {
if (!this .iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
this .iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
}
});
}
}
ts コピー <div class ="switches" >
<igx-switch (change )='changePinningPosition()' style ="padding-left: 20px" > Bottom Row Pinning toggle</igx-switch >
</div >
<div class ="grid-container" >
<igx-grid #grid [igxPreventDocumentScroll ]="true" [data ]="data" [pinning ]='pinningConfig' [height ]="'520px'" [width ]="'100%'"
[autoGenerate ]="false" [primaryKey ]="'ID'" [cellSelection ]="'none'" >
<igx-column width ='70px' [filterable ]="false" [pinned ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
<igx-icon class ="pin-icon" (mouseup )="togglePinning(cell.row, $event)" family ="filtering-icons"
name ="{{cell.row.pinned ? 'unpin' : 'pin'}}" >
</igx-icon >
</ng-template >
</igx-column >
<igx-column [field ]="'CompanyName'" [header ]="'Company Name'" [width ]="'300px'" > </igx-column >
<igx-column [field ]="'ContactName'" [header ]="'Contact Name'" > </igx-column >
<igx-column [field ]="'ContactTitle'" [header ]="'Contact Title'" > </igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" > </igx-column >
<igx-column [field ]="'City'" [header ]="'City'" > </igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" > </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" > </igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" > </igx-column >
</igx-grid >
</div >
html コピー .grid-container {
display : flex;
padding : 20px ;
}
.pin-icon {
cursor : pointer;
color : #999 ;
}
.pin-icon :hover {
color : #444
}
.switches {
margin-top: 24px ;
}
scss コピー
행 드래그를 통해
고정된 행과 고정 해제된 행 사이에 행을 직접 끌어서 놓아 핀 상태를 변경할 수 있다고 가정해 보겠습니다. 이는 행 끌기 기능을 활성화하고 놓을 때 API를 통해 행을 고정/고정 해제하여 수행할 수 있습니다.
먼저, igxDrop
지시어를 사용하여 그리드를 드롭 영역으로 표시해야 하며 rowDraggable
옵션을 통해 행 드래그 기능을 활성화해야 합니다.
<igx-grid [data ]="data" [autoGenerate ]="true" [rowDraggable ]="true"
[primaryKey ]="'ID'" igxDrop (dropped )="onDropAllowed($event)" >
</igx-grid >
html
그런 다음 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));
}
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);
}
}
typescript
이렇게 하면 행을 다시 정렬하고 고정된 행 컬렉션과 고정 해제된 행 컬렉션 간에 이동할 수 있습니다.
데모
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IDropDroppedEventArgs, IgxGridComponent, IPinningConfig, IRowDragStartEventArgs, RowPinningPosition, RowType, IgxDropDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent } from 'igniteui-angular' ;
import { IgxRowDirective } from 'igniteui-angular/lib/grids/row.directive' ;
import { DATA } from '../../data/customers' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-row-pinning-drag-sample' ,
styleUrls : ['./grid-row-pinning-drag.component.scss' ],
templateUrl : 'grid-row-pinning-drag.component.html' ,
imports : [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent]
})
export class GridPinningDragSampleComponent implements OnInit {
@ViewChild ('grid1' , { static : true })
public grid: IgxGridComponent;
public data: any [];
public pinningConfig: IPinningConfig = { rows : RowPinningPosition.Top };
constructor ( ) {
this .data = DATA;
}
public ngOnInit ( ) {
this .grid.pinRow(this .data[0 ].ID);
this .grid.pinRow(this .data[3 ].ID);
this .grid.pinRow(this .data[8 ].ID);
this .grid.pinRow(this .data[11 ].ID);
}
public togglePining (row: RowType, event ) {
event.preventDefault();
if (row.pinned) {
row.unpin();
} else {
row.pin();
}
}
public onDropAllowed (args: IDropDroppedEventArgs ) {
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.key === currRowID);
if (currentRow.pinned) {
currRowPinnedIndex = this .grid.pinnedRows.indexOf(this .grid.pinnedRows.find((r ) => r.key === currRowID));
}
this .grid.deleteRow((args.dragData as RowType).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);
}
}
public onRowDragStart (args: IRowDragStartEventArgs ) {
if (args.dragData.disabled) {
args.cancel = true ;
}
}
private getCurrentRowIndex (rowList, cursorPosition ) {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window .scrollY && cursorPosition.y < rowRect.bottom + window .scrollY &&
cursorPosition.x > rowRect.left + window .scrollX && cursorPosition.x < rowRect.right + window .scrollX) {
return this .data.indexOf(this .data.find((r ) => r.ID === row.key));
}
}
return -1 ;
}
private getCurrentRowID (rowList: IgxRowDirective[], cursorPosition ) {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window .scrollY && cursorPosition.y < rowRect.bottom + window .scrollY &&
cursorPosition.x > rowRect.left + window .scrollX && cursorPosition.x < rowRect.right + window .scrollX) {
return row.key;
}
}
}
}
ts コピー <div class ="grid-container" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" [pinning ]="pinningConfig" [height ]="'470px'" [width ]="'100%'"
[autoGenerate ]="false" [rowDraggable ]="true" [primaryKey ]="'ID'" [cellSelection ]="'none'" igxDrop
(rowDragStart )="onRowDragStart($event)" (dropped )="onDropAllowed($event)"
(dataPreLoad )="actionStrip1.hide()" >
<igx-column [field ]="'CompanyName'" [header ]="'Company Name'" > </igx-column >
<igx-column [field ]="'ContactName'" [header ]="'Contact Name'" > </igx-column >
<igx-column [field ]="'ContactTitle'" [header ]="'Contact Title'" > </igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" > </igx-column >
<igx-column [field ]="'City'" [header ]="'City'" > </igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" > </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" > </igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" > </igx-column >
<igx-action-strip #actionStrip1 >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
</igx-action-strip >
</igx-grid >
</div >
html コピー .grid-container {
display : flex;
padding : 20px ;
}
.grid-container .drop-area {
height : 500px ;
width : 50% ;
margin : 10px 20px ;
}
.empty-grid {
display : flex;
justify-content : center;
flex-direction : column;
text-align : center;
height : 100% ;
}
scss コピー
행 고정 제한 사항
데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
고정된 행이 그리드의 고정된 영역과 고정 해제된 영역 모두에 나타날 수 있도록 내부적으로 저장되는 방식으로 인해 그리드의 레코드를 요청 시 원격 끝점에서 가져올 때(원격 가상화) 행 고정이 지원되지 않습니다.
그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
행 선택은 전적으로 행 ID와 함께 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: Shift + 클릭 사용)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.
그리드에 primaryKey
설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃게 됩니다. 요청이 완료되었습니다:
스타일링
IgxGrid를 통해 스타일을 지정할 수 있습니다 Ignite UI for Angular Theme Library
. Grid는 grid-theme
Grid의 모든 기능을 사용자 지정할 수 있는 다양한 속성을 노출합니다.
아래에서는 그리드의 행 고정 스타일을 사용자 지정하는 단계를 살펴보겠습니다.
스타일 라이브러리 가져오기
행 고정 기능의 사용자 정의를 시작하려면 모든 스타일링 기능과 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
테마 정의
다음으로, grid-theme
확장하고 원하는 대로 행 고정 기능을 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 만듭니다.
$custom-grid-theme : grid-theme(
$pinned-border-width : 5px ,
$pinned-border-style : double,
$pinned-border-color : #ffcd0f ,
$cell-active-border-color : #ffcd0f
);
scss
CSS 변수 사용
마지막 단계는 사용자 정의 그리드 테마를 전달하는 것입니다.
@include css-vars($custom-grid-theme );
scss
데모
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, IPinningConfig, RowPinningPosition, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/customers' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-row-pinning-styling' ,
templateUrl : 'grid-row-pinning-styling.component.html' ,
styleUrls : ['./grid-row-pinning-styling.component.scss' ],
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent]
})
export class GridRowPinningStylingSampleComponent implements OnInit {
@ViewChild ('grid1' , { static : true })
public grid: IgxGridComponent;
public data: any [];
public pinningConfig: IPinningConfig = { rows : RowPinningPosition.Top };
constructor ( ) {
this .data = DATA;
}
public ngOnInit ( ) {
this .grid.pinRow(this .data[0 ].ID);
this .grid.pinRow(this .data[3 ].ID);
}
}
ts コピー <div class ="grid-container" >
<igx-grid #grid1 [igxPreventDocumentScroll ]="true" [data ]="data" [pinning ]='pinningConfig' [height ]="'520px'" [width ]="'100%'" [autoGenerate ]="false"
[primaryKey ]="'ID'" [cellSelection ]="'none'"
(dataPreLoad )="actionStrip1.hide()" >
<igx-column [field ]="'CompanyName'" [header ]="'Company Name'" [width ]="'300px'" > </igx-column >
<igx-column [field ]="'ContactName'" [header ]="'Contact Name'" > </igx-column >
<igx-column [field ]="'ContactTitle'" [header ]="'Contact Title'" > </igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" > </igx-column >
<igx-column [field ]="'City'" [header ]="'City'" > </igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" > </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" > </igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" > </igx-column >
<igx-action-strip #actionStrip1 >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
</igx-action-strip >
</igx-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$custom-theme : grid-theme(
$pinned-border-width : 5px ,
$pinned-border-style : double,
$pinned-border-color : #ffcd0f ,
$cell-active-border-color : #ffcd0f
);
@include css-vars($custom-theme );
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.