Tablas adaptables (responsive) con jQuery

FooTable es un proyecto que estaba faltando. Una pequeña biblioteca, que funciona como un plugin para jQuery, para la creación de tablas adaptables, de manera sencilla y respetando perfectamente la estructura básica de una tabla HTML convencional.

Este plugin transforma las tablas HTML en tablas que se ajustan perfectamente a cualquier resolución, independientemente del dispositivo que se utilice. En caso de requerir más espacio el plugin automáticamente oculta las tablas excedentes, brindando la posibilidad al usuario de expandir la tabla según sea necesario.

En la imagen que inserto a continuación se puede ver perfectamente como se expanda una fila para mostrar más información.

Ejemplo de uso:

HTML:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
    </tr>
  </tbody>
</table>

jQuery y CSS:

<link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
<!-- obviously you have jQuery already included -->
<script src="js/footable-0.1.js" type="text/javascript"></script>

Inicialización del plugin:

<script type="text/javascript">
  $(function() {
    $('.footable').footable();
  });
</script>

Web: FooTable

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas