React Grid Summaries

React Grid의 Ignite UI for React 열별 수준에서 그룹 바닥글로 작동합니다. React IgrGrid 요약은 열 내의 데이터 유형에 따라 또는 IgrGrid에서 사용자 정의 템플릿을 구현하여 사용자가 사전 정의된 기본 요약 항목 세트가 있는 별도의 컨테이너에서 열 정보를 볼 수 있도록 하는 강력한 기능입니다.

React Grid Summaries Overview Example

[!Note] The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

IgrGrid 요약은 Ignite UI for React의 열별 수준에서 활성화할 수도 있습니다. 즉, 필요한 열에 대해서만 활성화할 수 있습니다. IgrGrid 요약은 열의 데이터 유형에 따라 사전 정의된 기본 요약 세트를 제공하므로 시간을 절약할 수 있습니다.

string 및 boolean dataType의 경우 다음 함수를 사용할 수 있습니다.

세다

number, currency 및 percent 데이터 유형의 경우 다음 함수를 사용할 수 있습니다.

세다
최소
맥스
평균
합집합

date 데이터 유형의 경우 다음 기능을 사용할 수 있습니다.

세다
가장 빠른
최신

사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

IgrGrid 요약은 hasSummary 속성을 true로 설정하여 열별로 활성화됩니다. 각 열의 요약은 열 데이터 유형에 따라 확인된다는 점을 명심하는 것도 중요합니다. IgrGrid에서 기본 열 데이터 유형은 string 이므로 number 또는 date 별 요약을 원할 경우 dataType 속성을 number 또는 date로 지정해야 합니다. 요약 값은 그리드 locale 및 pipeArgs 열에 따라 현지화되어 표시됩니다.

<IgrGrid autoGenerate="false" height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px"  sortable="true">
    </IgrColumn>
    <IgrColumnn field="ProductName" header="Product Name" width="200px" sortable="true" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable="true" dataType="number" hasSummary="true">
    </IgrColumn>
</IgrGrid>

특정 열이나 열 목록에 대한 요약을 활성화/비활성화하는 다른 방법은 IgrGrid의 공용 메소드 enableSummaries / disableSummaries 사용하는 것입니다.

function enableSummary() {
    gridRef.current.enableSummaries([
        {fieldName: 'ReorderLevel'},
        {fieldName: 'ProductID'}
    ]);
}
function disableSummary() {
    gridRef.current.disableSummaries(['ProductID']);
}

<IgrGrid ref={gridRef} auto-generate="false" height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px" sortable="true">
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable="true" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable="true" dataType="number" hasSummary="false">
    </IgrColumn>
</IgrGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>

Summary Template

Summary 열 요약 결과를 컨텍스트로 제공하는 열 요약을 대상으로 합니다.

function summaryTemplate(ctx: IgrSummaryTemplateContext) {
  return (
    <>
      <span>My custom summary template</span>
      <span>{ctx.dataContext.implicit[0].label} - {ctx.dataContext.implicit[0].summaryResult}</span>
    </>
  );
}

<IgrColumn hasSummary="true" summaryTemplate={summaryTemplate}></IgrColumn>

기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과 그리드의 표시 밀도에 따라 설계에 따라 계산됩니다. 기본값을 대체하려면 summaryRowHeight 입력 특성을 사용하십시오. 인수로 숫자 값이 필요하며 잘못된 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.

Formatting summaries

기본적으로 기본 제공 요약 피연산자에 의해 생성된 요약 결과는 그리드 locale 및 pipeArgs 열에 따라 지역화되고 형식이 지정됩니다. 사용자 정의 피연산자를 사용하는 경우 locale 및 pipeArgs 적용되지 않습니다. 요약 결과의 기본 모양을 변경하려면 summaryFormatter 속성을 사용하여 형식을 지정할 수 있습니다.

public summaryFormatter(
    summary: IgrSummaryResult,
    summaryOperand: IgrSummaryOperand
  ): string {
    const result = summary.summaryResult;
    if (summary.key !== "count" && result !== null && result !== undefined) {
      const format = new Intl.DateTimeFormat("en", { year: "numeric" });
      return format.format(new Date(result));
    }
    return result;
  }
  
<IgrColumn hasSummary="true" summaryFormatter={this.summaryFormatter}></IgrColumn>

Summaries with Group By

열별로 그룹화한 경우 IgrGrid 사용하면 summaryCalculationMode 및 summaryPosition 속성을 사용하여 요약 위치와 계산 모드를 변경할 수 있습니다. 이 두 속성과 함께 IgrGrid 참조하는 그룹 행이 축소될 때 요약 행이 계속 표시되는지 여부를 결정할 수 있는 showSummaryOnCollapse 속성을 노출합니다.

summaryCalculationMode 속성의 사용 가능한 값은 다음과 같습니다.

RootLevelOnly- 요약은 루트 수준에 대해서만 계산됩니다.
ChildLevelsOnly- 요약은 하위 수준에 대해서만 계산됩니다.
RootAndChildLevels- 루트 및 하위 수준 모두에 대한 요약이 계산됩니다. 이것이 기본값입니다.

summaryPosition 속성의 사용 가능한 값은 다음과 같습니다.

Top- 요약 행이 그룹별 하위 항목 앞에 나타납니다.
Bottom- 요약 행은 행 하위 그룹별로 표시됩니다. 이것이 기본값입니다.

showSummaryOnCollapse 속성은 부울입니다. 기본값은 false로 설정됩니다. 즉, 그룹 행이 축소되면 요약 행이 숨겨집니다. 속성이 true로 설정되면 그룹 행이 축소될 때 요약 행이 계속 표시됩니다.

[!Note] The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgrGrid.

Demo

요약 행은 다음 키보드 상호 작용을 통해 탐색할 수 있습니다.

UP- 한 셀 위로 이동합니다.
DOWN- 한 셀 아래로 이동합니다.
왼쪽- 한 셀 왼쪽으로 이동합니다.
RIGHT- 한 셀 오른쪽으로 이동합니다.
CTRL + LEFT 또는 HOME- 가장 왼쪽 셀로 이동합니다.
CTRL + RIGHT 또는 END- 가장 오른쪽 셀로 이동합니다.

Styling

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

<IgrGrid className="grid">
</IgrGrid>

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

.grid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

Demo

API References

Additional Resources

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

React Grid Summaries