Una griglia di dati React a tema con fantastiche funzionalità incentrate sulla UX

KendoReact può farti risparmiare un sacco di tempo perché offre componenti predefiniti che puoi utilizzare immediatamente nella tua app. Hanno un bell'aspetto, ma, cosa più importante, sono facilmente personalizzabili, quindi appaiono nel modo in cui ne hai bisogno. E direi che l'aspetto non è nemmeno la parte importante. Esistono molte librerie di componenti incentrate sulla grafica. Questi componenti affrontano i problemi di interattività più difficili nell'interfaccia utente/UX e lo fanno pensando alla grazia, alla velocità e all'accessibilità.

Diamo un'occhiata a loro Reagire alla griglia dei dati componente.

Il vecchio <table> elemento è lo strumento giusto per il lavoro delle griglie di dati, ma una tabella non offre la maggior parte delle funzionalità che costituiscono un file buono esperienza di navigazione dei dati. Se usiamo KendoReact <Grid /> componente (e amici), otteniamo un sacco di funzionalità extra, ognuna delle quali non è banale da realizzare bene, e tutte insieme costituiscono una soluzione estremamente avvincente. Esaminiamo un elenco di ciò che ottieni.

Colonne ordinabili

Sceglierai sicuramente un ordinamento predefinito per i tuoi dati, ma se una determinata riga di dati contiene elementi come ID, date o nomi, è perfettamente probabile che un utente voglia ordinare la colonna in base a tali dati. Forse vogliono visualizzare gli ordini più vecchi o gli ordini con il valore totale più alto. L'HTML non aiuta con l'ordinamento delle tabelle, quindi si tratta di table stakes (capito?!) per una libreria JavaScript per griglie di dati, ed è perfettamente gestito qui.

Impaginazione e limiti

Quando hai più di qualche dozzina di righe di dati, è normale che tu voglia impaginarli. In questo modo gli utenti non devono scorrere tanto e, cosa altrettanto importante, la pagina viene mantenuta veloce non rendendo il DOM troppo grande. Uno dei problemi con l'impaginazione, però, è che rende cose come l'ordinamento più difficili! Non puoi semplicemente ordinare le 20 righe che puoi vedere, è previsto che l'intero set di dati venga ordinato. Ovviamente questo è gestito nel componente Data Grid di KendoReact.

Oppure, se l'impaginazione non fa per te, la griglia dati offre lo scorrimento virtualizzato, sia nella direzione delle colonne che delle righe. È un bel tocco poiché i dati si caricano rapidamente per uno scorrimento fluido e naturale.

Righe espandibili

Una griglia di dati potrebbe avere una serie di dati visibili nella riga stessa, ma potrebbero esserci ancora più dati che un utente potrebbe voler estrarre da una voce una volta trovata. Forse si tratta di dati che non necessitano di riferimenti incrociati allo stesso modo dei dati di colonna. Questo può essere complicato da realizzare, a causa del modo in cui sono disposte le celle della tabella. I dati sono ancora associati a una singola riga, ma spesso è necessario più spazio di quello offerto dalla larghezza di una cella. Con il componente KendoReact Data Grid, puoi passare a detail prop con un componente React arbitrario per mostrare quando una riga viene espansa. Super flessibile!

Progettazione reattiva

Forse la cosa notoriamente più difficile da realizzare <table> design è come visualizzarli su schermi di piccole dimensioni. Lo zoom indietro non è una buona UX, né lo è comprimere la tabella in qualcosa di non simile a una tabella. Il vantaggio delle griglie di dati è che sono tutte diverse e saprai che i dati sono la cosa più importante per i tuoi utenti. Il componente KendoReact Data Grid aiuta in questo rendendo la tua griglia di dati scorrevole/scorribile e anche essendo in grado di bloccare le colonne per assicurarsi che continuino a essere facili da trovare e fare riferimenti incrociati.

Filtraggio dei dati

Questa è forse la mia funzionalità preferita proprio per quanto è focalizzata sulla UX. Immagina di osservare una grande griglia di ordini di dati e di dire "Fammi vedere tutti gli ordini da White Clover Markets". Con una funzione di filtro, forse digiti rapidamente "trifoglio" nell'input del filtro e viola, tutti quegli ordini sono proprio lì. È una cosa ancora più complicata quando supporti anche l'ordinamento e l'impaginazione, quindi è fantastico che tutte queste funzionalità funzionino insieme.

Dati di raggruppamento

Ora, questa funzionalità mi lascia davvero a bocca aperta 🤯 un po'. Il filtraggio e l'ordinamento sono entrambi molto utili, ma in alcuni casi lasciano un po' a desiderare. Ad esempio, è facile filtrare troppo e troppo velocemente, lasciando i dati che stai visualizzando molto limitati. E con l'ordinamento, potresti provare a esaminare anche un sottoinsieme di dati, ma spetta al tuo cervello capire dove iniziano e finiscono i dati. Con il raggruppamento, puoi dire alla griglia di dati di raggruppare fortemente le cose che sono più importanti per te, ma sfruttando comunque il filtraggio e l'ordinamento. Rende immediatamente l'esplorazione dei dati più semplice e utile.

Localizzazione

Qui è dove puoi davvero dire che KendoReact è andato a gonfie vele. Sarebbe davvero un peccato scegliere una sorta di libreria di componenti e poi rendersi conto che è necessaria la localizzazione e rendersi conto che non è stata creata per essere un cittadino di prima classe. Eviti tutto ciò con KendoReact, che puoi vedere in questo componente Data Grid. Nella demo puoi selezionare l'inglese per lo spagnolo con un semplice menu a discesa e vedere tutte le date localizzate. Puoi realizzare qualsiasi tipo di traduzione e localizzazione con <LocalizationProvider> ed <IntlProvider>, entrambi comodi concetti di React.

Esportazione in PDF o Excel

Ecco una demo dal vivo di questo:

Andiamo adesso! Quello è molto cool.

Non è tutto…

Vai a controllare i documenti per React Data Grid. Ci sono un sacco di altre funzionalità a cui non siamo nemmeno arrivati ​​qui (blocco delle righe! modifica delle celle!). Ed ecco qualcosa per tranquillizzarti la mente: questo componente, e tutti i componenti KendoReact, sono compatibili con la tastiera e soddisfano gli standard di accessibilità della Sezione 508. Non è un’impresa da poco. Quando i componenti sono così complessi e implicano così tanta interattività, ottenere la giusta accessibilità è difficile. Quindi non solo ottieni componenti di bell'aspetto che funzionano ovunque, ma ottieni componenti riccamente interattivi che offrono UX oltre ciò a cui potresti anche pensare, e tutto è fatto in modo rapido e accessibile. È piuttosto irreale, davvero.

Fonte: https://css-tricks.com/a-themeable-react-data-grid-with-great-ux-focused-features/