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'
        }
    ]
}

    Dimensions selection

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

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

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

    Super Compact Mode

    ​IgxPivotGrid 구성 요소는 superCompactMode @Input 제공합니다. 한 번에 많은 양의 셀이 화면에 나타나야 하는 경우에 적합합니다. 활성화된 경우 옵션은 피벗 그리드에 대한 displayDensity 옵션을 무시합니다. 또한 superCompactMode 활성화하면 superCompactMode 옵션이 없는 각 하위 구성 요소(예: IgxChip)에 대해 displayDensity 입력이 compact으로 설정됩니다.

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

    Additional summary column

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

    상호 작용

    키보드 탐색

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

    Dimensions drag & drop

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

    Note

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

    API References

    Additional Resources

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