Schnelle Darstellung von Daten mit Recline.js

Manchmal sind die Anforderungen eines Kunden ganz einfach: eine CSV-Datei als sortierbare Tabelle online stellen zum Beispiel. Hört sich einfach an, ist aber nicht von jetzt auf gleich umzusetzen. Oder besser ausgedrückt: bisher war das so – Dinge ändern sich! ;) Das man Tabellen fein sortieren kann, durchsuchen und Paginieren ist ja nicht unbedingt erst seit Twitter Bootstrap so, sondern schon länger bekannt.

Screenshot einer Tabelle aus Recline.js

Viel schöner wäre es doch, wenn man ein jQuery-Plugin hätte dem man sagt: hey, hier sind meine Daten, mach was draus! Und genau das macht recline.js – mit Tabellen, Graphen und hast du nicht gesehen. Gut, es braucht prinzipiell noch Backbone.js und Underscore.js, aber das sollte wohl kein Problem sein. Dann lässt man es einfach auf eine Datensammlung los, und gut ist. Die Konfiguration kann hierbei von recht einfach bis hin zu recht komplex erfolgen. Dies liegt wiederum daran, das Recline.js Graphen in jeglicher Forum und sogar Daten auf Landkarten darstellen kann.

Recline.js macht übrigens auch nicht vor Google Docs halt, und kann recht einfach ein Spreadsheet in die eigene Seite holen. Zurück zu unserer eigentlichen Anforderung, der CSV-Datei, hierfür liefert ein Tutorial den folgenden Code:

// CSV definieren
var dataset = new recline.Model.Dataset({
  url: '..//demos/data/sample.csv',
  backend: 'csv',
  // separator: ',',
  // delimiter: '"',
  // encoding: 'utf8'
});
 
// Daten einlesen
dataset.fetch();
 
// Grid aufbauen und Daten rendern
var grid = new recline.View.Grid({
  model: dataset
});
$('#my-online-csv').append(grid.el);

Fertig – schneller gehts wohl nicht mehr, und besser wohl auch nicht. Man könnte jetzt noch hingehen und Spalten sortierebar machen, eine Paginierung drauf setzen oder eine Suche rein stecken, aber in der Regel reichen diese paar Zeilen. Es erübrigt sich dann jetzt wohl auch zu sagen, das Recline.js Events und die entsprechenden Hooks besitzt um alles und jedes anzupassen – man könnte auch sagen: ich bin begeistert! ;)

Ähnliche Beiträge

Responsive Emails mit MJML für alle Clients Responsive Emails für zum Beispiel Newsletter sind eine schlimme Sache. Man könnte sogar sagen: HTML in E-Mails ist generell eine noch schlimmere Sach...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
CSS Trashman – CSS optimieren und entschlack... Man kennt das ja, mal eben aus einer Webseite ein Element raus geworfen, das spezialisierte CSS dafür bleibt erhalten. Dann hat man Elemente doppelt d...
CSS Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.