TablePress Responsive

Usate Tablepress per le vostre tabelle in wordpress? Vi sarete accorti (oppure no) che le tabelle non sono responsive.

Per renderle responsive è sufficiente usate il seguente codice nel functions.php e un pizzico di css


add_filter( 'tablepress_table_output', 'tablepress_output', 10, 3 );
function tablepress_output( $output, $table, $render_options ) {
	$infoscroll = '<span class="infoscroll hide-desktop">← → Trascina verso destra e sinista per vedere la tabella</span>';
	return "<div id=\"{$table['id']}-tablepress-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">{$infoscroll}\n{$output}\n{$infoscroll}</div>";

}

Il pratica questo filtro presente nel plugin Tablepress permette di aggiungere elementi durante l’output delle tabelle. In questo esempio non ho fatto nient’altro che avvolgere (wrappare) la tabella in un div, nel mio caso ho aggiunto anche un span dove do indicazioni all’utente che la tabella può essere trascinata verso destra e sinistra, questo span è nascosto per i desktop.

Il Css da usare per rendere la tabella scorrevole è il seguente:

@media only screen and ( max-width: 880px ) {
  .tablepress-scroll-wrapper{ overflow-x: auto;}
  .tablepress-scroll-wrapper table.tablepress{
	display: block;
	overflow-x: auto;
	white-space: nowrap;
  }
}
	

Scarica TablePress