새로운 기능: Ignite UI for React

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 그리드 셀 편집
• 계단식 콤보
• 행 추가
• 행 편집
• Export to Excel Service
• 필터링
• React 그리드 고급 필터링
• Excel 스타일 필터링
• 그룹화 기준
• 라이브 데이터 / 실시간 업데이트
• 마스터-디테일
• 키보드 탐색
• Multi-Column Headers 개요
• 다중 행 레이아웃
• Pagination
• 원격 데이터 작업
• 행 작업
• 행 끌기
• 행 고정
• 검색 필터
• 선택
• 셀 선택
• 열 선택
• 행 선택
• 사이징
• 정렬
• 요약
• 가상화 및 성능
• 툴바
• 테마

React 데이터 그리드

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

헤더 템플릿

헤더 템플릿은 Ignite UI for ReactIgrGrid에서 열 헤더의 외관과 동작을 사용자 지정할 수 있게 해줍니다.

셀 템플릿

셀 템플릿은 Ignite UI for ReactIgrGrid 내에서 셀의 외관과 동작을 맞춤 설정할 수 있게 해줍니다.

축소 가능한 열 그룹

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 그리드에는 내장 열을 고정하는 UI가 있어, 툴IgrGrid 바를 통해 열의 핀 상태를 변경할 수 있습니다. 또한, 커스텀 UI를 정의하고 Column Pinning 기능을 통해 열의 핀 상태를 변경할 수 있습니다.

열 크기 조정

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

열 유형

Ignite UI for ReactIgrGrid 기본 열(column) 데이터 타입 처리를 제공하여, 이를 기반으로 기본 템플릿과 편집 템플릿의 외관이 나타납니다. 지원되는 열 데이터 타입:

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

조건부 스타일링

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

디스플레이 밀도

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

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

편집

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

• React 그리드 셀 편집

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

• 계단식 콤보

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

• 행 추가

인IgrGrid 라인 행 더하기를 통해 데이터 조작을 편리하게 수행할 수 있는 방법과 React CRUD 연산을 위한 강력한 API를 제공합니다. 그리드 템플릿에서 편집 동작이 활성화된 컴포넌트를IgrActionStrip 추가하고, 행을 마우스로 올리고 제공된 버튼을 사용한 뒤, "ALT" + "+" 버튼을 눌러 UI를 추가하는 행을 생성합니다.

• 행 편집

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

• 일괄 편집(출시 예정)

Export to Excel Service

Ignite UI의 React Grid Excel Exporter 서비스는 데이터를 Excel로 내보낼 수 있습니다. 데이터 내보내기 기능은 클래스에ExcelExporterService 캡슐화되어 있으며, 데이터는 MS Excel 테이블 형식으로 내보냅니다. 이 포맷은 필터링, 정렬 등과 같은 기능을 가능하게 합니다. 이를 위해서는 메서드Export를ExcelExporterService 호출하고 Grid 컴포넌트를 첫 번째 인자로 전달하여 그리드를 쉽게 내보내야 합니다.

필터링

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

• React 그리드 고급 필터링

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

• Excel 스타일 필터링

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

그룹화 기준

React 그리드의 Ignite UI for React 그룹별 행동은 열 값을 기반으로 그룹화된 데이터 행을 생성합니다. 그룹IgrGrid은 계층적 구조로 그룹을 시각화할 수 있게 해줍니다. 그룹화된 데이터 행은 확장하거나 접힐 수 있으며, UI나 API를 통해 그룹화 순서를 변경할 수 있습니다. Row Select가 활성화되면 그룹 행의 가장 왼쪽 영역에 'Group By row' 셀렉터가 렌더링됩니다. 속성이rowSelection 단일로 설정되어 있을 경우, 체크박스는 비활성화되어 선택이 이루어진 그룹에 대한 표시로만 사용됩니다. 속성이rowSelection 멀티플로 설정되어 있다면, '그룹 별(Group By row)' 선택기를 클릭해 해당 그룹에 속하는 모든 레코드를 선택합니다.

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

그리드의 Ignite UI for React 실시간 데이터 업데이트 기능은 그리드 내에 표시되는 데이터를 실시간 또는 거의 실시간 업데이트하는 데 사용됩니다. 이는 주식 시장 추적기, 실시간 스포츠 점수, IoT(사물인터넷) 대시보드처럼 데이터가 끊임없이 변하는 앱에서 매우 유용합니다.IgrGrid 초당 수천 건의 업데이트를 처리할 수 있으면서도 사용자 상호작용에 대응할 수 있습니다.

Master-Detail

이 컴포넌트는IgrGrid 특정 행의 내용을 확장하거나 접어 추가 세부사항을 표시하는 세부 템플릿을 지정하는 것을 지원합니다. 지정이 있을 때 각 레코드는 마스터 역할을 하며, 확장하면 현재 레코드의 맥락 데이터를 포함한 맞춤형 세부 정보 템플릿을 보여줍니다.

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

키보드 탐색

Ignite UI의 React 그리드 키보드 내비게이션 기능은 사용자에게 다양한 키보드 상호작용을 제공합니다. 이 기능은 접근IgrGrid 성을 높이고, 셀, 행, 열 헤더, 툴바, 푸터 등 모든 유형의 요소를 탐색할 수 있게 해줍니다. 이 기능은 기본적으로 활성화되어 있으며, 개발자는 기본 동작을 쉽게 무시할 수 있습니다.

​IgrGrid이 계산 단위는 W3C 접근성 기준을 준수하고 사용하기 편리하도록 축소되었습니다.

현재 다음과IgrGrid 같은 탭 스톱을 도입하고 있습니다:

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

Multi-Column Headers 개요

Ignite UI의 React 격자 다중 열 헤더 기능은 열을 공통 다중 헤더 아래에 배치하여 그룹화할 수 있게 해줍니다. 각IgrGrid 다중 열 헤더 그룹은 다른 그룹이나 열의 조합을 표현할 수 있습니다. 이 기능은 수평으로 스크롤하는 것이 번거로울 수 있는 대규모 데이터셋을 다룰 때 특히 유용합니다

Multi-row Layout

Ignite UI의 React 격자 다중 행 레이아웃 기능은 렌더링 기능을IgrGrid 확장합니다. 이 기능은 단일 데이터 레코드를 여러 개의 가시적 행으로 분할할 수 있게 해줍니다.

Pagination

Ignite UI의 React 격자 페이지네이션 기능은 많은 데이터를 유사한 내용을 가진 페이지 연속으로 분할하는 데 사용됩니다. React 그리드 페이지네이션은 사용자 경험과 데이터 상호작용을 향상시킵니다.IgrGrid 페이지네이션은 태그를 정의하여IgrPaginator 별도의 컴포넌트를 통해 격자 트리에 투영하여 구성할 수 있으며, 이는 열을 추가하는 것과 유사합니다. React 표와 마찬가지로, React 그리드의 페이지 지정은 맞춤 페이지용 템플릿을 지원합니다.

원격 데이터 작업

기본적으로 데이터IgrGrid 연산을 수행할 때 자체 로직을 사용합니다.

이러한 작업은 원격으로 수행하고, 특정 입력과 이벤트를 활용하여 데이터를IgrGrid 제공할 수 있습니다.IgrGrid​

행 작업

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

행 끌기

Ignite UI for ReactIgrGrid 행 드래그는 루트IgrGrid 컴포넌트에서 초기화되며 입력을rowDraggable 통해 구성할 수 있습니다. 행 드래그를 활성화하면 사용자는 행 드래그 핸들을 통해 행 드래그를 시작할 수 있습니다.

행 고정

ReactIgrGrid 에서는 격자의 상단이나 하단에 한 행 또는 여러 행을 고정할 수 있습니다. 행 고정은 사용자가 특정 순서로 행을 고정할 수 있게 해주며, 수직으로 스크롤IgrGrid 해도 항상 보이는 특별한 영역에 중복 배치할 수 있습니다. Material UI Grid에는 내장된 행 고정 UI가 있으며, 이는 컨텍스트IgrActionStrip에서 컴포넌트를IgrGrid 초기화함으로써 활성화됩니다. 또한, Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 핀 상태를 변경할 수 있습니다.

검색 필터

React 그리드 서치는 데이터 수집에서 값을 찾는 과정을 가능하게 합니다. 이 기능을 설정하기 쉽게 만들었으며, 검색 입력 박스, 버튼, 키보드 내비게이션 등 유용한 기능들을 통해 더욱 나은 사용자 경험을 제공합니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만, 대부분의 경우IgrGrid 시야에서 벗어난 열과 행을 가상화합니다. 이 경우 네이티브 그리드 검색은 가상화된 셀의 데이터를 검색할 수 없는데, 이는 DOM의 일부가 아니기 때문입니다. 우리는 Ignite UI for React Material 테이블 기반 그리드를 다음과 같이 확장했습니다 검색 API이 기능을 통해 검색할 수 있습니다. 가상화된 콘텐츠​IgrGrid.

선택

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

셀 선택 

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

–그리드 다중 셀 선택

– Grid Single Selection

–그리드 없음 선택

열 선택 

Ignite UI의 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 하이라이트할 수 있는 단순화되고 엑셀과 유사한 방식을 제공합니다. 입력을columnSelection 통해 활성화할 수 있습니다. 풍부한 API 덕분에 선택 상태 조작, 선택된 분수에서 데이터 추출, 데이터 분석 작업 및 시각화가 용이합니다.

행 선택 

React 그리드의 행 선택 기능은 사용자가 단일 또는 여러 행의 데이터를 인터랙티브하게 선택, 강조 표시 또는 해제할 수 있게 합니다. 선택 모드IgrGrid는 여러 가지가 있습니다: 무선택 선택, 다중 선택, 단일 선택

Sizing

React Grid의 사이징 기능은 반응성이 뛰어나고 사용자 친화적인 그리드 인터페이스를 만드는 데 중요한 요소입니다. React 그리드 크기 조절 기능은 사용자가 그리드의 와width 값을 조정height 하여 화면 크기, 콘텐츠 또는 사용자 선호도를 조정할 수 있게 해줍니다. 테두리와 패딩 크기IgrGrid 측면에서는 너비/높이 크기 계산, 즉 보더 박스 사이즈 계산에 반영됩니다. 모든 상황에 적용됩니다.

정렬

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

요약

React Grid의 요약 기능은 각 열별로 그룹 풋터로 기능합니다. React 그리드 요약은 사용자가 열 정보를 별도의 컨테이너에서 볼 수 있는 강력한 기능으로, 열의 데이터 유형에 따라 또는 사용자 지정 템플릿IgrGrid을 구현하여 미리 정의된 기본 요약 항목 세트를 통해 볼 수 있습니다.

가상화 및 성능

Ignite UI for React 에서는 컨트롤이IgrGrid 콘텐츠를 수직과 수평으로 모두 가상화합니다.

툴바

Ignite UI for React 툴바는 React 그리드에서 UI 작업을 위한 컨테이너입니다. React 툴바는 React 컴포넌트의 상단, 즉 가IgrGrid로 크기와 일치합니다. 툴바 컨테이너는 모든 커스텀 콘텐츠나 미리 정의된 UI 컨트롤 세트를 호스팅할 수 있습니다. React 그리드의 기본 설정은 다음과 같습니다:

• 열 숨기기
• 열 고정
• Excel 내보내기
• 고급 필터링

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

테마

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

요약

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

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

• Ignite UI for React – GitHub

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

• 디스코드 채널
• GitHub 토론
• README
• YouTube 채널
• Twitter

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