Schnelle Darstellung von Daten mit Recline.js

Screenshot einer Tabelle aus 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

Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...
Wieso man Javascript nicht im Head lädt (und im Fo... Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...
Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...
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...

Schreibe einen Kommentar