React Pivot Grid 기능

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

    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 요약 페이징

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

    EXAMPLE
    DATA
    TSX
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    차원 정렬

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

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

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

    const dimension: IgrPivotDimension = new IgrPivotDimension();
    dimension.memberName = "SellerName";
    dimension.enabled = true;
    dimension.sortDirection = SortingDirection.Asc;
    tsx

    치수 크기 조정

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

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

    const dimension: IgrPivotDimension = new IgrPivotDimension();
    dimension.memberName = "SellerName";
    dimension.enabled = true;
    dimension.width = "400px";
    tsx
    Ignite UI for React | CTA 배너

    치수 선택

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

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} rowSelection={GridSelectionMode.Single}>
    </IgrPivotGrid>
    tsx

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

    슈퍼 컴팩트 모드

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

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

    추가 요약 열

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

    상호 작용

    키보드 탐색

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

    치수 드래그 앤 드롭

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

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

    API 참조

    추가 리소스