새로운 기능: Ignite UI for React 18.3.0 릴리스

새로운 기능: Ignite UI for React

최신 Ignite UI for React 18.3.0 릴리스에 새로운 React Data Grid와 수많은 흥미로운 기능이 포함되어 있음을 발표하게 되어 기쁩니다. 더 읽어보기.

15min read

Infragistics 에서는 항상 귀하의 개발 경험을 위한 최고의 구성 요소를 제공하기 위해 노력합니다. 그리고 오늘 Ignite UI for React 18.3.0에는 새로운 React 데이터 그리드가 포함되어 있습니다. React Data Grid는 Ignite UI 제품군의 일부이며 Angular, Web Components 및 Blazor Data Grid와 마찬가지로 동일한 디자인, 동작, UX 및 기능을 공유합니다. 이를 통해 개발 팀은 Angular, Blazor, Web Components 또는 React 간에 원활하게 전환할 수 있으므로 React의 요구 사항 변경에 보다 민첩하게 대처할 수 있습니다.

이제 Ignite UI for React 18.3.0 릴리스에서 출시되는 모든 Data Grid 기능을 개략적으로 살펴볼 때입니다. React 그리드 기능은 다음과 같습니다.

React 데이터 그리드

새로운 React 데이터 그리드 구성 요소는 데이터를 테이블 형식으로 빠르고 쉽게 표시하는 데 사용됩니다. 데이터 그리드는 데이터 편집, 선택, 필터링, 정렬, 그룹화, 고정, 페이징, 템플릿, 열 이동, 내보내기 등과 같은 기능으로 구성된 최신 그리드 구성 요소입니다. Ignite UI for React에 제공된 이전 그리드와 비교하여 새로운 데이터 그리드에는 훨씬 더 많은 기능, 더 풍부한 API 및 기본 제공 테마가 있습니다.

Ignite UI React 데이터 그리드 미리보기

헤더 템플릿

Header Template을 사용하면 Ignite UI for React IgrGrid에서 열 머리글의 모양과 동작을 사용자 지정할 수 있습니다.

셀 템플릿

Cell Template을 사용하면 Ignite UI for React IgrGrid에서 셀의 모양과 동작을 사용자 지정할 수 있습니다.

축소 가능한 열 그룹

Ignite UI의 React Grid Collapsible Column Groups 기능을 사용하면 React Grid에서 여러 수준의 중첩된 열 및 열 그룹을 함께 그룹화하고 향상된 데이터 시각화 및 탐색을 위해 이러한 그룹을 축소하거나 확장할 수 있는 옵션을 제공하여 구성 및 관리할 수 있습니다.

열 숨기기

Ignite UI for React 에는 React Grid 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있는 기본 제공 열 숨기기 UI가 있습니다. 개발자는 필요에 따라 페이지 내의 아무 곳에서나 열 숨기기 UI를 유연하게 정의할 수 있습니다. React 그리드 열 숨기기 기능은 그리드 크기를 줄이고 중복 필드를 탭할 필요가 없도록 하려는 경우에 특히 유용합니다.

컬럼 재정렬 & 이동

Ignite UI의 React 그리드 열 이동 기능을 사용하면 열을 빠르고 쉽게 재정렬할 수 있습니다. 이 작업은 Column Moving API를 통해 수행하거나 마우스 또는 터치 제스처를 통해 헤더를 다른 위치로 끌어다 놓아 수행할 수 있습니다. React Grid에서는 고정된 열과 고정되지 않은 열, 그리고 Multi-Column Headers에 대해서도 Column Moving을 활성화할 수 있습니다.

열 고정

Ignite UI for React의 열 고정을 사용하면 최종 사용자가 특정 열 순서로 열을 잠글 수 있습니다. 결과적으로 이렇게 하면 가로로 스크롤하는 IgrGrid 동안 볼 수 있습니다. React Grid에는 도구 모음을 통해 IgrGrid 열의 고정 상태를 변경하는 데 사용할 수 있는 기본 제공 열 고정 UI가 있습니다. 또한 사용자 지정 UI를 정의하고 Column Pinning 기능을 통해 열의 핀 상태를 변경할 수 있습니다.

열 크기 조정

Ignite UI의 React 그리드 열 크기 조정 기능을 사용하면 그리드의 열 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. 픽셀/백분율로 열 크기 조정, 열 크기 조정, 두 번 클릭 시 열 크기 자동 조정, 초기화 시 열 크기 자동 조정 등 여러 크기 조정 옵션을 사용할 수 있습니다.

열 유형

​IgrGrid Ignite UI for React는 열 데이터 형식에 대한 기본 처리를 제공하며, 이에 따라 기본 템플릿과 편집 템플릿의 모양이 표시됩니다. 지원되는 열 데이터 형식:

  • Number
  • Siring
  • Date
  • Boolean
  • 통화
  • Percent 

조건부 스타일링

Ignite UI의 React 그리드 구성 요소를 사용하면 행 또는 셀 수준에서 사용자 지정 스타일을 지정할 수 있습니다. 그리드 조건부 스타일 지정 기능은 특정 기준을 충족하는 데이터를 시각적으로 강조하거나 강조 표시하여 사용자가 그리드 내에서 중요한 정보나 추세를 쉽게 식별할 수 있도록 합니다.

디스플레이 밀도

Ignite UI의 React Grid Display Density를 사용하면 그리드 내에서 데이터의 간격과 레이아웃을 제어할 수 있습니다. 밀도를 변경하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 경험을 크게 향상시킬 수 있습니다. 세 가지 디스플레이 밀도 옵션 중에서 선택할 수 있습니다.

  • 아늑한
  • 편안한
  • 콤팩트

편집

Ignite UI의 React 그리드 셀 편집 기능은 레코드 생성, 업데이트 및 삭제와 같은 데이터 조작 작업을 쉽게 수행할 수 있는 방법을 제공합니다. React Grid는 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공용 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.

Ignite UI의 React 그리드 셀 편집 기능은 React 그리드 구성 요소 내의 개별 셀 내용에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있도록 합니다. 기본적으로 Ignite UI for React의 그리드는 셀 편집에 사용됩니다. 기본 셀 편집 템플릿으로 인해 열 데이터 유형인 Top of Form에 따라 다른 편집기가 있습니다. 또한 update-data 작업에 대한 사용자 지정 템플릿을 정의하고 변경 사항을 커밋 및 취소하기 위한 기본 동작을 재정의할 수 있습니다.

예시 React 그리드 셀 편집

Ignite UI의 편집 기능을 사용하면 Cascading Combobox 구성 요소를 사용할 수 있습니다. 이전 콤보 상자에서 값을 선택하면 사용자는 다음 React 콤보 상자 구성 요소 내에서 선택한 항목과 관련된 데이터만 받게 됩니다.

인라인 IgrGrid 행 추가를 통해 데이터 조작을 수행하는 편리한 방법과 React CRUD 작업을 위한 강력한 API를 제공합니다. IgrActionStrip 그리드의 템플릿에서 편집 작업이 활성화된 구성 요소를 추가하고, 행을 마우스로 가리키고, 제공된 버튼을 사용하고, "ALT" +" +"를 눌러 UI를 추가하는 행을 생성합니다.

​IgrGrid 인라인 편집을 통해 데이터 조작을 수행하는 편리한 방법과 React CRUD 작업을 위한 강력한 API를 제공합니다. 행을 클릭하고 Enter 키를 누르거나 수정해야 할 행을 마우스로 두 번 클릭하기만 하면 됩니다.

React 그리드 행 추가 및 편집의 예
  • 일괄 편집(출시 예정)

Export to Excel Service

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

필터링

Ignite UI의 React 그리드 필터링은 특정 기준 또는 조건에 따라 데이터를 선택적으로 표시하거나 숨길 수 있는 기능입니다. 구성 요소가 풍부한 필터링 API와 모든 필터링 기능을 제공하는 바인딩된 데이터 컨테이너 IgrGrid가 있습니다. 여기에서 사용할 수 있는 필터링 유형은 세 가지입니다.

Ignite UI의 React Grid Advanced Filtering을 사용하면 React Grid의 모든 열에서 필터링 조건을 사용하여 다른 그룹을 만들 수 있는 대화 상자를 제공하여 데이터를 조작할 수 있습니다.

React Grid Advanced Filtering의 예

React Grid는 Excel과 유사한 필터링 UI를 제공하는 Excel 스타일 필터링 기능을 제공합니다. 대규모 데이터 세트로 작업하는 프로세스를 단순화합니다. 주요 아이디어는 관련 없는 항목을 제거하면서 가장 관련성이 높은 데이터를 필터링하는 데 도움이 되는 것입니다.

React 필터 Excel 스타일 필터링의 예

그룹화 기준

React Grid의 Ignite UI for React Group By 동작은 열 값을 기반으로 그룹화된 데이터 행을 만듭니다. 의 IgrGrid Group By를 사용하면 계층 구조에서 그룹을 시각화할 수 있습니다. 그룹화된 데이터 행은 확장하거나 축소할 수 있으며 UI 또는 API를 통해 그룹화 순서를 변경할 수 있습니다. 행 선택이 활성화되면 Group By 행 선택기가 그룹 행의 가장 왼쪽 영역에 렌더링됩니다. 속성이 single로 설정된 경우 rowSelection 확인란은 비활성화되고 선택이 배치된 그룹에 대한 표시 역할만 합니다. rowSelection 속성이 다중으로 설정된 경우 그룹화 행 선택기를 클릭하면 이 그룹에 속하는 모든 레코드가 선택됩니다.

라이브 데이터 / 실시간 업데이트

그리드의 Ignite UI for React Live Data Updates 기능은 그리드 내에 표시되는 데이터의 실시간 또는 거의 실시간 업데이트를 활성화하는 데 사용됩니다. 이는 주식 시장 추적기, 실시간 스포츠 점수 또는 IoT(사물 인터넷) 대시보드와 같이 데이터가 지속적으로 변경되는 앱에서 매우 유용합니다. IgrGrid 초당 수천 개의 업데이트를 처리하는 동시에 사용자 상호 작용에 대한 응답성을 유지할 수 있습니다.

Master-Detail

구성 요소는 IgrGrid 내용을 확장/축소하여 특정 행에 대한 추가 세부 정보를 표시하는 세부 정보 템플릿 지정을 지원합니다. 지정하면 각 레코드가 마스터 역할을 하며, 확장 시 현재 레코드에 대한 컨텍스트 데이터가 있는 사용자 정의 가능한 세부 정보 템플릿이 표시됩니다.

이 모드는 마스터-디테일 스타일 데이터를 계층 구조로 표시해야 할 때 유용합니다.

키보드 탐색

Ignite UI의 React 그리드 키보드 탐색 기능은 사용자에게 다양한 키보드 상호 작용을 제공합니다. 접근성을 IgrGrid 향상시키고 사용자가 내부의 모든 유형의 요소(셀, 행, 열 머리글, 도구 모음, 바닥글 등)를 탐색할 수 있도록 합니다. 이 기능은 기본적으로 활성화되어 있으며 개발자는 쉬운 방법으로 기본 동작을 재정의할 수 있습니다.

탐색이 W3C 접근성 표준을 준수하고 사용하기 편리하도록 IgrGrid의 표가 줄어들었습니다.

현재 IgrGrid 다음 탭 정지가 도입되었습니다.

  • GroupBy 또는 도구 모음 영역 (활성화된 경우)
  • Grid header.
  • Grid body.
  • Column summaries (if enabled).
  • 그리드 페이지네이터 (활성화된 경우).

Multi-Column Headers 개요

Ignite UI의 React Grid Multi-Column Headers 기능을 사용하면 열을 공통 다중 헤더 아래에 배치하여 그룹화할 수 있습니다. 의 IgrGrid 각 다중 열 머리글 그룹은 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다. 이 기능은 가로로 스크롤하는 것이 번거로울 수 있는 대규모 데이터 세트를 처리할 때 특히 유용합니다

Multi-row Layout

Ignite UI의 React Grid Multi-row Layout 기능은 렌더링 IgrGrid 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 표시되는 여러 행으로 분할할 수 있습니다.

Pagination

Ignite UI의 React 그리드 페이지 매김 기능은 많은 데이터 집합을 유사한 콘텐츠를 가진 페이지 시퀀스로 분할하는 데 사용됩니다. React 그리드 페이지 매김은 사용자 경험과 데이터 상호 작용을 개선합니다. IgrGrid 페이지 매김은 열을 추가하는 것과 유사하게 태그를 정의 IgrPaginator 하여 그리드 트리에 투영된 별도의 구성 요소를 통해 구성할 수 있습니다. 다른 React 테이블과 마찬가지로 React Grid의 페이지 매김은 사용자 지정 페이지에 대한 템플릿을 지원합니다.

원격 데이터 작업

기본적으로 는 IgrGrid 데이터 작업을 수행하기 위해 자체 논리를 사용합니다.

​IgrGrid 의해 노출되는 특정 입력 및 이벤트를 활용하여 이러한 작업을 원격으로 수행하고 결과 데이터를 IgrGrid에 공급할 수 있습니다.

행 작업

​IgrGrid Ignite UI for React의 구성 요소는 행/셀 구성 요소 및 행 고정에 CRUD를 사용하고 IgrActionStrip 활용할 수 있는 기능을 제공합니다. 작업 스트립 구성 요소는 이러한 작업에 대해 미리 정의된 UI 컨트롤을 호스팅할 수 있습니다.

행 끌기

​IgrGrid 행 드래그 Ignite UI for React 루트 IgrGrid 구성 요소에서 초기화되며 입력을 통해 구성할 수 있습니다 rowDraggable. 행 끌기를 사용하도록 설정하면 행 끌기를 시작하는 데 사용할 수 있는 행 끌기 핸들이 제공됩니다.

행 고정

React IgrGrid에서 하나 또는 여러 행을 그리드의 맨 위 또는 맨 아래에 고정할 수 있습니다. 행 고정을 사용하면 최종 사용자가 특정 순서로 행을 고정할 수 있으며, 세로로 스크롤할 때도 항상 볼 수 있는 특수 영역에 행을 복제할 수 있습니다 IgrGrid. 머티리얼 UI 그리드에는 내장 행 고정 UI가 있으며, 이는 컨텍스트 IgrGrid에서 컴포넌트를 IgrActionStrip 초기화하여 활성화됩니다. 또한 Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 고정 상태를 변경할 수 있습니다.

검색 필터

React 그리드 검색을 사용하면 데이터 컬렉션에서 값을 찾는 프로세스를 수행할 수 있습니다. 이 기능을 더 쉽게 설정할 수 있으며 검색 입력 상자, 버튼, 키보드 탐색 및 기타 유용한 기능으로 구현하여 훨씬 더 나은 사용자 경험을 제공할 수 있습니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만 대부분의 경우 IgrGrid 보이지 않는 열과 행을 가상화합니다. 이러한 경우 네이티브 그리드 검색은 DOM의 일부가 아니기 때문에 가상화된 셀의 데이터를 검색할 수 없습니다. Ignite UI for React Material 테이블 기반 그리드를 검색 API 이를 통해 검색할 수 있습니다. 가상화된 콘텐츠의 IgrGrid.

선택

Ignite UI for React IgrGrid 사용하면 다양한 이벤트, 풍부한 API 또는 단일 선택과 같은 간단한 마우스 상호 작용을 사용하여 데이터를 쉽게 선택할 수 있습니다.

셀 선택 

Ignite UI의 React 그리드 셀 선택은 풍부한 데이터 선택 기능을 가능하게 하고 그리드 구성 요소에서 강력한 API를 제공합니다. React 그리드는 세 가지 선택 모드를 지원합니다.

–그리드 다중 셀 선택

– Grid Single Selection

–그리드 없음 선택

열 선택 

Ignite UI의 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시할 수 있는 간단하고 Excel과 유사한 방법을 제공합니다. 입력을 통해 활성화할 수 있습니다 columnSelection. 풍부한 API 덕분에이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터를 추출하고, 데이터 분석 작업 및 시각화를 수행 할 수 있습니다.

행 선택 

React Grid의 행 선택 기능을 사용하면 단일 또는 여러 행의 데이터를 대화식으로 선택, 강조 표시 또는 선택 취소할 수 있습니다. 에서 IgrGrid 사용할 수 있는 여러 선택 모드가 있습니다: None Selection, Multiple Selection, Single Selection

Sizing

React Grid의 크기 조정 기능은 반응이 빠르고 사용자 친화적인 그리드 인터페이스를 만드는 데 중요한 측면입니다. React 그리드 크기 조정 기능을 사용하면 다양한 화면 크기, 콘텐츠 또는 사용자 기본 설정을 수용하도록 그리드의 및 height를 조정할 width 수 있습니다. 의 IgrGrid 테두리 및 패딩 크기 측면에서 너비/높이 크기 계산에 포함되거나 테두리 상자 크기 조정이라고도 합니다. 모든 시나리오에 적용됩니다.

정렬

React Grid의 데이터 정렬 기능은 열별 수준에서 활성화되며, 이는 정렬 가능한 열과 정렬할 수 없는 열을 혼합할 수 있음을 의미합니다 IgrGrid. React 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.

요약

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

가상화 및 성능

Ignite UI for React에서 IgrGrid 컨트롤은 콘텐츠를 수직 및 수평으로 가상화합니다.

툴바

Ignite UI for React React Grid의 UI 작업을 위한 컨테이너입니다. React 툴바는 React 구성 요소, 즉 IgrGrid의 맨 위에 있으며 가로 크기와 일치합니다. 툴바 컨테이너는 사용자 정의 콘텐츠나 미리 정의된 UI 컨트롤 세트를 호스팅할 수 있습니다. React Grid의 기본 세트에는 다음이 포함됩니다.

툴바와 미리 정의된 UI 구성 요소는 React 이벤트를 지원하고 개발자에게 API를 제공합니다.

테마

당사의 React 그리드는 브랜드 아이덴티티에 맞게 쉽게 사용자 정의할 수 있습니다. 미리 정의된 테마와 색상표 외에도 CSS 사용자 지정 속성 집합을 사용하여 데이터 그리드의 모양과 느낌을 추가로 사용자 지정할 수 있습니다.

요약

Microsoft는 더 많은 노하우를 제공할 수 있도록 최고의 React UI 툴킷 및 관련 인사이트를 제공하기 위해 최선을 다하고 있으므로 지속적인 일정에 따라 새로운 기능을 지속적으로 제공하고, 성능을 개선하고, 안정성을 개선하기 위해 최선을 다하고 있습니다.

이 릴리스의 각 부분에 대한 세부 정보가 있으며 여기에서 확인할 수 있습니다.

자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.

마지막으로, 저희 컨트롤로 멋진 것을 만들 때 저희에게 알려주세요.

Angular
데모 요청