Tabelle complesse su mobile: come ho risolto con UIKit - Progetto 1x2.expert
-
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.
-
-
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.
