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

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

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

8분 읽기

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

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

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

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

옵션을 광범위하게 평가하고 있다면, 메인 React 데이터 그리드 필러 페이지에서 시작하세요. 구현 세부 사항을 원하시면 React Data Grid 컴포넌트 문서를 참고하세요.

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

고급 필터링 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
데모 요청