Tabelle complesse su mobile: come ho risolto con UIKit - Progetto 1x2.expert
-
Ciao a tutti,
vi presento un progetto su cui sto lavorando: 1x2.expert, un portale di statistiche calcistiche multilingua.Cosa ho usato:
- Joomla 6
- YOOtheme Pro + UIKit
- Falang per la gestione traduzioni
- JSpeed per l'ottimizzazione PageSpeed
Una delle tante sfide:rendere consultabili da mobile tabelle con molte colonne di dati statistici. Chi lavora con dati tabulari sa quanto sia un incubo su schermi piccoli.
Ho provato Table Pro di Flart Studio ma non si adattava al tipo di dati che gestisco. Alla fine ho sviluppato una soluzione custom partendo da questo ottimo articolo:
https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6
...e adattando il concetto a UIKit.Il sito è ancora in fase di rifinitura, ma sono soddisfatto delle performance: gira fluido anche senza cache attiva.
Se interessa posso condividere l'approccio che ho usato per le tabelle. Feedback benvenuti! -
Ottimo lavoro! Bellissimo complimenti!
Ma le tabelle le metti dentro in HTML e poi le gestisci via CSS/js oppure usi sistemi di caricamento dinamici di yootheme? -
Grazie!
Le tabelle sono generate da moduli MVC custom — il PHP interroga il database, esegue i calcoli statistici (quando serve) e costruisce l'HTML.
Non potevo usare i source dinamici di YOOtheme perché alcuni dati richiedono elaborazioni troppo complesse da fare al volo (medie ponderate, percentuali, confronti storici su migliaia di partite).Desktop (≥960px): tabella classica con ordinamento cliccabile sugli header
Mobile (<960px): ogni riga diventa una card. Un dropdown permette di scegliere quale colonna visualizzare in primo piano. Tap sulla card per espandere tutti i dettagli.Così su mobile l'utente decide cosa gli interessa vedere, senza scroll orizzontale infinito.
All'inizio ho provato ad utilizzare Table pro di Flart Studio
appena nidificavo qualcosa (ci sono andato pesande eheh) andava tutto in crash nel builder, poi ho provato ricostruirla a pezzi, ma il risultato non mi piaceva così ho pensato di rifarla come la volevo io.È tutto costruito con UIKit + JS vanilla, niente librerie esterne pesanti.
Ho preparato una demo funzionante che potete testare e adattare:
https://codepen.io/robjrobj/pen/vEKLRKy
Ridimensionate il browser per vedere il comportamento responsive! -
La tua implementazione assomiglia a bootstrap-table, e così ?
https://examples.bootstrap-table.com/ -
In cosa differisce da bootstrap table o da table pro per uikit: in pratica loro adattano la tabella allo schermo io la ripenso per il mobile e per il touch... in un sito di statistiche (che sia di calcio o altro ) a mio avviso le card con colonna rotante funzionano meglio dello scroll orizzontale, in parole povere non sopporto lo scroll orizzontale su telefono
se dovessi implementare search, pagination o export magari utilizzerei table pro o magari amplierei quella che ho già utilizzato... per ora non mi servono quelle funzionalità...
-
@robjrobj
Niente a che vedere con bootstrap-table.
Secondo me molto meglio la tua soluzione.Avevo implementato qualcosa del genere con BS (card e panel) per visualizzare tutte le statistiche e i risultati di un campionato di vela.
Secondo me è la migliore soluzione quando sei su mobile e hai dei tabelloni del genere!
-
@robjrobj Sarebbe ottimo se potresti scrivere un articolo/guida sulla tua implementazione.
-
Se può interessare posso dare il modulo da installare e configurare in joomla per popolare la tabella...
Il modulo inserisce di default i parametri base per fare capire dove e cosa scrivere
in più si possono scegliere i colori -
Bello proprio, anche io mi ero scontrato con il problema. Ma vista la mia superficiale conoscenza, mi ero fermato... Se potessi condividere il modulo sarebbe bellissimoooo
Grazie e ancora complimenti -
@robjrobj Grazie
-
Complimenti, molto interessasnte. Capita spesso che mi chiedono di inserire tabelle con molte colonne che non sempre riesco a gestire.
Bravo!! -
Ho predisposto il download sul mio sito, è gratuito previa registrazione
https://digitalypainter.it/free-dowloads -
Eccezionale, complimenti @robjrobj.
