React Pivot Grid 기능

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

    [!Note] Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for IgrPivotGrid. These include:

    • CRUD operations
    • Grouping
    • Row/Column Pinning
    • 요약
    • 페이징

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

    Dimensions Sorting

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

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

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

    const dimension: IgrPivotDimension = {
    memberName: "SellerName",
    enabled: true,
    sortDirection: SortingDirection.Asc
};

    Dimensions Resizing

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

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

    const igrPivotDimension2: IgrPivotDimension = {
    memberName: "SellerName",
    enabled: true,
    width = "400px"
};

    Dimensions Selection

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

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} rowSelection="single">
</IgrPivotGrid>

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

    Super Compact Mode

    이 IgrPivotGrid component는 다음을 제공합니다. superCompactMode 입력. 한 번에 많은 셀이 화면에 있어야 하는 경우에 적합합니다. 활성화된 경우 이 옵션은 다음을 무시합니다.--ig-size 피벗 그리드에 대한 CSS 변수입니다. 사용 superCompactMode 또한--ig-size 받는 사람 small 각 자식 구성 요소(예: IgrChip)이 없습니다. SuperCompactMode 선택.

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} superCompactMode={true}>
</IgrPivotGrid>

    Additional Summary Column

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

    상호 작용

    Keyboard Navigation

    키보드 탐색은 IgrPivotGrid에서 IgrGrid와 유사하게 작동합니다. 피벗 그리드는 -rows, columns, values의 세 영역으로 나뉩니다. 영역 rows과 columns는 탐색을 위한 헤더로 간주되는 반면 영역 values은 본문입니다. 키보드 화살표는 현재 영역 내의 활성 요소만 탐색할 수 있습니다.

    Dimensions Drag & Drop

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

    [!Note] The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid.

    API References

    Additional Resources