React Tree Grid Summaries

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

    React Tree Grid Summaries Overview Example

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    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

    IgrTreeGrid 요약은 Ignite UI for React의 열별 수준에서 활성화할 수도 있는데, 이는 필요한 열에 대해서만 활성화할 수 있음을 의미합니다. IgrTreeGrid summaries는 열의 데이터 유형에 따라 미리 정의된 기본 요약 집합을 제공하므로 시간을 절약할 수 있습니다.

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

    • 세다

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

    • 세다
    • 최소
    • 맥스
    • 평균
    • 합집합

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

    • 세다
    • 가장 빠른
    • 최신

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

    IgrTreeGrid 요약은 설정을 통해 열별로 사용할 수 있습니다. hasSummary 속성을 참. 또한 각 열에 대한 요약은 열 데이터 형식에 따라 확인된다는 점을 명심해야 합니다. 안에 IgrTreeGrid 기본 열 데이터 형식은 다음과 같습니다. string, 그래서 당신이 원한다면 number 또는 date 특정 요약을 지정해야 합니다. dataType 속성을 number 또는 date. 요약 값은 그리드에 따라 지역화되어 표시됩니다 locale 및 열 pipeArgs.

    <IgrTreeGrid autoGenerate="false" height="800px" width="800px">
    <IgrColumn field="ID" header="Order ID">
    </IgrColumn>
    <IgrColumn field="Name" header="Order Product" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="Units" header="Units" editable="true" dataType="number" hasSummary="true">
    </IgrColumn>
</IgrTreeGrid>
tsx

    특정 열 또는 열 목록에 대한 요약을 활성화/비활성화하는 다른 방법은 public method enableSummaries /of를 disableSummaries​ ​IgrTreeGrid 사용하는 것입니다.

    function enableSummary() {
    treeGridRef.current.enableSummaries([
        {fieldName: 'Name'},
        {fieldName: 'Units'}
    ]);
}
function disableSummary() {
    treeGridRef.current.disableSummaries(['Units']);
}

<IgrTreeGrid autoGenerate="false" data={this.ordersTreeData} ref={this.treeGridRef} id="treeGrid" primaryKey="ID">
    <IgrColumn field="ID" header="Order ID"></IgrColumn>
    <IgrColumn field="Name" header="Order Product" hasSummary="true"></IgrColumn>
    <IgrColumn field="Units" header="Units" editable="true" dataType="Number" hasSummary="true"></IgrColumn>
</IgrTreeGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>
tsx

    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>
tsx

    기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과--ig-size 그리드에 따라 설계에 따라 계산됩니다. summaryRowHeight input 속성을 사용하여 기본값을 재정의합니다. 인수로 숫자 값이 필요하며 거짓 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Disabled Summaries

    이 disabledSummaries 속성은 React Tree Grid 요약 기능에 대한 열별 정확한 제어를 제공합니다. 이 속성을 사용하면 사용자가 IgrTreeGrid의 각 열에 대해 표시되는 요약을 사용자 지정하여 가장 관련성이 높고 의미 있는 데이터만 표시되도록 할 수 있습니다. 예를 들어, 배열에서 요약 키를 지정하는 것과 같이 ['count', 'min', 'max'] 특정 요약 유형을 제외할 수 있습니다.

    또한 이 속성은 코드를 통해 런타임에 동적으로 수정할 수 있으므로 IgrTreeGrid의 요약을 애플리케이션 상태 또는 사용자 작업 변경에 맞게 조정할 수 있는 유연성을 제공합니다.

    다음 예제에서는 속성을 사용하여 disabledSummaries 다른 열에 대한 요약을 관리하고 React 트리 그리드에서 특정 기본 및 사용자 지정 요약 유형을 제외하는 방법을 보여 줍니다.

    <!-- Disable default summaries -->
<IgrColumn
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    hasSummary={true}
    disabledSummaries="['count', 'sum', 'average']"
/>

<!-- Disable custom summaries -->
<IgrColumn
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    hasSummary={true}
    summaries={discontinuedSummary}
    disabledSummaries="['discontinued', 'totalDiscontinued']"
/>
tsx

    의 UnitPrice 경우, 기본 요약은 , sum와 average 같고 count 비활성화되어 있으며 다른 요약은 같고 min​ ​max 활성 상태로 유지됩니다.

    의 경우 UnitsInStock, 및 totalDiscontinued와 같은 discontinued 사용자 지정 요약은 disabledSummaries 속성을 사용하여 제외됩니다.

    런타임에 요약은 속성을 사용하여 동적으로 비활성화할 수도 있습니다 disabledSummaries. 예를 들어, 프로그래밍 방식으로 특정 열의 속성을 설정하거나 업데이트하여 사용자 작업 또는 응용 프로그램 상태 변경에 따라 표시되는 요약을 조정할 수 있습니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Ignite UI for React | CTA Banner

    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>
tsx

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Child Summaries

    ​IgrTreeGrid 루트 노드와 각 중첩된 자식 노드 수준에 대해 별도의 요약을 지원합니다. 표시되는 요약은 속성을 사용하여 구성할 수 있습니다 summaryCalculationMode. 자식 수준 요약은 summaryPosition 속성을 사용하여 자식 노드 앞이나 뒤에 표시할 수 있습니다. 이 두 가지 속성 IgrTreeGrid과 함께 exposes 및 showSummaryOnCollapse property를 사용하면 참조하는 부모 노드가 축소될 때 요약 행이 계속 표시되는지 여부를 확인할 수 있습니다.

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

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

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

    • Top- 요약 행은 하위 행 목록 앞에 나타납니다.
    • Bottom- 요약 행은 하위 행 목록 뒤에 나타납니다. 이 값은 기본값입니다.

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

    The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgrTreeGrid.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Keyboard Navigation

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

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

    Styling

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

    <IgrTreeGrid className="grid">
</IgrTreeGrid>
tsx

    그런 다음 해당 클래스에 대한 관련 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;
}
css

    Demo

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    API References

    Additional Resources

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