Javascript

FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar

5. Dezember 2012
von

Tabellen mit Dateninhalten sind auf kleinen Screens in Sachen Usability eine Qual. Schon, wenn mehr als zwei Spalten dargestellt werden müssen, beginnt – wenn es gut läuft – die horizontale Scrollerei. Die Übersicht geht schnell verloren. Findige Entwickler brachten zwischenzeitlich eine ganze Reihe von Lösungen für dieses Problem hervor. FooTable, ein schlankes jQuery-Plugin, gehört dabei zu den besten Ansätzen und kann sehr simpel implementiert werden.

FooTable: Tabellensteuerung mit HTML5 Data-Attributen

Wenn eine HTML-Tabelle auf kleinen Geräten aufgerufen wird, versucht der Browser zunächst, die Tabelle in den Viewport zu quetschen, was bereits in den meisten Fällen zur Unbenutzbarkeit führt. Kann der Browser die Tabelle beim besten Willen nicht innerhalb des zur Verfügung stehenden Platzes anzeigen, bricht die Tabelle nach rechts aus und muss horizontal gescrollt werden. Eine Lösung, die im Grunde auf dieses Standardverhalten aufsetzt, es dabei aber kontrolliert einsetzt, ist Zurbs Responsive Tables, das wir hier bei Dr. Web bereits vor einiger Zeit vorstellten.

FooTable geht anders vor. Es setzt nicht auf kontrolliertes horizontales Scrollen unter Verwendung einer Schlüsselspalte, sondern verbirgt, je nach Breakpoint, beliebig viele Spalten. In der ersten Zelle der verbleibenden Spalten wird dann ein großes Plus-Symbol gezeigt, das nach Tap oder Klick unterhalb der Datenreihe die weiteren Inhalte übersichtlich anzeigt.

Das funktioniert mittlerweile neben der reinen Darstellung von Textinformationen, obwohl das Plugin erst wenige Tage alt ist, bereits mit HTML-Inhalten, wie Bildern und Links und lässt sich sogar auf die bekannte Art und Weise sortieren. In Arbeit befindet sich derzeit die Möglichkeit, die Inhalte zu filtern. Derzeit müssen die Datentabellen noch von Hand oder über zusätzliche Programmierung bestückt werden. Für eine spätere Version ist das Laden von Json-Inhalten vorgesehen.

FooTable von Steven Usher und Brad Vincent ist ein kostenloses jQuery-Plugin, das frei über die Website oder aus dem Github-Repository geladen und verwendet werden kann. Es wird unter der liberalen MIT-Lizenz vertrieben und kann so auch für kommerzielle Projekte kostenlos genutzt werden. Die Lizenz ist im Header des Scripts hinterlegt und darf nicht entfernt werden.

FooTable: So funktioniert’s…

Zunächst muss das Plugin, nebst dem zugehörigen CSS, nach dem Aufruf von jQuery selbst im Kopf des Dokuments eingebunden werden.

1
2
3
<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>

Dann kann der Funktionsaufruf erfolgen:

1
2
3
4
5
<script type="text/javascript">
  $(function() {
    $('.footable').footable();
  });
</script>

FooTable arbeitet, wie im responsiven Design üblich, mit Breakpoints. Per Standard sind zwei Breakpoints, eigentlich drei mit dem Desktop, vordefiniert. Eigene können simpel ergänzt werden. Diese sind bereits vorhanden:

1
2
3
4
breakpoints: {
  phone: 480,
  tablet: 1024
}

Die eigentliche Tabelle wird nun ganz klassisch mit den dafür vorgesehenen HTML-Tags gebaut. Das kann so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table class="footable">
  <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>

Anhand des Aufbaus wird schnell deutlich, wie FooTable funktioniert. Die Klasse footable sorgt dafür, dass das Javascript die Tabelle erkennt und verarbeitet. Spalten, die auf bestimmten Auflösungen nicht gezeigt werden sollen, erhalten das Data-Attribut data-hide, gekoppelt mit der Angabe, für welche Breakpoints das gelten soll. Fertig!

Fazit: FooTables Ansatz ist sehr praktikabel und scheint mir bislang die sinnvollste Variante für Tabellen im responsiven Design zu sein. Es lohnt auf jeden Fall, das Plugin für kommende Projekte in Erwägung zu ziehen.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

6 Kommentare zu „FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar
  1. [...] FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar [...]

  2. Daily Summary 12/06/2012 | Sandro Feuillet am 6. Dezember 2012 um 16:40

    [...] FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar – Dr. Web Magazin [...]

  3. Martin am 19. Januar 2013 um 11:39

    Nach langem Suchen hab ich endlich mal einen Artikel auf Deutsch zu footables gefunden. Ich frag mich die ganze Zeit, wie ich das Plugin in WordPress einbinden kann? Über ein kurzes Tutorial würde ich mich sehr freuen. gerne auch per mail!

    LG Martin

    • Dieter Petereit am 19. Januar 2013 um 12:32

      Für WordPress würde ich empfehlen, mal TablePress anzuschauen. Haben wir einen aktuellen Beitrag zu.

      • Martin am 20. Januar 2013 um 10:44

        Danke für den Hinweis, allerdings gefällt mir die responsive Darstellung der Tabellen unter tablepress nicht. Da geht footable einen besseren Weg.

  4. [...] FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar Frohe Festtage » Tags:DesignDezemberDownloadFundstückFundstückegratisMonatMonatlichSammlungWebdesign [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!