React 그리드 그룹 기준

React IgrGrid의 Ignite UI for React 열 값을 기반으로 그룹화된 데이터 행을 생성합니다. IgrGrid의 Group By를 사용하면 그룹을 계층 구조로 시각화할 수 있습니다. 그룹화된 데이터 행은 UI나 API를 통해 확장하거나 축소할 수 있으며 그룹화 순서는 변경할 수 있습니다. 행 선택이 활성화되면 그룹화 기준 행 선택기가 그룹 행의 가장 왼쪽 영역에 렌더링됩니다. rowSelection 속성이 단일로 설정된 경우 확인란이 비활성화되고 선택 항목이 배치된 그룹에 대한 표시로만 사용됩니다. rowSelection 속성이 다중으로 설정된 경우 그룹화 기준 행 선택기를 클릭하면 이 그룹에 속한 모든 레코드가 선택됩니다.

React Grid Group By Example

이 예에서는 대량의 데이터를 그룹화하는 기능을 보여줍니다. 열 헤더를 상단(그룹화 영역)으로 드래그하면 사용자는 선택한 열에 대한 데이터를 계층 구조로 볼 수 있습니다. 더 많은 열 헤더를 맨 위로 드래그하여 여러 필드에서 그룹화할 수 있습니다. 이러한 그룹화 옵션은 사용자가 훨씬 빠르고 시각적으로 허용되는 방식으로 데이터를 표시하려는 수많은 행과 열이 있는 테이블이 있는 경우 유용합니다.

Initial Grouping State

그리드의 groupingExpressions 속성에 표현식 배열을 할당하여 그리드의 초기 그룹화를 정의할 수 있습니다.

const expressions = [
    { fieldName: 'ProductName', dir: SortingDirection.Desc },
    { fieldName: 'Released', dir: SortingDirection.Desc }
];

function App() {
    const grid1Ref = useRef();
    return (
    <>
        <IgrGrid
            autoGenerate="true"
            groupingExpressions={expressions}
            ref={grid1Ref}>
        </IgrGrid>
    </>
    )
}

그룹화 표현식은 ISortingExpression 인터페이스를 구현합니다.

Group By API

Grouping API

그룹화는 UI와 그리드 구성 요소에서 제공하는 강력한 API를 통해 사용할 수 있습니다. 개발자는 각 열의 Groupable 속성을 true로 설정하여 최종 사용자가 특정 열을 기준으로 그리드 데이터를 그룹화하도록 허용할 수 있습니다.

function App() {
    const gridRef = useRef();
    return (
    <>
        <IgrGrid
            autoGenerate="false"
            ref={gridRef}
            >
            <IgrColumn field="OrderID" hidden="true"></IgrColumn>
            <IgrColumn field="ShipCountry" header="Ship Country" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="OrderDate" header="Order Date" dataType="date" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="PostalCode" header="Postal Code" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="Discontinued" width="200px" dataType="boolean" groupable="true"></IgrColumn>
            <IgrColumn field="ShipName" header="Ship Name" width="200px" groupable="false"></IgrColumn>
            <IgrColumn field="ShipCity" header="Ship City" width="200px" groupable="false"></IgrColumn>
            <IgrColumn field="ShipperName" header="Shipper Name" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="Salesperson" header="Sales Person" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="UnitPrice" header="Unit Price" width="200px" groupable="true"></IgrColumn>
            <IgrColumn field="Quantity" width="200px" groupable="true"></IgrColumn>
        </IgrGrid>
    </>
  )
}

런타임 동안 표현식은 groupingExpressions 속성에서 가져오고 설정할 수 있습니다. 기존 표현식을 추가하거나 변경해야 하는 경우 단일 또는 표현식 배열과 함께 groupBy 메소드를 사용할 수도 있습니다.

gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);

Expand/Collapse API

표현식을 그룹화하는 것 외에도 그룹 행의 확장 상태를 제어할 수도 있습니다. 이는 IgrGroupByExpandState의 컬렉션인 IgrGrid 구성 요소 groupingExpansionState의 별도 속성에 저장됩니다. 각 확장 상태는 생성된 필드 이름과 각 그룹화 수준에 대해 나타내는 값으로 고유하게 정의됩니다. 즉, 식별자는 IgrGroupByKey의 계층 구조 배열입니다.

​groupingExpressions와 마찬가지로 IgrGroupByExpandState 목록을 groupingExpansionState에 직접 설정하면 이에 따라 확장이 변경됩니다. 또한 IgrGrid 그룹 레코드 인스턴스 또는 행의 expanded 속성을 통해 그룹을 전환하는 메서드 toggleGroup 그룹을 노출합니다.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
    gridRef.current.toggleGroup(groupRow);

    const groupRow = gridRef.current.getRowByIndex(0);
    groupRow.expanded = false;

그룹은 확장(기본값) 또는 축소로 생성될 수 있으며 일반적으로 확장 상태에는 기본 동작과 반대되는 상태만 포함됩니다. groupsExpanded 속성을 통해 그룹을 확장하여 생성해야 하는지 여부를 제어할 수 있습니다.

Select/Deselect All Rows in a Group API

그룹의 모든 행을 선택/선택 취소하는 것은 selectRowsInGroup 및 deselectRowsInGroup API 메소드를 통해 가능합니다.

아래 코드 조각은 그룹 레코드 인스턴스 selectRowsInGroup 메서드를 사용하여 그룹 내의 모든 행을 선택하는 데 사용할 수 있습니다. 또한 이 메서드의 두 번째 매개 변수는 이전 행 선택을 지울지 여부를 선택할 수 있는 부울 속성입니다. 이전 선택 사항은 기본적으로 유지됩니다.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
    gridRef.current.selectRowsInGroup(groupRow);

프로그래밍 방식으로 그룹 내의 모든 행을 선택 취소해야 하는 경우 deselectRowsInGroup 메서드를 사용할 수 있습니다.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
    gridRef.current.deselectRowsInGroup(groupRow);

Templating

Group Row Templates

확장/축소 UI를 제외한 그룹 행은 완전히 템플릿화 가능합니다. 기본적으로 그룹화 아이콘을 렌더링하고 해당 아이콘이 나타내는 필드 이름과 값을 표시합니다. 템플릿을 렌더링할 컨텍스트는 IgrGroupByRecord 유형입니다.

예를 들어, 다음 템플릿은 그룹 행 요약을 더욱 자세하게 만듭니다.

function template(ctx: { dataContext: IgrGroupByRowTemplateContext }) {
    const groupRow = ctx.dataContext.implicit;
    return (<>
       <span>Total items with value: { groupRow.value } are { groupRow.records.length }</span>
    </>)
}

Group Row Selector Templates

위에서 언급한 것처럼 확장/축소 UI를 제외한 그룹 행은 완전히 템플릿화 가능합니다. 사용자 정의 Group By 행 선택기 템플릿을 생성하려면 groupByRowSelectorTemplate 사용하세요. 템플릿에서 Group By 행의 상태에 대한 정보를 제공하는 속성을 사용하여 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있습니다.

​SelectedCount 속성은 현재 선택된 그룹 레코드 수를 표시하고 TotalCount 그룹에 속한 레코드 수를 표시합니다.

function template(ctx: { dataContext: IgrGroupByRowSelectorTemplateContext }) {
    return (<>
        { ctx.dataContext.implicit.selectedCount } / { ctx.dataContext.implicit.totalCount }
    </>)
}

​GroupRow 속성은 그룹 행에 대한 참조를 반환합니다.

function template(ctx: { dataContext: IgrGroupByRowSelectorTemplateContext }) {
    const groupRow = ctx.dataContext.implicit.groupRow;
    return (<>
        <div onClick={(e: any) => handleGroupByRowSelectorClick(e, groupRow)}>Handle groupRow</div> `;
    </>)
}

​SelectedCount 및 TotalCount 속성을 사용하여 그룹화 기준 행 선택기를 선택해야 하는지 또는 불확정(부분 선택)해야 하는지 결정할 수 있습니다.

React Grid Group By With Paging

그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다. 확장 또는 축소 작업을 수행하면 Paging이 페이지 수를 다시 계산하고 필요한 경우 페이지 인덱스를 조정합니다. 여러 페이지에 걸쳐 있는 그룹은 페이지 간에 분할됩니다. 그룹 행은 시작하는 페이지에만 표시되며 후속 페이지에서는 반복되지 않습니다. 그룹 행의 요약 정보는 전체 그룹을 기준으로 계산되며 Paging의 영향을 받지 않습니다.

React Group By With Paging Example

Group By With Summaries

Group By와 요약 간의 통합은 요약 항목에 설명되어 있습니다.

Keyboard Navigation

그룹화 UI는 다음과 같은 키보드 상호 작용을 지원합니다.

• 그룹 행의 경우(포커스는 행 또는 확장/축소 셀에 있어야 함)

  • ALT + RIGHT- 그룹 확장
  • ALT + LEFT- 그룹 축소
  • SPACE-rowSelection 속성이 다중으로 설정된 경우 그룹의 모든 행을 선택합니다.

• 영역별 그룹의 그룹 IgrChip 구성 요소의 경우(초점은 칩에 있어야 함)

  • SHIFT + LEFT- 가능한 경우 그룹화 순서를 변경하여 초점을 맞춘 칩을 왼쪽으로 이동합니다.
  • SHIFT + 오른쪽- 가능한 경우 그룹화 순서를 변경하여 초점을 맞춘 칩을 오른쪽으로 이동합니다.
  • SPACE- 정렬 방향을 변경합니다.
  • DELETE- 필드 그룹을 해제합니다.
  • 칩의 개별 요소에도 초점을 맞출 수 있으며 ENTER 키를 사용하여 상호 작용할 수 있습니다.

React Grid Custom Group By

그리드를 사용하면 열별 또는 그룹화 표현식별로 사용자 정의 그룹화를 정의할 수 있으며, 이는 사용자 정의 조건을 기반으로 그룹화를 제공합니다. 이는 복잡한 개체별로 그룹화해야 하거나 기타 애플리케이션별 시나리오에 유용합니다.

아래 샘플은 Date 별 사용자 정의 그룹화를 보여줍니다. 여기서 날짜 값은 사용자가 선택한 그룹화 모드에 따라 일, 주, 월 또는 연도별로 정렬 및 그룹화됩니다.

React Custom Group By Example

샘플은 다양한 날짜 조건에 대한 사용자 정의 정렬을 정의합니다. 각 사용자 지정 전략은 값을 정렬할 때 사용되는 사용자 지정 비교 함수인 GroupingComparer 메서드를 정의합니다. 또한 비교에 필요한 날짜에서 값을 추출합니다.

const groupByMode = "Month";
function getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

선택한 그룹화 모드에 따라 동일한 그룹에 속하는 항목을 결정하는 그룹화 표현식에 대해 GroupingComparer 함수가 정의됩니다. 이 함수가 0을 반환하는 정렬된 데이터의 값은 동일한 그룹의 일부로 표시됩니다.

grid.groupingExpressions = [
    { fieldName: 'OrderDate', dir: SortingDirection.Desc,
    groupingComparer: (a, b) => {
            const dateA = this.getParsedDate(a);
            const dateB = this.getParsedDate(b);
            if (this.groupByMode === 'Month') {
                return dateA.month === dateB.month ? 0 : -1;
            } else if (this.groupByMode === "Year") {
                return dateA.year === dateB.year ? 0 : -1;
            } else if (this.groupByMode === 'Week') {
                return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
            }
            return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
        }
    }
];

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

function App() {
     return (
        <IgrGrid className="grid">
        </IgrGrid>
    )
}

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-group-row-background: #969799;
    --ig-grid-group-row-selected-background: #969799;
    --ig-grid-group-label-column-name-text: #f8f8f8;
    --ig-grid-group-label-text: #f8f8f8;
    --ig-grid-group-count-text-color: #222;
    --ig-grid-expand-icon-color: #f8f8f8;
    --ig-grid-expand-icon-hover-color: #f8f8f8;
}

Demo

Known Limitations

한정	설명
그룹화된 열의 최대 개수는 10개입니다.	10개 이상의 열이 그룹화되면 오류가 발생합니다.

API References

• IgrGrid
• GroupByRow
• ISortingExpression
• IgrColumn
• IGroupByExpandState
• IgrChip

Additional Resources

• 그리드 개요
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 열 이동
• 요약
• 열 크기 조정
• 선택

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

• Ignite UI for React Forums
• Ignite UI for React GitHub