더 나은 UX 및 성능을 위한 상위 5가지 React 그리드 기능

더 나은 UX 및 성능을 위한 상위 5가지 React 그리드 기능

React 데이터 그리드를 선택할 때는 성능 및 가격 외에도 실제 사용자가 데이터 그리드와 상호 작용하는 방식과 앱 요구 사항 및 사용자의 기대에 부응하는 데 필요한 기능도 고려해야 합니다. 고급 필터링, 상태 지속성, 키보드 탐색 및 Excel로 내보내기와 같은 기능은 단순히 필요한 것이 아닙니다.

8min read

React는 애플리케이션 구축을 위해 전 세계 개발자들 사이에서 가장 많이 사용되는 웹 프레임워크 중 하나입니다. 현재까지 130만 개 이상의 웹사이트가 이를 활용하고 있으며, 이 기술을 활용하는 팀과 React 프로그래머의 수는 매일 기하급수적으로 증가하고 있습니다. 그 이유는 다음과 같습니다.

  • 구성 요소 기반 아키텍처
  • Flexibility
  • 그리고 풍부한 도서관 생태계

이 모든 것을 통해 대화형 사용자 인터페이스를 빠르고 효율적으로 구축할 수 있습니다. 개발자가 자주 필요로 하는 필수 UI 구성 요소 중 하나는 데이터를 표시하고 조작하기 위한 강력한 테이블과 같은 구조인 데이터 그리드입니다. 그러나 포괄적인 그리드를 갖춘 최고의 앱을 만들려면 개발자에게 포괄적인 데이터 그리드 기능이 필요합니다. 그러나 React 라이브러리에서 찾아야 할 상위 5가지 React 그리드 기능은 무엇입니까?

이 기사에서는 Ignite UI for React Grid를 살펴보고 최고의 React 기능과 해당 사용 사례 목록을 제공합니다. 필요한 기능은 다음과 같습니다.

고급 필터링 – 복잡한 필터 조건용

고급 필터링 Ignite UI for React 테이블 기능 중 최고의 React 기능 중 하나로 나열한 것은 및/또는 피연산자를 사용하여 다양한 조건으로 복잡한 필터링 쿼리를 생성할 수 있는 기능을 제공하기 때문입니다.

필터링 조건과 그룹을 생성했으면 데이터를 필터링하기 위해 해야 할 일은 적용 버튼을 클릭하는 것뿐입니다. 고급 필터를 수정했지만 변경 사항을 유지하지 않으려면 취소 버튼을 클릭합니다. 필터 지우기 버튼을 클릭하여 고급 필터를 지울 수도 있습니다.

고객 사례

  • 정의된 기간 동안 발생한 특정 값 이상의 모든 판매를 찾습니다.
  • 사용자가 특정 위치에서 특정 제품의 재고를 찾을 수 있는 패널입니다.
  • 많은 수의 트랜잭션을 필터링하는 재무 대시보드입니다.

다음은 특정 기준을 충족하는 특정 시점을 지나는 모든 날짜를 필터링하는 방법에 대한 짧은 비디오입니다.

최고의 React 그리드 기능 중 고급 필터링

고급 필터링을 활성화하는 방법은 무엇입니까?

React 그리드 기능 중 하나로 고급 필터링이 필요하고 활성화하려면 allowAdvancedFiltering 입력 속성을 true로 설정해야 합니다.

<IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>

    <IgrGridToolbar></IgrGridToolbar>

</IgrGrid>

고급 필터링은 advancedFilteringExpressionsTree 입력 속성에 저장되는 filteringExpressionsTree를 생성합니다. advancedFilteringExpressionsTree 속성을 사용하여 고급 필터링의 초기 상태를 설정할 수 있습니다.

const filteringTree: IgrFilteringExpressionsTree = {

    operator: FilteringLogic.And,

    filteringOperands: [

        {

            fieldName: "ProductID",

            condition: new IgrNumberFilteringOperand().condition("doesNotEqual"),

            searchVal: 1,

            ignoreCase: true,

        },

        {

            fieldName: "ProductName",

            conditionName: "startsWith",

            searchVal: "Ch",

            ignoreCase: true,

        }

    ]

};

<IgrGrid data={data} allowFiltering={true} advancedFilteringExpressionsTree={filteringTree}>

    <IgrGridToolbar>

        <IgrGridToolbarActions>

            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>

        </IgrGridToolbarActions>

    </IgrGridToolbar>

    <IgrColumn field="ProductID" filterable={true} dataType="number"></IgrColumn>

    <IgrColumn field="ProductName" dataType="string" filterable={true}></IgrColumn>

상태 지속성 – 그리드 보기 저장 및 복원

그리드 상태를 간단한 방법으로 저장하고 복원하시겠습니까? Ignite UI for React 그리드에서 상태 지속성 기능을 사용합니다. 적용한 모든 변경 사항은 페이지가 다시 로드된 후 저장되고 복원됩니다. IgrGridState가 React IgrGrid에 적용되면 GetState, GetStateAsString, ApplyState 및 ApplyStateFromString 메서드가 노출됩니다. 이렇게 하면 모든 시나리오에서 상태 지속성을 달성하는 데 도움이 됩니다. 사용자가 데이터 표시 방식 측면에서 일관성과 사용자 정의가 필요한 앱에 이상적이기 때문에 상위 5개 React 그리드 기능 중 하나입니다.

고객 사례

  • 정렬, 열 크기 조정, 필터 적용 및 자동으로 저장할 수 있는 설정을 통해 사용자 정의가 필요한 그리드 레이아웃의 경우.
  • 사용자가 다시 로그인한 후에도 필터링되고 사용자 지정된 작업 보기를 동일하게 유지하기를 원하는 작업 관리 앱입니다.
  • 사용자가 경비 레코드 또는 정의된 예산의 특정 열 구성을 저장할 수 있는 재무 팀 보고 대시보드입니다.
React의 상태 지속성 샘플

상태 지속성을 활성화하는 방법은 무엇입니까?

<IgrGrid>

    <IgrGridState ref={gridStateRef}></IgrGridState>

</IgrGrid>

// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API

const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string

const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions

const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

키보드 탐색 – 생산성 및 접근성 향상을 위한 단축키

데이터가 많은 React 앱의 경우 키보드 탐색은 더 빠른 데이터 입력 및 편집을 허용하고 다른 그리드 기능과 상호 작용하는 데에도 사용되기 때문에 가장 효율적인 React 그리드 기능 중 하나입니다.

React 키보드 탐색 기능은 정렬 및 그룹화 옵션을 포함하여 사용자에게 다양한 키보드 상호 작용을 제공합니다. 그리드의 접근성을 향상시키고 내부의 모든 유형의 요소(셀, 행, 열 머리글, 도구 모음, 바닥글 등)를 원활하게 탐색할 수 있습니다. Ignite UI for React Grid에서 이 기능은 기본적으로 활성화되어 있으며 기본 동작을 쉽게 재정의할 수 있습니다.

React 그리드 기능 및 키보드 탐색

고객 사례

  • 사용자가 티켓을 빠르게 처리해야 하는 고객 지원 CRM의 경우.
  • 키보드 명령에 의존하여 그리드 콘텐츠를 탐색하는 스크린 리더 사용자가 사용하는 접근성 중심 앱입니다.
  • 키보드만으로 대량의 데이터를 추가할 수 있는 스프레드시트 스타일의 재무 도구입니다.

또한 사용자는 내장 이벤트를 활용하여 탐색 기능의 대부분을 재정의할 수 있으므로 앱의 요구 사항에 더 가깝게 경험을 조정할 수 있습니다.

키보드 탐색을 사용자 정의하는 방법은 무엇입니까?

<IgrGrid id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>

</IgrGrid>

const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {

  const args = eventArgs.detail;

  const target= args.target;

  const evt = args.event;

  const type = args.targetType;

  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {

      // 1. USER INPUT VALIDATION ON TAB

  }

  if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {

      // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS

  }

}

Excel로 내보내기 – 데이터 공유 및 분석

그리드의 Excel로 내보내기 기능을 사용하면 그리드 데이터를 Excel로 직접 빠르게 내보낼 React 있습니다. 이 형식을 사용하면 앱 외부에서 데이터 필터링, 정렬 및 공유와 같은 React 기능을 사용할 수 있습니다. Ignite UI for React 사용하는 경우 데이터 내보내기 기능은 ExcelExporterService 클래스에 캡슐화되고 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이렇게 하려면 ExcelExporterService의 Export 메서드를 호출하고 IgrGrid 구성 요소를 첫 번째 인수로 전달하여 그리드를 쉽게 내보내야 합니다.

상위 React 개 그리드 기능 중 Excel로 내보내기

고객 사례

  • 클릭 한 번으로 팀 또는 이해관계자 간에 작업 진행 상황을 공유하고 모든 필터를 보존합니다.
  • 팀 회의를 위한 보고서 준비.
  • 관리자가 필터링된 판매 데이터를 내보내는 판매 대시보드의 경우.

How to Export Grid with Frozen Column Headers?

function exportEventFreezeHeaders(args: IgrExporterEventArgs) {

    args.detail.options.freezeHeaders = true;

  }

<IgrGridToolbar>

  <IgrGridToolbarActions>

    <IgrGridToolbarExporter onExportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>

  </IgrGridToolbarActions>

</IgrGridToolbar>

피벗 그리드 – 복잡한 분석 단순화

React Pivot Grid

​React 피벗 그리드에 Ignite UI 사용하면 피벗 테이블에 데이터를 표시할 수 있으므로 사용자가 제공된 데이터 세트에 대해 복잡한 분석을 수행할 수 있습니다. 정확히 기능은 아니지만 사용자가 나중에 교차 테이블 형식으로 표시할 수 있는 대용량 데이터 볼륨을 구성, 요약 및 필터링할 수 있도록 구축한 전체 구성 요소입니다. 행 차원, 열 차원, 집계 및 필터와 같은 주요 React 그리드 기능이 있습니다.

고객 사례

  • ​Reveal 스타일 도구 또는 다른 도구로 내보내거나 SQL 쿼리를 작성할 필요 없이 앱에서 직접 데이터를 슬라이싱 및 다이싱해야 하는 데이터 분석가를 위한 사용자 지정 데이터 대시보드의 경우.
  • 다차원 피벗 테이블 구조로 데이터를 구성하고 표시하여 환자 기록을 분석할 수 있는 병원 관리 대시보드입니다.
  • 카테고리, 위치 등별로 재고 수준을 피벗하는 소매 재고 앱

피벗 그리드를 활성화하는 방법은 무엇입니까?

다음은 기본 피벗 구성입니다.

const pivotConfiguration1: IgrPivotConfiguration = {

    columns: [

        new IgrPivotDateDimension({

            enabled: true,

            memberName: "Date",

        })

    ],

    rows: [

        {

            enabled: true,

            memberName: "SellerCity"

        },

        {

            enabled: true,

            memberName: "ProductName"

        }

    ],

    filters: [

        {

            enabled: true,

            memberName: "SellerName"

        }

    ],

    values: [

        {

            member: "ProductUnitPrice",

            displayName: "Amount of Sale",

            dataType: "currency",

            enabled: true,

            aggregate: {

                    aggregatorName: "SUM",

                    key: "SUM",

                    label: "Sum of Sale",

                }

        }

    ]

};

이 구성은 각 차원 그룹의 값을 합산하는 1개의 행, 1개의 열 및 1개의 집계를 정의합니다. 멤버는 제공된 데이터 소스에서 사용할 수 있는 필드와 일치합니다.

public data = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },

];

싸다

​React 데이터 그리드를 선택할 때 성능과 가격 외에도 실제 사용자가 데이터 그리드와 상호 작용하는 방식과 앱 요구 사항 및 사용자의 기대치에 맞는 기능이 무엇인지도 고려해야 합니다. 고급 필터링, 상태 지속성, 키보드 탐색 및 Excel로 내보내기와 같은 기능은 필수만 있는 것이 아닙니다.

단순 및 복잡한 애플리케이션 모두에 대한 다양한 시나리오에서 더 나은 개발자 생산성, 향상된 사용자 경험, 사용자 정의 가능성 및 확장 가능한 데이터 관리를 보장합니다. 또한 Pivot Grid의 기능과 함께 사용하면 이 모든 기능을 통해 앱의 미래를 보장하고 깔끔한 코드를 유지하여 React 프로젝트를 쉽게 발전시킬 수 있습니다.

React
데모 요청