UX 중심 기능을 갖춘 테마별 반응 데이터 그리드

반응형

KendoReact는 앱에서 즉시 사용할 수 있는 사전 빌드 구성 요소를 제공하기 때문에 많은 시간을 절약할 수 있습니다. 그것들은 좋아 보이지만, 더 중요한 것은, 쉽게 테마화 될 수 있기 때문에 여러분이 보기 위해 필요한 대로 보입니다. 그리고 외모가 중요한 부분도 아니라고 생각합니다. 비주얼에 초점을 맞춘 많은 구성 요소 라이브러리가 있습니다. 이러한 구성 요소는 UI/UX에서 가장 어려운 상호작용 문제를 해결하고 성능, 속도 및 접근성을 염두에 두고 수행합니다.

반응 데이터 그리드 구성 요소를 살펴보겠습니다.

The ol’ `<table>` element is the right tool for the job for data grids, but a table doesn’t offer most of the features that make for a good data browsing experience. If we use the KendoReact `<Grid />` component (and friends), we get an absolute ton of extra features, any one of which is non-trivial to pull off nicely, and all together make for an extremely compelling solution. Let’s go through a list of what you get.

 

정렬 가능한 열

 

데이터에 대한 기본 순서를 선택할 수 있지만, 데이터 행에 ID, 날짜 또는 이름이 있으면 사용자가 해당 데이터를 기준으로 열을 정렬할 가능성이 높습니다. 가장 오래된 주문 또는 가장 높은 총 값의 주문을 보려고 할 수 있습니다. HTML은 테이블 정렬에 도움이 되지 않으므로 데이터 그리드용 자바스크립트 라이브러리의 테이블 판돈(Get it?!)이며 여기에서 완벽하게 처리됩니다.

페이지화 및 한계

예를 들어, 데이터 행이 수십 개 이상인 경우 페이지별로 나누는 것이 일반적입니다. 이렇게 하면 사용자가 스크롤을 많이 할 필요가 없으며, 마찬가지로 중요한 것은 DOM을 너무 크게 만들지 않음으로써 페이지를 빠르게 유지한다는 것입니다. 페이지 매김의 문제 중 하나는 분류와 같은 것들을 더 어렵게 만든다는 것이다! 볼 수 있는 20개의 행만 정렬할 수는 없습니다. 전체 데이터 집합이 정렬될 것으로 예상됩니다. 물론 이는 KendoReact의 데이터 그리드 구성요소에서 처리됩니다.

 

페이지 배치가 적합하지 않은 경우 데이터 그리드는 열 방향과 행 방향으로 모두 가상화된 스크롤 기능을 제공합니다. 데이터가 빠르게 로드되어 부드럽고 자연스러운 스크롤이 가능합니다.

확장 가능한 행

A data grid might have a bunch of data visible across the row itself, but there might be even more data that a user might want to dig out of an entry once they find it. Perhaps it is data that doesn’t need to be cross-referenced in the same way column data is. This can be tricky to pull off, because of the way table cells are laid out. The data is still associated with a single row, but you often need more room than the width of one cell offers. With the KendoReact Data Grid component, you can pass in a `detail` prop with an arbitrary React component to show when a row is expanded. Super flexible!

반응형 디자인

 

Perhaps the most notoriously difficult thing to pull off with `<table>` designs is how to display them on small screens. Zooming out isn’t very good UX, nor is collapsing the table into something non-table-like. The thing about data grids is that they are all different, and you’ll know data is most important to your users best. The KendoReact Data Grid component helps with this by making your data grid scrollable/swipeable, and also being able to lock columns to make sure they continue to be easy to find and cross-reference.

데이터 필터링

이것은 UX에 초점을 맞춘 기능이기 때문에 아마도 내가 가장 좋아하는 기능일 것이다. 여러분이 빅 데이터 그리드 주문을 보고 있다고 상상해보세요. 그리고 여러분이 "화이트 클로버 마켓의 모든 주문을 보겠습니다."라고 말하는 것처럼요. 필터 기능을 사용하면, 필터 입력에 "클로버"를 빠르게 입력할 수 있고, 비올라, 이 모든 순서가 바로 여기에 있습니다. 순서와 페이지 배열을 지원할 때는 매우 까다롭기 때문에 이 모든 기능이 함께 작동하기에 좋습니다.

데이터 그룹화

 

이 기능은 약간 충격적입니다. 필터링과 정렬은 둘 다 매우 유용하지만, 경우에 따라서는 조금 아쉬운 점이 있습니다. 예를 들어, 너무 빨리 필터링하여 현재 보고 있는 데이터가 매우 제한적입니다. 정렬을 할 때, 여러분은 데이터의 부분집합도 살펴보려고 할 수 있습니다. 하지만 그 데이터가 어디에서 시작되고 끝나는지는 여러분의 두뇌에 달려있습니다. 그룹화를 통해 데이터 그리드에 사용자에게 가장 중요한 것들을 강력하게 그룹화하도록 지시할 수 있지만 그 위에 필터링 및 정렬을 활용할 수 있습니다. 데이터 탐색을 즉시 쉽고 유용하게 만듭니다.

현지화

This is where you can really tell KendoReact went full monty. It would be highly unfortunate to pick some kind of component library and then realize that you need localization and realize it wasn’t made to be a first-class citizen. You avoid all that with KendoReact, which you can see in this Data Grid component. In the demo, you can flip out English for Spanish with a simple dropdown and see all the dates localized. You pull off any sort of translation and localization with the `<LocalizationProvider>` and `<IntlProvider>`, both comfortable React concepts.

PDF 또는 Excel로 내보내기

 

여기에 이에 대한 실제 데모가 있습니다.

자, 어서! 정말 멋지네요.

그게 다가 아닙니다.

반응 데이터 그리드에 대한 문서를 확인하십시오. 여기에 도달하지 못한 기능이 더 많이 있습니다(행 고정! 셀 편집!). 여기 여러분의 마음을 편하게 해줄 것이 있습니다. 이 부품과 모든 KendoReact 부품은 키보드 친화적이며 섹션 508 접근성 표준을 충족합니다. 그것은 결코 쉬운 일이 아니다. 구성요소가 이렇게 복잡하고 상호 작용성이 높으면 접근성을 제대로 갖추기가 어렵습니다. 즉, 어디에서나 작동하는 멋진 구성 요소를 얻을 수 있을 뿐만 아니라, 여러분이 생각하는 것 이상의 UX를 제공하는 풍부한 대화형 구성 요소를 얻을 수 있습니다. 그리고 이 모든 것이 빠르고 접근성이 뛰어납니다. 정말 비현실적이네요.