Tabella responsive con carosello, come addattare tabelle a piccoli schermi, mobile/tablet

Tabelle e piccoli schermi sembrano non andare daccordo. Per risolvere questo problema si è pensato alle cosidette tabelle responsive. Le tabelle responsive sono delle tabelle che si adattano in vari modi ai piccoli schermi, che siano essi schermi di cellulari o di tablet.

Tabella responsive per dispositivi mobili, con una parte delle colonne visibili e il resto visibile con un carosello

In questa piccola guida troverete una soluzione al problema delle tabelle con piccoli schermi. Per vedere in azione queste tabelle si consiglia di rimpiciolire la finestra del browser o di visualizzare questa guida su un dispositivo mobile.

Questa soluzione funziona solo se la tabella ha il tag <th>.

Per usare questa soluzione si devono eseguire tre passi:

  1. Linkare i file richiesti:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="table.responsive.carousel.js"></script>
    <link href="table.responsive.carousel.css" rel="stylesheet" />
  2. Aggiungere alla tabella un id id="..." di vostra scelta
  3. All'evento Document ready richiamare il seguente codice:
    var responsiveTableCarousel1 = new ResponsiveTableCarousel({
    	id: 'my-table-1',
    	start: 1, 
    	active: 1,
    	vWidth: 1024
    });
  4. Ci sono diverse opzioni per questo carosello
    1. id Id della tabella selezionata
    2. start Intero che indica quale colonna sarà visibile in maniera fissa, di default ha valore uno
    3. active Intero che indica quale delle altre colonne sets which column of the ones beeing visible with a carosuel is active default 1
    4. vWidth Intero che indica l'ampiezza della finestra su cui applicare la tabella, di default window.outerWidth

Se vWidth è più piccolo dell'ampiezza della finestra rimpicciolite la finestra del browser per vedere come si comporta la tabella.

Esempio di tabella senza carosello

Flight Arriving Number Scheduled Estimated Details
Ryanair COPENHAGEN FR2677 12:05 11:55 Landed 11:51
Ryanair KOS FR2722 12:05 12:00 Landed 12:05
Royal Air Maroc CASABLANCA AT946 12:10 12:10 Landed 12:06
Klm AMSTERDAM KL1583 12:35 12:33 Landed 12:29
Air Dolomiti MUNICH EN8240 12:50 12:39 Landed 12:37
Ryanair VALENCIA FR6422 15:10 15:00 Cancelled

Esempio di tabella con carosello nella prima colonna con attivo il primo elemento e senza parametri

var responsiveTableCarousel1 = new ResponsiveTableCarousel({
	id: 'my-table-1'
});
Flight Arriving Number Scheduled Estimated Details
Ryanair COPENHAGEN FR2677 12:05 11:55 Landed 11:51
Ryanair KOS FR2722 12:05 12:00 Landed 12:05
Royal Air Maroc CASABLANCA AT946 12:10 12:10 Landed 12:06
Klm AMSTERDAM KL1583 12:35 12:33 Landed 12:29
Air Dolomiti MUNICH EN8240 12:50 12:39 Landed 12:37
Ryanair VALENCIA FR6422 15:10 15:00 Cancelled

Esempio di tabella con carosello sulla seconda colonna con il primo elemento attivo su entrambi mobile/tablet

var responsiveTableCarousel2 = new ResponsiveTableCarousel({
	id: 'my-table-2',
	mobile: {
		start: 2, 
		active: 1 
	},
	tablet: {
		start: 2, 
		active: 1, 
		vWidth: 1920 
	}
});
Flight Arriving Number Scheduled Estimated Details
Ryanair COPENHAGEN FR2677 12:05 11:55 Landed 11:51
Ryanair KOS FR2722 12:05 12:00 Landed 12:05
Royal Air Maroc CASABLANCA AT946 12:10 12:10 Landed 12:06
Klm AMSTERDAM KL1583 12:35 12:33 Landed 12:29
Air Dolomiti MUNICH EN8240 12:50 12:39 Landed 12:37
Ryanair VALENCIA FR6422 15:10 15:00 Cancelled

Esempio di tabella con carosello sulla seconda colonna e il terzo elemento attivo su entrambi mobile/tablet

var responsiveTableCarousel3 = new ResponsiveTableCarousel({
	id: 'my-table-3',
	mobile: {
		start: 2, 
		active: 3 
	},
	tablet: {
		start: 2, 
		active: 3, 
		vWidth: 1920 
	}
});
Flight Arriving Number Scheduled Estimated Details
Ryanair COPENHAGEN FR2677 12:05 11:55 Landed 11:51
Ryanair KOS FR2722 12:05 12:00 Landed 12:05
Royal Air Maroc CASABLANCA AT946 12:10 12:10 Landed 12:06
Klm AMSTERDAM KL1583 12:35 12:33 Landed 12:29
Air Dolomiti MUNICH EN8240 12:50 12:39 Landed 12:37
Ryanair VALENCIA FR6422 15:10 15:00 Cancelled

Esempio di tabella con carosello sulla seconda colonna e il quinto elemento attivo parametri mobile, e carosello sulla quarta colonna e quarto elemento attivo tablet

var responsiveTableCarousel4 = new ResponsiveTableCarousel({
	id: 'my-table-4',
	mobile: {
		start: 2, 
		active: 5 
	},

	tablet: {
		start: 3, 
		active: 4, 
		vWidth: 1920 
	}
});
Flight Arriving Number Scheduled Estimated Details
Ryanair COPENHAGEN FR2677 12:05 11:55 Landed 11:51
Ryanair KOS FR2722 12:05 12:00 Landed 12:05
Royal Air Maroc CASABLANCA AT946 12:10 12:10 Landed 12:06
Klm AMSTERDAM KL1583 12:35 12:33 Landed 12:29
Air Dolomiti MUNICH EN8240 12:50 12:39 Landed 12:37
Ryanair VALENCIA FR6422 15:10 15:00 Cancelled

Dove scaricare il codice per la tabella responsive?

Vi rimando a questa pagina GitHub per il codice che potrete liberamente scaricare.