Angular 피벗 그리드 기능

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

    Note

    일부 기능은 피벗 테이블 맥락에서 의미 있는 동작을 하지 않아 활성화IgxPivotGrid 할 수 없습니다. 이들은 다음과 같습니다:

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

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

    Dimensions filtering

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

    Note

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

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

    Note

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

    차원은 또한 차원 구성과 차원 속성 를pivotConfiguration​filter 통해 처음에 필터링할 수 있습니다. 관련 필터 조건을 사용하여 새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

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

    버전18.0.0 기준으로는 행 차원의 Angularwidth 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 각 자식 컴포넌트(유사ig-size-small)에 대해 변수를IgxChip 설정superCompactMode 하기도 합니다.

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

    Additional summary column

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

    Row Dimensions Headers

    버전18.0.0 기준으로는 Angular 행 차원 값 헤더에 대한 IgniteUI를 다음 옵션을 통해pivotUI 활성화할 수 있습니다:

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

    Row Dimension Layout

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

      <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과horizontalSummariesPosition 레이아웃 모드에만Horizontal 적용됩니다.

    상호 작용

    키보드 탐색

    키보드 내IgxPivotGrid 비게이션은 InIgxGrid과 비슷하게 작동합니다. 피벗 그리드는 세 개의 영역으로 나뉩니다 -rows,columns,.values와 의rows​columns 영역은 항해 목적상 헤더로 간주되며, forvalues의 영역은 본체입니다. 키보드 화살표는 현재 영역 내에서 활성 요소만 탐색할 수 있게 해줍니다.

    Dimensions drag & drop

    치수는 칩으로 표현되며, 칩은 드래그 앤 드롭할 수 있습니다. 모든 칩은 드래그 앤 드롭으로 해당 영역 내에서 순서를 변경할 수 있습니다. (차원 칩)의rows​column​filter 칩은 그 중 어느 영역에서든 어디든 옮길 수 있습니다. 이 영역의 칩은 해당 영역으로values 이동할 수 없고, 해당 영역의values 칩은 치수 영역 어디로도 이동할 수 없습니다.

    Note

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

    API References

    Additional Resources

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