FooTable: ein jQuery-Plugin für responsive Datentabellen 

Heutzutage springen alle auf den responsiven Zug auf. Neben responsiven Layouts wird alles responsiv: Slider, Lightboxen, Galerien, was auch immer! Aber eines Tages, als ich an einer HTML-Tabelle mit vielen Spalten arbeitete, dachte ich: „Wie wird das auf meinem iPhone aussehen?“. Dann suchte ich nach „responsive tables“ und fand Chris' Roundup-Post zu einigen Lösungen.

Warum FooTable entwickeln?

Es gab bereits einige Lösungen für responsive Datentabellen, darunter

1. Zurbs, die die Tabelle auf kleineren Geräten horizontal scrollt.
2. Dave Bushells, die die Tabelle auf die Seite dreht.
3. Filament Groups Lösung lässt den Benutzer die anzuzeigenden Spalten auswählen.
4. Stewarts Curry versteckt weniger wichtige Spalten.
5. Chris Coyiers, der die Daten für jede Zeile in einer Liste gruppiert und die Spalten verschwinden.

Mir gefiel, was einige der responsiven Tabellenlösungen taten, aber keine davon hat mich vollständig „gepackt“. Also tat ich mich mit meinem Freund Steve zusammen, der ein jQuery-Guru ist, und wir begannen an einem neuen jQuery-Plugin. Wir mochten das Konzept der verschwindenden Spalten sehr, aber wir wollten immer noch die Möglichkeit haben, diese versteckten Daten irgendwie zu sehen. Wir mochten auch Chris' Konzept, die Spalten in Zeilen umzukehren, also beschlossen wir, beide Konzepte zu kombinieren und FooTable wurde geboren.

Wie funktioniert FooTable?

FooTable ist sehr einfach

1. Es blendet bestimmte Datenspalten bei unterschiedlichen Auflösungen aus (wir nennen diese Breakpoints).
2. Zeilen können erweitert werden, um die ausgeblendeten Daten anzuzeigen.

Konfiguration über Datenattribute

Steve und ich haben beide mit anderen Tabellen-Plugins gearbeitet, wie dem erstaunlichen datatables.net, aber wir fanden sie wirklich schwierig und unintuitiv zu konfigurieren. Deshalb kamen wir auf die Idee, Datenattribute zu verwenden, um FooTable mitzuteilen, wie Dinge zu tun sind. Das macht es auch für andere Entwickler, die Ihren Code unterstützen, einfacher zu sehen, was Sie tun. Schauen Sie sich zum Beispiel die folgende einfache Tabellenkopf-Markup an

<table class="footable" data-filter="#filter">
  <thead>
    <tr>
      <th data-sort-initial="descending" data-class="expand">
        First Name
      </th>
      <th data-sort-ignore="true">
        Last Name
      </th>
      <th data-hide="phone,tablet">
        Job Title
      </th>
      <th data-hide="phone,tablet" data-type="numeric">
        DOB
      </th>
      <th data-hide="phone" data-type="numeric">
        Status
      </th>
    </tr>
  </thead>

  ...

</table>

Man kann ziemlich einfach, nur aus dem Markup, erkennen, dass die Tabelle wie folgt funktionieren wird

1. Die Tabelle wird nach einem Eingabefeld mit der ID „filter“ gefiltert (data-filter=„#filter“)
2. Die Tabelle wird anfangs nach der Spalte „Vorname“ sortiert und zwar absteigend (data-sort-initial=„descending“)
3. Die Spalte „Nachname“ kann nicht sortiert werden (data-sort-ignore=„true“)
4. Die Spalten „Job Title“ und „DOB“ werden auf Telefonen und Tablets ausgeblendet (data-hide=„phone,tablet“)
5. Die Spalte „Status“ wird auf Telefonen ausgeblendet (data-hide=„phone“)
6. Die Spalten „DOB“ und „Status“ verwenden numerische Daten (data-type=„numeric“)

Das ist doch mal was!

Editor-Hinweis: Die Verwendung von data-* Attributen zur Steuerung des Plugin-Verhaltens ist in letzter Zeit sehr beliebt (siehe Twitter Bootstrap). Würde mich über Gedanken dazu in den Kommentaren freuen.

Verwendung

Sie haben das Markup gesehen, das ist die Datentabelle selbst mit integrierter Konfiguration, wie sie sich verhalten soll.

Sie benötigen auch jQuery, das Plugin selbst und Ihren eigenen Code, um das Plugin aufzurufen. Der folgende Code dient nur zur Veranschaulichung, wie es funktionieren könnte. In der Produktion würden Sie wahrscheinlich all diese Skripte kombinieren.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
      $('table').footable();
    });
</script>

Es ist auch wahrscheinlich, dass Sie Ihre eigenen Breakpoints haben. Das ist sehr einfach zu konfigurieren, wenn Sie das Plugin aufrufen.

$('table').footable({
  breakpoints: {
    mamaBear: 1200,
    babyBear: 600
  }
});

Verwenden Sie dann diese Werte anstelle Ihrer data-hide Attribute.

Entwickelt für Erweiterbarkeit

Ein weiteres cooles Feature von FooTable ist die Art und Weise, wie es erweitert werden kann. Wir wollten den Kerncode nicht aufblähen, wenn wir im Laufe der Zeit weitere Features hinzufügen. Außerdem hat jedes Projekt seine eigenen Anforderungen, und wir erkennen, dass Sie nicht jedes Feature von FooTable in jedem Projekt benötigen werden. Also hat sich Steve eine tolle Plugin-Architektur innerhalb des Plugins ausgedacht, die es FooTable ermöglicht, einfach erweitert zu werden. Um Ihre Tabelle beispielsweise sortierbar zu machen, müssen Sie nur die Datei footable.sortable.js einbinden. Wir haben bisher nur das Sortier-Add-on veröffentlicht, aber wir arbeiten fleißig am Filter-Add-on und hoffen, noch viele weitere zu entwickeln. Wir hoffen auch, dass die Community uns hier unterstützt und wirklich coole Add-ons entwickelt. Sie können diesen Vorlagencode einsehen, um zu sehen, wie es gemacht wird.

Zuletzt, aber nicht zuletzt… Demos!

• Responsive Showcases – hier sind alle bisherigen Demos mit einem einfach zu bedienenden Viewport-Switcher, um die Features mit minimalem Aufwand zu demonstrieren!
• Einfache Tabelle mit Text
• Tabelle mit Bildern und Links
• Sortier-Demo