TablePress: tabelas responsivas com Bootstrap

TablePress: tabelas responsivas com Bootstrap

  • Tempo de leitura: 3 min.

Com a retomada do HTML semântico depois da primeira guerra dos navegadores, a tag <table> foi demonizada. Vi  desenvolvedores experientes colocando dados tabulares em divs por achar que a tag <table> não deveria ser usada nunca mais. Hoje em dia essa má fase passou, quem está chegando no mercado não fez nenhum site em tabelas e estamos livres de preconceitos. O único problema das tabelas HTML atualmente é seu código extenso: é preciso abrir linha, abrir célula, fechar tudo, bem pouco trivial para quem não mexe com código. Para facilitar a administração de tabelas no WordPress existe o excelente plugin TablePress. Ele traz uma interface intuitiva, é possível adicionar linhas e colunas com facilidade, mesclar células, uma beleza.

Se você está usando Bootstrap no seu tema e deseja que todas as tabelas sejam responsivas, já deve ter percebido que é preciso envolver todas elas em uma div com classe table-responsive. Como não podemos alterar o código do plugin sem perdermos as modificações em uma próxima atualização é preciso recorrer a algum hook do WordPress, no caso o filtro tablepress_table_output. No código abaixo criamos uma função que recebe três argumentos, mas só nos importa o primeiro, que é o código todo da tabela:

 function seu_tema_tablepress_table_output( $output, $table, $render_options ) {
	return '<div class="table-responsive">' . $output . '</div>';
}
add_filter( 'tablepress_table_output', 'seu_tema_tablepress_table_output', 10, 3 ); 

O TablePress permite que você inclua classes personalizadas em cada tabela, mas para adicionar a classe table de modo automático em todas as tabelas basta usar o filtro tablepress_table_tag_attributes, como no código a seguir:

 function seu_tema_tablepress_table_tag_attributes( $table_attributes, $table, $render_options ) {
	$table_attributes['class'] .= ' table';
	return $table_attributes;
}
add_filter( 'tablepress_table_tag_attributes', 'seu_tema_tablepress_table_tag_attributes', 10, 3 ); 

Se você não está usando o bootstrap e quer tornar suas tabelas responsivas ainda é possível usar essa extensão do próprio TablePress. Aproveite a visita e saiba mais sobre os hooks (actions e filters) no WordPress.

Felipe Elia

Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.