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

Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...
HTML Table CSS Style Generator Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...
Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
Truncating von Text mit HTML Markup Manchmal sind es die einfachen Dinge im Leben, die einen Webworker in den Wahnsinn treiben. Alles beginnt mit einem Anruf: der Kunde möchte die ersten...

Schreibe einen Kommentar