Tematikus React Data Grid nagyszerű UX-központú funkciókkal

KendoReact rengeteg időt takaríthat meg, mert előre elkészített összetevőket kínál, amelyeket azonnal felhasználhat az alkalmazásban. Jól néznek ki, de ami még fontosabb, könnyen tematikusak, így úgy néznek ki, ahogyan csak szeretnéd. És azt mondanám, hogy nem is a megjelenés a fontos. Sok olyan komponenskönyvtár található, amelyek a látványra összpontosítanak. Ezek az összetevők kezelik a legnehezebb interaktivitási problémákat az UI/UX-ben, és mindezt a kecsesség, a sebesség és a hozzáférhetőség szem előtt tartásával teszik.

Vessünk egy pillantást rájuk React Data Grid komponenst.

Az öreg <table> elem a megfelelő eszköz az adatrácsokhoz, de a táblázat nem kínálja a legtöbb olyan szolgáltatást, amely jó adatböngészési élmény. Ha a KendoReactot használjuk <Grid /> komponens (és barátok), rengeteg extra funkciót kapunk, amelyek közül bármelyik nem triviális, hogy szépen lehessen, és mindez együtt rendkívül lenyűgöző megoldást jelent. Nézzük végig a kapott listát.

Rendezhető oszlopok

Minden bizonnyal alapértelmezett sorrendet fog választani az adatokhoz, de ha egy adott adatsor tartalmaz olyan dolgokat, mint az azonosítók, dátumok vagy nevek, akkor teljesen valószínű, hogy a felhasználó az oszlopot ezen adatok alapján szeretné rendezni. Talán a legrégebbi, vagy a legmagasabb összértékű rendeléseket akarják megtekinteni. A HTML nem segít a táblákban való rendezésben, ezért ez a táblázat tétje (érted?!) egy JavaScript-könyvtárhoz adatrácsokhoz, és itt tökéletesen kezelhető.

Lapszámozás és korlátok

Ha mondjuk néhány tucatnyi adatsornál több van, akkor gyakran lapozgatni szeretné. Így a felhasználóknak nem kell annyit görgetniük, és ami ugyanilyen fontos, hogy az oldal gyors marad azáltal, hogy nem teszi túl hatalmasra a DOM-ot. Az oldalszámozással kapcsolatos egyik probléma azonban az, hogy megnehezíti a válogatást! Nem csak a látható 20 sort rendezheti, hanem várhatóan a teljes adatkészletet rendezi. Természetesen ezt a KendoReact Data Grid komponense kezeli.

Vagy ha nem az oldalszámozás a te dolgod, az adatrács virtualizált görgetést kínál – oszlop- és sorirányban egyaránt. Ez egy kellemes érintés, mivel az adatok gyorsan betöltődnek a sima, természetes görgetés érdekében.

Kibontható sorok

Előfordulhat, hogy egy adatrácson egy csomó adat látható magán a sorban, de előfordulhat, hogy a felhasználónak még több adatot szeretne kiásni egy bejegyzésből, miután megtalálta azt. Talán olyan adatokról van szó, amelyekre nem kell kereszthivatkozni, ugyanúgy, mint az oszlopadatokra. Ezt a táblázat celláinak elrendezése miatt nehéz lehet megoldani. Az adatok továbbra is egyetlen sorhoz vannak társítva, de gyakran több helyre van szükség, mint amennyit egy cella szélessége kínál. A KendoReact Data Grid komponenssel átadhatja a detail prop egy tetszőleges React komponenssel, hogy megmutassa, ha egy sor ki van bontva. Szuper rugalmas!

Érzékeny tervezés

Talán a leghírhedtebb dolog, amivel ki lehet szállni <table> tervez, hogyan jelenítheti meg őket kis képernyőkön. A kicsinyítés nem túl jó UX, ahogy az sem, hogy az asztalt összecsukjuk valami nem asztalszerűvé. Az adatrácsokkal kapcsolatban az a helyzet, hogy mindegyik más, és tudni fogja, hogy az adatok a legfontosabbak a felhasználók számára. A KendoReact Data Grid komponens segít ebben azáltal, hogy görgethetővé/csúsztathatóvá teszi az adatrácsot, és az oszlopokat is zárolhatja, hogy továbbra is könnyen megtalálhatóak legyenek és kereszthivatkozások legyenek.

Adatok szűrése

Talán ez a kedvenc funkcióm, csak azért, mert mennyire UX-központú. Képzelje el, hogy a rendelések nagy adatrácsát nézi, és azt szeretné, ha „Lássam a White Clover Markets összes rendelését”. Egy szűrési funkcióval talán gyorsan beírja a „lóhere” szót a szűrőbemenetbe, és viola, ezek a sorrendek ott vannak. Ez rendkívül trükkös dolog, ha a rendelést és az oldalszámozást is támogatja – szóval nagyszerű, hogy ezek a funkciók együtt működnek.

Adatok csoportosítása

Ez a funkció most egy kicsit feldobja a fejemet 🤯. A szűrés és a rendezés egyaránt nagyon hasznos, de bizonyos esetekben hagy némi kívánnivalót maga után. Például könnyen túl gyorsan szűrhető, így a megtekintett adatok nagyon korlátozottak maradnak. A rendezésnél pedig lehet, hogy megpróbálja megnézni az adatok egy részhalmazát is, de az agyán múlik, hogy kitalálja, hol kezdődnek és végződnek az adatok. A csoportosítással megmondhatja az adatrácsnak, hogy erősen csoportosítsa az Ön számára legfontosabb dolgokat, de még mindig kihasználja a szűrést és a rendezést. Azonnal egyszerűbbé és hasznosabbá teszi az adatok feltárását.

Honosítás

Itt lehet igazán elmondani, hogy a KendoReact teljes hónapja befejeződött. Nagyon sajnálatos lenne, ha kiválasztana valamilyen komponenskönyvtárat, majd rájönne, hogy honosításra van szüksége, és rájön, hogy nem első osztályú állampolgárnak készült. Mindezt elkerülheti a KendoReact segítségével, amelyet ebben a Data Grid komponensben láthat. A demóban egy egyszerű legördülő menü segítségével az angol nyelvet spanyolra válthatja, és megtekintheti az összes dátumot lokalizálva. Bármilyen fordítást és lokalizálást végrehajthat a <LocalizationProvider> és a <IntlProvider>, mind a kényelmes React koncepciók.

Exportálás PDF vagy Excel formátumba

Íme egy élő demó erről:

Gyerünk most! ez van nagyon cool.

Ez nem minden…

Nézze meg a React Data Grid dokumentumait. Van még egy csomó olyan funkció, amihez itt nem is jutottunk el (sorrögzítés! cellaszerkesztés!). És itt van valami, ami megnyugtatja: ez az összetevő és az összes KendoReact összetevő billentyűzetbarát, és megfelel a Section 508 akadálymentesítési szabványainak. Ez nem kis teljesítmény. Ha az összetevők ennyire összetettek és ekkora interaktivitást tartalmaznak, nehéz a megfelelő akadálymentesítést biztosítani. Így nemcsak tetszetős, mindenhol működő komponenseket kapsz, hanem gazdagon interaktív komponenseket is, amelyek a képzeleten felüli felhasználói élményt biztosítanak, ráadásul mindez gyorsan és könnyen elérhető. Ez elég valószerűtlen, tényleg.

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