Quer tabelas responsivas? Sair de tabelas

Recentemente, trabalhei em um pequeno projeto que envolvia a apresentação de dados tabulares para uma variedade de dispositivos, de laptops a tablets e smartphones. Um problema que surgiu foi apresentar os resultados de forma responsiva para todos os dispositivos.

Meu conjunto de ferramentas era Node, Express, Bootstrap e Angular.

O Bootstrap fornece classes de tabela para estilizar tabelas responsivas table table-striped table-responsive.

Usando esses estilos e a diretiva ng-repeat do Angular, criei a seguinte tabela de resultados:

<table class="table table-striped table-responsive" id="resultset">
          <tr ng-repeat="repo in username.lr | filter: search | filter: size | orderBy:orderProp">
            <td>{{repo.name}}</td>
            <td>{{repo.description}}</td>
            <td>{{repo.size}}</td>
            <td>{{repo.forks_count}}</td>
            <td>{{repo.watchers_count}}</td>
            <td>{{repo.open_issues}}</td>
          </tr>
 </table>

Isso funciona, mas não tão responsivo quanto deveria. Não consegue dimensionar adequadamente em tablets e geralmente é uma forma um tanto restritiva de exibir os resultados.

Então, eu o refatorei em uma série de linhas e colunas, permitindo que o sistema de grade do Bootstrap fizesse o trabalho pesado. Esta é a aparência da versão refatorada:

<div id="resultset" class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="repo in username.lr | filter: search | filter: size | orderBy:orderProp">
      <div class="col-sm-2"><strong>{{repo.name}}</strong></div>
      <div class="col-sm-6">{{repo.description}}</div>
      <div class="col-sm-1"><p class="text-right">{{repo.size}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.forks_count}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.watchers_count}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.open_issues}}</p></div>
</div>

Este design se baseia em uma série de DIVs e oferece uma experiência móvel e capacidade de resposta visivelmente melhor. O Angular fornece as diretivas ng-class-odd e ng-class-even para ajudar a estilizar a mesa. Usei col-sm- para oferecer suporte a telas menores, mas também existem classes col-md- e col-lg- para telas maiores.