Ignite UI를 사용하여 React Excel과 유사한 그리드 구축

Ignite UI를 사용하여 React Excel과 유사한 그리드 구축

React Excel과 같은 그리드를 구축하는 것은 쉽지 않지만 Ignite UI for React 놀라울 정도로 간단합니다. 몇 분 안에 정렬, 필터링, 편집, Excel과 유사한 탐색 및 Excel 내보내기를 지원하는 기능이 풍부한 고성능 그리드를 통합할 수 있습니다.

6min read

기본 데이터 표시는 더 이상 최신 엔터프라이즈 애플리케이션에서 추격을 잘라내지 않습니다. 종종 그들은 그 이상을 요구합니다. 비즈니스 사용자는 정렬, 필터링, 편집, 계층적 데이터 구조 및 원활한 Excel 내보내기를 갖춘 Microsoft Excel의 기능과 친숙함을 모방한 풍부한 대화형 데이터 테이블을 기대합니다.

React 개발자라면 이러한 유형의 그리드를 처음부터 구축하는 것이 어려울 수 있습니다. 다행스럽게도 Ignite UI for React는 성능이나 유연성을 희생하지 않고도 이를 쉽게 수행할 수 있는 포괄적인 솔루션을 제공합니다.

React에서 Excel과 유사한 그리드는 무엇입니까?

React의 Excel과 유사한 그리드는 필수 스프레드시트 동작과 사용자 기대치를 복제하는 데이터 테이블을 나타냅니다. 이렇게 하면 개발자는 Excel 자체를 포함할 필요가 없습니다. Excel 스타일 환경을 정의하는 주요 React 그리드 기능은 다음과 같습니다.

  • Sorting columns 
  • Excel-like keyboard navigation 
  • Filtering using drop-down menus 
  • Inline editing 
  • 클립보드 작업
  • Excel 호환 형식으로 내보내기

이러한 기능은 관리 대시보드, 금융 앱, ERP 및 분석 플랫폼과 같은 앱에 필수적입니다. 사용자가 비즈니스 분석가이든 SaaS 고객이든 관계없이 빠르고 직관적으로 작동하는 그리드 구성 요소를 기대합니다.

처음부터 하나를 만드는 도전

React Excel과 유사한 그리드 환경을 수동으로 다시 만드는 것은 특히 다음을 고려할 때 사소한 작업이 아닙니다.

  • 가상화: 행/열 가상화가 없으면 대규모 데이터 세트(10,000+ 행)에서 성능이 빠르게 저하됩니다.
  • 엑셀 내보내기: 데이터 유형, 서식 및 구조를 유지하는 실제 Excel 파일(CSV뿐만 아니라)을 생성하려면 복잡한 외부 라이브러리가 필요한 경우가 많습니다.
  • 고급 기능: 정렬, Excel 스타일 필터링, 키보드 탐색, 편집 및 내보내기를 응집력 있는 환경에서 함께 구현한다는 것은 일반적으로 여러 라이브러리를 함께 연결하거나 처음부터 구축하는 것을 의미합니다.
  • 확장성: 맞춤형 솔루션은 기능이 증가함에 따라 기술 부채가 되는 경우가 많습니다. 이로 인해 ReactExcel과 유사한 그리드를 팀이나 제품 전반에 걸쳐 유지 관리하거나 확장하기가 더 어려워집니다.

대부분의 팀에서 이 접근 방식은 비용이 많이 들고 오류가 발생하기 쉬우며 빠른 배송에 병목 현상이 발생합니다.

왜 Ignite UI for React 선택

Ignite UI for React는 기본적으로 모든 필수 스프레드시트 기능을 포함하는 고성능 React Excel과 유사한 그리드를 갖춘 포괄적인 UI 툴킷입니다. 복잡한 데이터 표시 및 엔터프라이즈 사용 사례를 위해 특별히 제작되었습니다.

주요 기능은 다음과 같습니다:

  • 대규모 데이터 세트를 위한 고성능 가상화
  • 계층적 데이터 표시 및 지원(그룹화, 계층적 그리드, 트리 그리드 등을 통해)
  • 기본 제공 Excel 내보내기(실제 .xlsx 형식 또는 CSV)
  • 셀 편집, 요약, 그룹화
  • Custom cell templates 
  • Excel 스타일 필터링
  • Column pinning, column hiding, summaries, and more 
  • Keyboard navigation support 
  • 접근성 및 키보드 단축키(ARIA 준수)

View Data Grid Documentation 

Excel 스타일 필터링: 활성화 방법

비즈니스 사용자에게 가장 유용한 기능 중 하나는 Excel 스타일 필터링으로, 열 머리글에 다음과 같은 드롭다운 메뉴를 제공합니다.

  • 값으로 필터링(확인란)
  • 조건별 필터링(같음, 포함, 보다 큼 등)
  • Custom filter dialogs 
  • 필터 지우기 옵션
  • 그리고 더 많은

Ignite UI에서 활성화하려면 :

<IgrGrid
    data={nwindData}  
    autoGenerate={true}  
    allowFiltering={true}  
    filterMode="excelStyleFilter">  
</IgrGrid>

이렇게 하면 자체 드롭다운이나 논리를 연결할 필요 없이 필터링을 위해 각 열에 친숙한 Excel과 유사한 인터페이스를 제공합니다.

여기에서 Ignite UI 그리드 Excel 스타일 필터링에 대한 전체 설명서를 확인하세요.

Excel로 내보내기 구성

Excel 내보내기는 특히 사용자가 앱 외부에서 데이터를 공유, 보관 또는 분석해야 하는 경우 엔터프라이즈 그리드의 필수 기능입니다. Ignite UI for React 그리드 데이터를 완전한 형식의 .xlsx 파일이나 간단한 .csv 파일로 쉽게 내보낼 수 있습니다.

Excel 내보내기를 활성화하려면 다음을 수행합니다.

<IgrGrid autoGenerate={true} data={nwindData}>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarExporter exportCSV={true} exportExcel={true}>
            </IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

이렇게 하면 헤더, 데이터 유형 및 그룹화(해당되는 경우)를 포함하여 현재 데이터 세트가 포함된 실제 Excel 파일이 생성됩니다. 외부 Excel 라이브러리가 필요하지 않습니다.

여기에서 Excel Service로 Ignite UI 그리드 내보내기에 대한 전체 설명서를 확인하세요.

Excel-Style Keyboard Navigation Setup 

Excel 사용자는 유연하고 직관적인 키보드 상호 작용을 기대합니다. 그러나 웹 그리드에서 이를 복제하려면 몇 가지 사용자 지정 설정이 필요합니다. 그렇기 때문에 Ignite UI for React 이벤트 후크와 대상 논리를 사용하여 전체 Excel 스타일 키보드 탐색을 구현할 수 있는 유연성을 제공합니다.

이를 위해 세 가지 기능을 소개합니다.

  • cancelGridKeydown, bound to onGridKeydown.
  • handleArrowKeydown, bound to onKeyDownCapture.
  • handleKeydown, 네이티브 keydown 이벤트에 연결됩니다.

각 함수는 Excel 스타일 환경의 특정 부분을 처리합니다.

  • handleKeydown은 문자 입력 및 Enter 기반 탐색을 관리합니다.
  • cancelGridKeydown prevents the grid’s default Enter behavior.
  • and handleArrowKeydown enables arrow key navigation between editable cells. 

Key behaviors this setup enables: 

  • A-Z 또는 0-9를 입력하면 편집 모드로 들어가 즉시 입력이 시작됩니다.
  • Enter 또는 Shift + Enter를 누르면 편집을 커밋하는 동안 아래/위로 이동합니다.
  • 화살표 키는 편집 모드를 유지하면서 편집 가능한 셀 사이를 이동합니다.
  • 탐색은 그룹 머리글, 요약 및 편집할 수 없는 셀을 건너뜁니다.

이 설정은 Excel과 같은 원활한 탐색 환경을 제공하며, 이는 주로 키보드로 작업하거나 데이터 입력 및 검토를 위해 키보드 우선 UI를 선호하는 사용자에게 매우 중요합니다.

Ignite UI 그리드가 더 나은 이유는 무엇입니까?

Unlike a lightweight React grid component and React table libraries or custom DIY setups, Ignite UI is built for scalable enterprise applications. Here’s what sets it apart: 

  • 성능: 100k+ 행에서도 번개처럼 빠른 상호 작용을 위한 가상화된 렌더링
  • 기능 완료 e: Excel 내보내기, 그룹화, 요약, 필터, 정렬, 페이징 및 사용자 지정 템플릿. 모든 것이 내장되어 있습니다.
  • 고도로 사용자 정의 가능: 테마 지원, CSS 재정의, 열 템플릿 및 현지화를 통해 셀 수준까지 앱의 모양과 느낌을 일치시키는 데 필요한 모든 스타일 지정 및 구성 도구를 사용할 수 있습니다.
  • 개발자 우선: TypeScript 지원, 전체 API 문서 및 엔터프라이즈급 지원 옵션.
  • 보안 및 지원: 전담 지원과 빈번한 업데이트를 통해 현장에서 실전 테스트를 거쳤습니다.

싸다...

React Excel과 같은 그리드를 구축하는 것은 쉽지 않지만 Ignite UI for React 놀라울 정도로 간단합니다. 몇 분 안에 정렬, 필터링, 편집, Excel과 유사한 탐색 및 Excel 내보내기를 지원하는 기능이 풍부한 고성능 그리드를 통합할 수 있습니다.

React How To
데모 요청