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

HTML-Validierung mit Firefox Es gehört heutzutage zum guten Ton, Kunden validen HTML-Quelltext auszuliefern. Jede andere Art der Auslieferung von Webseiten würde ich einmal frech ...
Abhängigkeiten in Formularen mit dependsOn Es kristallisiert sich immer mehr heraus das man aufgrund der UX in komplexen Formularen Abhängigkeiten einführt. Ein einfaches (wenn auch durchaus se...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...
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