Responsive Tabellen mit dem b4um Generator

Im vorherigen Tutorial haben wir unsere Products mit den verschiedenen Layouts des b4um:bento Generators dargestellt.

Wir haben dabei vier Varianten kennengelernt:

grid
list
alternating
bento

Diesmal verwenden wir weiterhin dieselben Products, wechseln aber von einer Kartenansicht zu einer klassischen Tabelle.

Dafür stellt der b4um Generator den Generator

b4um:table

zur Verfügung.

Für dieses Tutorial verwenden wir:

b4um_generators 0.1.0

1. Ausgangspunkt

Unsere bestehende Product-Ressource besitzt weiterhin die vier Felder:

name
description
price
status

Außerdem haben wir bereits fünf Testprodukte angelegt:

MacBook Pro
iPad Pro
Studio Display
Mac mini
Magic Keyboard

Wir müssen weder ein neues Model noch neue Datensätze erstellen.

Der Tabellen-Generator verwendet die bereits vorhandene Ressource und erstellt daraus ein wiederverwendbares Tabellen-Partial.

2. Das Tabellen-Partial erzeugen

Für unsere Products führen wir im Terminal folgenden Befehl aus:

bin/rails generate b4um:table Product name:string description:text price:decimal status:string

Dabei geben wir zunächst das vorhandene Model an:

Product

Anschließend folgen die Felder, die in unserer Tabelle dargestellt werden sollen:

name:string
description:text
price:decimal
status:string

Der Generator meldet:

create  app/views/products/_table.html.erb

Damit wurde das Tabellen-Partial angelegt.

Die Datei befindet sich unter:

app/views/products/_table.html.erb

Was verändert der Generator?

Der b4um:table Generator ist bewusst auf die Darstellung beschränkt.

Er erzeugt keine neue:

Migration
Route
Controller
Model

Auch unsere vorhandenen Product-Datensätze werden nicht verändert.

Stattdessen erhalten wir ein wiederverwendbares View-Partial, das wir dort einbinden können, wo wir unsere Products als Tabelle darstellen möchten.

3. Die Tabelle in der Product-Übersicht verwenden

Das Tabellen-Partial existiert jetzt, wird aber noch nicht automatisch auf unserer Index-Seite verwendet.

Das ist Absicht.

Der Generator entscheidet nicht für uns, an welcher Stelle unserer Anwendung die Tabelle erscheinen soll.

Wir öffnen deshalb:

app/views/products/index.html.erb

Aus dem vorherigen Tutorial wird dort aktuell unser Bento-Partial eingebunden:

<%= render "bento", products: @products %>

Diese Zeile ersetzen wir durch:

<%= render "table", products: @products %>

Unsere vollständige index.html.erb sieht anschließend so aus:

<% content_for :title, "Products" %>

<div class="page-header">
  <h1>Products</h1>

  <%= link_to "New product", new_product_path, class: "button button--primary" %>
</div>

<% if @products.any? %>
  <%= render "table", products: @products %>
<% else %>
  <section class="b4um-empty-state">
    <h2 class="b4um-empty-state__title">
      No products yet.
    </h2>

    <p class="b4um-empty-state__text">
      Create your first product to get started.
    </p>
  </section>
<% end %>

Damit haben wir die Daten selbst nicht verändert.

Wir haben lediglich die Darstellung ausgetauscht.

Aus:

<%= render "bento", products: @products %>

wurde:

<%= render "table", products: @products %>

4. Die Tabellenansicht im Browser

Jetzt öffnen beziehungsweise aktualisieren wir:

http://localhost:3000/products

Unsere fünf vorhandenen Products werden nun nicht mehr als Karten, sondern in einer Tabelle dargestellt.

Die Tabelle besitzt die Spalten:

Name
Description
Price
Status
Actions

Die Felder, die wir beim Generator angegeben haben, bestimmen also die dargestellten Produktinformationen.

Zusätzlich steht für jeden Datensatz eine Aktion zur Verfügung.

Die fertige Product-Übersicht als responsive b4um Tabelle. Status-Felder werden automatisch als Badge dargestellt und für jeden Datensatz steht eine Aktion zur Verfügung.

5. Status automatisch als Badge

Eine Besonderheit unseres Beispiels ist das Feld:

status

In unseren Datensätzen steht dort beispielsweise:

Verfügbar

Der Tabellen-Generator erkennt ein Status-Feld und stellt dessen Inhalt als b4um Badge dar.

Dadurch hebt sich der Status optisch von den übrigen Tabellenwerten ab.

Wir müssen dafür in unserer Index-Seite keinen zusätzlichen HTML-Code schreiben.

6. Lange Textfelder

Unsere description ist als:

description:text

definiert.

Textfelder können in einer Tabellenansicht schnell sehr viel Platz beanspruchen.

Der b4um Tabellen-Generator berücksichtigt dies und kürzt Textfelder in der Tabellenansicht auf 100 Zeichen.

Dadurch bleibt die Übersicht kompakt, auch wenn ein Datensatz später eine deutlich längere Beschreibung enthält.

Die eigentlichen gespeicherten Daten werden dabei natürlich nicht gekürzt. Es betrifft nur ihre Darstellung innerhalb der Tabelle.

7. Die Actions-Spalte

Neben unseren angegebenen Feldern erzeugt die Tabelle zusätzlich eine Spalte:

Actions

Dort befindet sich für jeden Product-Datensatz ein:

Show

Button.

Über diesen Button gelangen wir zur Detailansicht des jeweiligen Products.

Dadurch bleibt die Tabellenansicht übersichtlich, während die vollständigen Informationen weiterhin über die jeweilige Show-Seite erreichbar sind.

8. Die Tabelle ist wiederverwendbar

Genau wie beim Bento-Generator arbeitet auch das Tabellen-Partial mit einer lokalen Collection.

Unsere normale Product-Übersicht verwendet:

<%= render "table", products: @products %>

Wir könnten dasselbe Partial aber auch mit einer anderen Product-Collection verwenden.

Wenn unser Controller beispielsweise ausgewählte Products bereitstellt:

@featured_products = Product.where(status: "Verfügbar")

könnten wir diese ebenfalls mit unserem vorhandenen Tabellen-Partial darstellen:

<%= render "products/table", products: @featured_products %>

Wir benötigen dafür keine zweite Tabelle.

9. Bento oder Tabelle?

Wir haben jetzt zwei grundsätzlich unterschiedliche Möglichkeiten kennengelernt, dieselben Daten darzustellen.

Mit:

<%= render "bento", products: @products %>

können wir unsere Products als Karten darstellen.

Mit:

<%= render "table", products: @products %>

verwenden wir stattdessen die Tabellenansicht.

Welche Variante besser geeignet ist, hängt von den Inhalten der Anwendung ab.

Eine Kartenansicht bietet sich besonders für stärker visuell oder präsentationsorientierte Inhalte an.

Eine Tabelle eignet sich dagegen sehr gut, wenn mehrere Eigenschaften verschiedener Datensätze schnell miteinander verglichen werden sollen.

Das Product-Model selbst muss dafür nicht verändert werden.

10. Der Generator im Überblick

Für eine bestehende Ressource lautet der grundsätzliche Aufruf:

bin/rails generate b4um:table MODEL FIELDS

In unserem Beispiel:

bin/rails generate b4um:table Product name:string description:text price:decimal status:string

Dadurch entsteht:

app/views/products/_table.html.erb

Die Tabelle bietet unter anderem:

Responsive b4um Tabellenkomponente
Typisierte Felddefinitionen
Kürzung langer Textfelder auf 100 Zeichen
Status-Felder als Badge
Actions-Spalte mit Show-Button
Wiederverwendbare lokale Collection

Dabei werden keine Migrationen, Routes oder Controller erzeugt.

11. Das haben wir gelernt

Mit nur einem Generator-Aufruf:

bin/rails generate b4um:table Product name:string description:text price:decimal status:string

haben wir für unsere bestehende Product-Ressource ein wiederverwendbares Tabellen-Partial erzeugt.

Anschließend mussten wir lediglich:

<%= render "bento", products: @products %>

durch:

<%= render "table", products: @products %>

ersetzen.

Unsere vorhandenen Products, das Model, der Controller und die Routes blieben unverändert.

Damit können wir für eine bestehende Ressource zwischen unterschiedlichen Darstellungen wechseln, ohne die zugrunde liegenden Daten neu aufbauen zu müssen.

Im nächsten Tutorial

Mit fünf Products ist unsere Tabelle noch sehr übersichtlich.

Bei einer größeren Anzahl von Datensätzen stellt sich allerdings schnell eine neue Frage:

Wie findet ein Besucher einen bestimmten Eintrag?

Genau darum kümmern wir uns als Nächstes.

Im nächsten Tutorial erweitern wir unsere bestehende Product-Ressource mit:

bin/rails generate b4um:search Product

Damit erhält unsere Product-Übersicht eine datenbankgestützte Suche.

Wir werden ausprobieren, wie wir beispielsweise nach:

Mac
iPad
Display

suchen können und wie sich die Suche mit unseren unterschiedlichen b4um Darstellungen kombinieren lässt.

Meld dich an und schreibe ein Kommentar