Ένα θεματικό πλέγμα δεδομένων React με εξαιρετικές δυνατότητες εστίασης στο UX

KendoReact μπορεί να σας εξοικονομήσει χρόνο, επειδή προσφέρει προκατασκευασμένα εξαρτήματα που μπορείτε να χρησιμοποιήσετε στην εφαρμογή σας αμέσως. Φαίνονται όμορφα, αλλά το πιο σημαντικό, είναι εύκολα θεματικά, έτσι φαίνονται όπως θέλετε. Και θα έλεγα ότι η εμφάνιση δεν είναι καν το σημαντικό μέρος. Υπάρχουν πολλές βιβλιοθήκες συστατικών εκεί έξω που εστιάζουν στα γραφικά. Αυτά τα στοιχεία αντιμετωπίζουν τα πιο δύσκολα προβλήματα διαδραστικότητας στο UI/UX και το κάνουν έχοντας κατά νου τη χάρη, την ταχύτητα και την προσβασιμότητα.

Ας τους ρίξουμε μια ματιά Πλέγμα δεδομένων React συστατικό.

το ολ' <table> στοιχείο είναι το κατάλληλο εργαλείο για την εργασία για πλέγματα δεδομένων, αλλά ένας πίνακας δεν προσφέρει τις περισσότερες από τις δυνατότητες που συνιστούν α καλός εμπειρία περιήγησης δεδομένων. Αν χρησιμοποιήσουμε το KendoReact <Grid /> συστατικό (και φίλοι), έχουμε έναν απόλυτο τόνο πρόσθετων χαρακτηριστικών, οποιεσδήποτε από τις οποίες δεν είναι ασήμαντες για να αποκομίσετε όμορφα, και όλα μαζί αποτελούν μια εξαιρετικά συναρπαστική λύση. Ας δούμε μια λίστα με αυτά που λαμβάνετε.

Ταξινόμηση στηλών

Σίγουρα θα επιλέξετε μια προεπιλεγμένη σειρά για τα δεδομένα σας, αλλά αν κάποια δεδομένη σειρά δεδομένων έχει στοιχεία όπως αναγνωριστικά, ημερομηνίες ή ονόματα, είναι πολύ πιθανό ένας χρήστης να θέλει να ταξινομήσει τη στήλη με βάση αυτά τα δεδομένα. Ίσως θέλουν να δουν τις παλαιότερες παραγγελίες ή τις παραγγελίες της υψηλότερης συνολικής αξίας. Η HTML δεν βοηθά με την παραγγελία σε πίνακες, επομένως πρόκειται για πονταρίσματα τραπεζιών (το καταλαβαίνετε;) για μια βιβλιοθήκη JavaScript για πλέγματα δεδομένων και αντιμετωπίζεται τέλεια εδώ.

Σελιδοποίηση και Όρια

Όταν έχετε περισσότερες από, για παράδειγμα, μερικές δεκάδες σειρές δεδομένων, είναι συνηθισμένο να θέλετε να τα σελιδοποιήσετε. Με αυτόν τον τρόπο οι χρήστες δεν χρειάζεται να κάνουν κύλιση τόσο πολύ, και εξίσου σημαντικό, διατηρεί τη σελίδα γρήγορη, χωρίς να κάνει το DOM πολύ τεράστιο. Ωστόσο, ένα από τα προβλήματα με τη σελιδοποίηση είναι ότι δυσκολεύει τα πράγματα όπως η ταξινόμηση! Δεν μπορείτε απλώς να ταξινομήσετε τις 20 σειρές που μπορείτε να δείτε, αλλά αναμένεται να ταξινομηθεί ολόκληρο το σύνολο δεδομένων. Φυσικά αυτό αντιμετωπίζεται στο στοιχείο Data Grid του KendoReact.

Ή, αν η σελιδοποίηση δεν σας ενδιαφέρει, το πλέγμα δεδομένων προσφέρει εικονική κύλιση — τόσο στις κατευθύνσεις στηλών όσο και στις γραμμές. Αυτό είναι μια ωραία πινελιά καθώς τα δεδομένα φορτώνονται γρήγορα για ομαλή, φυσική κύλιση.

Επεκτάσιμες σειρές

Ένα πλέγμα δεδομένων μπορεί να έχει μια δέσμη δεδομένων ορατά σε όλη την ίδια τη σειρά, αλλά μπορεί να υπάρχουν ακόμη περισσότερα δεδομένα που ένας χρήστης μπορεί να θέλει να βγάλει από μια καταχώριση μόλις τα βρει. Ίσως είναι δεδομένα που δεν χρειάζεται να διασταυρωθούν με τον ίδιο τρόπο που είναι τα δεδομένα στηλών. Αυτό μπορεί να είναι δύσκολο να επιτευχθεί, λόγω του τρόπου με τον οποίο τα κελιά του πίνακα είναι διατεταγμένα. Τα δεδομένα εξακολουθούν να συσχετίζονται με μία μόνο σειρά, αλλά συχνά χρειάζεστε περισσότερο χώρο από ό,τι προσφέρει το πλάτος ενός κελιού. Με το στοιχείο KendoReact Data Grid, μπορείτε να περάσετε σε ένα detail prop με ένα αυθαίρετο στοιχείο React για εμφάνιση πότε επεκτείνεται μια σειρά. Σούπερ ευέλικτο!

Κατανοητή Σχεδίαση

Ίσως το πιο διαβόητα δύσκολο πράγμα για να το πετύχεις <table> σχέδια είναι πώς να τα εμφανίσετε σε μικρές οθόνες. Η σμίκρυνση δεν είναι πολύ καλό UX, ούτε η συμπύκνωση του πίνακα σε κάτι που δεν μοιάζει με τραπέζι. Το θέμα με τα πλέγματα δεδομένων είναι ότι είναι όλα διαφορετικά και θα ξέρετε ότι τα δεδομένα είναι πιο σημαντικά για τους χρήστες σας καλύτερα. Το στοιχείο KendoReact Data Grid βοηθά σε αυτό, καθιστώντας το πλέγμα δεδομένων σας με δυνατότητα κύλισης/σάρωσης, καθώς και έχοντας τη δυνατότητα να κλειδώνετε στήλες για να βεβαιωθείτε ότι συνεχίζουν να είναι εύκολο να βρεθούν και να διασταυρωθούν.

Φιλτράρισμα δεδομένων

Αυτό είναι ίσως το αγαπημένο μου χαρακτηριστικό μόνο και μόνο λόγω του πόσο εστιασμένο στο UX είναι. Φανταστείτε ότι κοιτάτε ένα μεγάλο πλέγμα παραγγελιών και λέτε "Επιτρέψτε μου να δω όλες τις παραγγελίες από το White Clover Markets". Με μια δυνατότητα φιλτραρίσματος, ίσως πληκτρολογήσετε γρήγορα "τριφύλλι" στην είσοδο του φίλτρου και βιόλα, όλες αυτές οι παραγγελίες είναι εκεί. Αυτό είναι πολύ δύσκολο πράγμα όταν υποστηρίζετε επίσης την παραγγελία και τη σελιδοποίηση — επομένως είναι υπέροχο ότι όλες αυτές οι λειτουργίες συνεργάζονται.

Δεδομένα ομαδοποίησης

Τώρα αυτό το χαρακτηριστικό μου ταράζει λίγο το μυαλό 🤯. Το φιλτράρισμα και η ταξινόμηση είναι και τα δύο πολύ χρήσιμα, αλλά σε ορισμένες περιπτώσεις, αφήνουν λίγο το επιθυμητό. Για παράδειγμα, είναι εύκολο να φιλτράρετε υπερβολικά γρήγορα, αφήνοντας τα δεδομένα που εξετάζετε πολύ περιορισμένα. Και με την ταξινόμηση, μπορεί να προσπαθείτε να δείτε και ένα υποσύνολο δεδομένων, αλλά εξαρτάται από τον εγκέφαλό σας να καταλάβει πού αρχίζουν και πού τελειώνουν αυτά τα δεδομένα. Με την ομαδοποίηση, μπορείτε να πείτε στο πλέγμα δεδομένων να ομαδοποιήσει έντονα πράγματα που είναι τα πιο σημαντικά για εσάς, αλλά στη συνέχεια να αξιοποιήσετε το φιλτράρισμα και την ταξινόμηση επιπλέον. Κάνει άμεσα την εξερεύνηση των δεδομένων σας ευκολότερη και πιο χρήσιμη.

Τοπική Προσαρμογή

Αυτό είναι όπου μπορείτε πραγματικά να πείτε ότι το KendoReact πήγε τελείως. Θα ήταν πολύ ατυχές να διαλέξετε κάποιο είδος βιβλιοθήκης στοιχείων και μετά να συνειδητοποιήσετε ότι χρειάζεστε τοπική προσαρμογή και να συνειδητοποιήσετε ότι δεν δημιουργήθηκε για να είστε πολίτης πρώτης κατηγορίας. Όλα αυτά τα αποφεύγετε με το KendoReact, το οποίο μπορείτε να δείτε σε αυτό το στοιχείο Data Grid. Στην επίδειξη, μπορείτε να αναστρέψετε τα Αγγλικά για Ισπανικά με ένα απλό αναπτυσσόμενο μενού και να δείτε όλες τις ημερομηνίες τοπικές. Τραβάτε οποιοδήποτε είδος μετάφρασης και εντοπισμού με το <LocalizationProvider> και <IntlProvider>, και τα δύο άνετα concept React.

Εξαγωγή σε PDF ή Excel

Ακολουθεί μια ζωντανή επίδειξη αυτού:

Άντε τώρα! Αυτό είναι πολύ δροσερό.

Δεν είναι μόνο αυτό…

Ρίξτε μια ματιά στα έγγραφα για το React Data Grid. Υπάρχουν πολλά περισσότερα χαρακτηριστικά στα οποία δεν φτάσαμε καν εδώ (καρφίτσωμα σειράς! επεξεργασία κελιών!). Και εδώ είναι κάτι που θα σας διευκολύνει: αυτό το στοιχείο, και όλα τα στοιχεία KendoReact, είναι φιλικά προς το πληκτρολόγιο και πληρούν τα πρότυπα προσβασιμότητας της Ενότητας 508. Αυτό δεν είναι μικρό κατόρθωμα. Όταν τα στοιχεία είναι τόσο περίπλοκα και περιλαμβάνουν τόση διαδραστικότητα, η σωστή προσβασιμότητα είναι δύσκολη. Έτσι, όχι μόνο αποκτάτε όμορφα στοιχεία που λειτουργούν παντού, αλλά και πλούσια διαδραστικά στοιχεία που προσφέρουν UX πέρα ​​από αυτό που μπορεί να σκεφτείτε, και όλα γίνονται γρήγορα και με ευκολία. Αυτό είναι πολύ εξωπραγματικό, πραγματικά.

Πηγή: https://css-tricks.com/a-themeable-react-data-grid-with-great-ux-focused-features/