Angular 피벗 그리드 기능

    피벗 및 평면 그리드 구성 요소 클래스는 공통 기반에서 상속되므로 일부 기능과 특징을 공유합니다.

    Note

    일부 기능은 피벗 테이블 컨텍스트에서 의미 있는 동작을 하지 않으므로 IgxPivotGrid에 대해 활성화할 수 없습니다. 여기에는 다음이 포함됩니다.

    • CRUD 작업
    • 그룹화
    • 행/열 고정
    • 요약
    • 페이징

    피벗 그리드 구성 요소에는 아래 설명된 차원과 관련된 추가 기능이 있습니다.

    Dimensions filtering

    모든 측정기준(필터, 행, 열)은 칩 UI 또는 API를 통해 필터링할 수 있습니다. 이 기능은 기본적으로 포함되어 활성화되어 있습니다.

    Note

    필터링 차원을 사용하여 피벗 뷰의 일부가 아닌 데이터 값을 필터링할 수 있습니다.

    필터링 UI는 차원 칩 필터 아이콘을 통해 열 수 있으며 고유한 차원 값을 Excel 스타일로 필터링할 수 있습니다.

    Note

    모든 필터링 칩을 위한 공간이 충분하지 않은 경우 피벗 그리드는 잘린 칩을 드롭다운에 표시합니다. 최종 사용자는 그곳에서 해당 정보에 액세스하고 조작할 수 있습니다.

    또한 차원의 filter 속성이 포함된 pivotConfiguration의 차원 구성을 통해 처음에 차원을 필터링할 수도 있습니다. 관련 필터 조건을 사용하여 새 FilteringExpressionsTree로 설정할 수 있습니다. 예를 들면 다음과 같습니다.

    public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);

constructor() {
    this.filterExpTree.filteringOperands = [
        {
            condition: IgxStringFilteringOperand.instance().condition('equals'),
            fieldName: 'SellerName',
            searchVal: 'Stanley'
        }
    ];
}

public pivotConfigHierarchy: IPivotConfiguration = {
    filters: [
        {
            memberName: 'SellerName',
            enabled: true,
            filter: this.filterExpTree
        }
    ]
}

    Dimensions sorting

    ​rows 이나 columns 차원 값은 관련 칩이나 API를 통해 정렬할 수 있습니다. 이 기능은 기본적으로 포함되어 활성화되어 있습니다.

    해당 칩을 클릭하면 측정기준이 정렬되며, 결과적으로 측정기준 값이 오름차순/내림차순으로 정렬됩니다.

    차원 정의의 sortDirection 속성을 통해 처음에 정렬을 적용할 수도 있습니다.

    public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'SellerName',
            enabled: true,
            sortDirection: SortingDirection.Asc
        }
    ]
}

    Dimensions resizing

    행 크기는 열 크기 조정과 유사하게 셀 오른쪽 가장자리에 있는 크기 조정 표시기를 통해 크기를 조정할 수 있습니다. 크기 조정 표시기를 두 번 클릭하거나 관련 API인 autoSizeRowDimension 사용하여 자동 크기를 조정할 수도 있습니다.

    치수 정의에서 사용할 수 있는 width 속성을 사용하여 처음에 다른 크기를 설정할 수도 있습니다.

    public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'Country',
            enabled: true,
            width: '400px'
        }
    ]
}
    Note

    현재 Angular 18.0.0​ ​width 행 차원에 대한 IgniteUI도 설정할 auto 수 있습니다.

    Dimensions selection

    피벗 그리드는 기본 그리드와 마찬가지로 단일 선택을 지원합니다. 예를 들어:

    <igx-pivot-grid #grid1 [rowSelection]="'single'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

    여러 행/열에 걸쳐 있는 그룹을 생성하는 여러 행 또는 열 차원이 있는 경우 선택한 그룹에 속하는 모든 셀에 선택이 적용됩니다.

    Super Compact Mode

    구성 IgxPivotGrid 요소는 다음을 superCompactMode @Input 제공합니다. 한 번에 많은 셀이 화면에 나타나야 하는 경우에 적합합니다. 활성화된 경우 이 옵션은 피벗 그리드에 ig-size 대한 변수를 무시합니다. 활성화하면 superCompactMode 옵션이 ig-size​ ​superCompactMode 없는 각 하위 구성 요소 (예) IgxChip에 대해 변수를 설정합니다 ig-size-small.

    <igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>

    Additional summary column

    ​column 차원이 계층 구조를 정의하면 피벗 그리드는 그룹 내 모든 열의 집계를 누적하는 추가 요약/총계 열을 렌더링합니다. 그룹이 축소되면 요약 열만 남게 됩니다. 그룹이 확장되면 그룹 끝에 추가 요약 열이 나타납니다.

    Row Dimensions Headers

    현재 Angular 18.0.0 행 차원 값 헤더에 대한 IgniteUI는 다음 옵션을 통해 pivotUI 활성화할 수 있습니다.

    <igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>

    Row Dimension Layout

    행 차원 렌더링의 IgxPivotGridComponent 두 가지 방법을 지원합니다. 이것은 옵션의 rowLayout 속성을 설정하여 제어할 수 있습니다 pivotUI.

      <igx-pivot-grid [pivotUI]="pivotUI">
  </igx-pivot-grid>

    public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };

    그리드의 기본 레이아웃은 다음과 같습니다 Vertical. 이 모드에서는 차원의 계층이 수직으로 확장됩니다. 대안은 다음과 같습니다 Horizontal. 이 모드에서는 단일 행 차원이 확장될 때 자식이 동일한 부모 다중 행 레이아웃에 가로로 표시됩니다. 아래 샘플에서 두 모드 사이를 전환하여 비교할 수 있습니다.

    이 모드에서는 Horizontal 부모 행이 축소되지 않는 한 부모 행 차원 집계가 표시되지 않습니다. 행 요약에 상위 차원을 표시하려면 관련 차원에 horizontalSummary 대해 속성을 사용하도록 설정할 수 있습니다.

    rows: [
    {
        memberFunction: () => 'All Products',
        memberName: 'AllProducts',
        enabled: true,
        horizontalSummary: true,
        width: "150px",
        childLevel: {
            //...
        }
    }
]

    또한 요약의 위치는 옵션의 속성을 통해 horizontalSummariesPosition 변경할 수 있습니다 pivotUI. (기본값) 또는 중 하나로 Top 설정할 수 있습니다 Bottom.

    public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
    Note

    행 요약 관련 옵션 -horizontalSummary and horizontalSummariesPosition는 레이아웃 모드에만 적용할 수 Horizontal 있습니다.

    상호 작용

    키보드 탐색

    ​IgxPivotGrid의 키보드 탐색은 IgxGrid의 키보드 탐색과 유사하게 작동합니다. 피벗 그리드는 rows, columns, values의 세 영역으로 나뉩니다. rows과 columns 영역은 탐색 목적으로 헤더로 간주되는 반면 values은 본문으로 간주됩니다. 키보드 화살표를 사용하면 현재 영역 내에서만 활성 요소를 탐색할 수 있습니다.

    Dimensions drag & drop

    치수는 드래그 앤 드롭이 가능한 칩으로 표시됩니다. 모든 칩은 드래그 앤 드롭을 통해 해당 영역 내에서 순서를 변경할 수 있습니다. rows, column, filter (차원 칩)의 칩은 해당 영역에서 다른 영역으로, 어느 위치로든 이동할 수 있습니다. 이 영역의 칩은 values 영역으로 이동할 수 없으며 values 영역의 칩은 어떤 차원 영역으로도 이동할 수 없습니다.

    Note

    피벗 그리드의 칩은 피벗 데이터 선택기로 이동할 수 없으며, 피벗 데이터 선택기의 항목은 피벗 그리드로 이동할 수 없습니다.

    API References

    Additional Resources

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