Zum Hauptinhalt springen

Droptables : Styling-Tabelle

1. Formatieren Sie die Tabelle

Auf der Symbolleiste können Sie den Stil für die Zelle festlegen, z.

 

Tabellenformat

 

Die Zeilenhöhe und Spaltenbreite kann in Pixel definiert werden. Gehen Sie bitte zu Menü Format > Spalten- und wählen Sie dann Spaltengröße ändern / Zeilengröße ändern . Im Popup-Fenster können Sie den Bereich auswählen und px für Spalten oder Zeilen festlegen. Klicken Sie zum Beenden auf die Schaltfläche Fertig

 

Zeilen-Spalten-Größe

 

 

2. Themen- und Sortieroptionen

In jeder Tabelle finden Sie Themenauswahl Option im Menü Theme . Klicken Sie einfach auf ein Thema, um es anzuwenden.

 

Themenauswahl

 

Wenn Sie bereits Daten in Ihrer Tabelle haben und ein Thema anwenden, werden alle Daten entfernt. Wenn Sie ein Thema auf eine neue Tabelle anwenden, werden Beispieldaten und -stile hinzugefügt und können bearbeitet werden.

Unter demselben Menüthema > Alternative Farben hilft Ihnen die Funktion „Automatische Gestaltung“ dabei, die Linie in Ihrer Tabelle mit für die Kopfzeilen- und Fußzeilengestaltung . Sie können die Vorlagenstile auswählen oder in den Plugin-Einstellungen eigene erstellen.

 

alternative Farbe

 

Mit dem sortierbaren Parameter können Sie die AJAX-Datensortierung im Frontend durchführen. Menü Format > Sortieren sehen .

 

Sortier- und Filtertabelle

 

Bei der Tabellenausrichtung geht es darum, das div auszurichten, das die gesamte Tabelle enthält, z. B. die gesamte Tabelle zu zentrieren. Zu finden unter Menü Format > Tabellenausrichtung .

 

Tabellenausrichtung

 

Optional ist auch eine Zellenhervorhebung verfügbar. Konfiguration die Optionen „Zeile“, „Spalte“ oder „Beide“ aktivieren . Es ist standardmäßig deaktiviert. Sie können Farbe und Deckkraft der Hervorhebung anpassen.

 

Tabellenhervorhebung

 

3. Fügen Sie einen Tooltip für Zellen hinzu

Ein Tooltip zum Bewegen der Zellenmaus ist ebenfalls verfügbar (muss in den Komponentenoptionen aktiviert werden). In jeder Zelle einer Tabelle können Sie die Tooltip- Option sehen, wenn Sie mit der rechten Maustaste darauf klicken.

 

Tabellen-Zellen-Tooltip

 

Sie können die Tooltip-Breite in Pixel festlegen. Sie gelangen zu einem Tooltip mit einem Editor zum Bearbeiten.

 

Tooltip-Editor

 

Fügen Sie Inhalte hinzu und speichern Sie, Sie sind fertig. Der Tooltip wird auf der öffentlichen Seite mit dem Mauszeiger angezeigt.

 

Tooltip-Hover

 

4. ACL- und Frontend-Administration

Es ist möglich, Ihre Tabellen über das Joomla-Frontend zu verwalten. im Joomla-Menümanager ein neues Menüelement hinzu wählen Sie als Typ „ Tabellen verwalten“ und wählen Sie Droptables Frontend – Standard“ als Vorlage.

 

Menü- droptables

 

Hier ist, was Sie Droptables Manager vom Frontend sehen können.

 

Droptables -frontend

 

Hinweis: Um die Tabellenmanager-Oberfläche im Vollbildmodus im Frontend anzuzeigen, sollten Sie „Vorlagenstil“ > Droptables Frontend“ wählen.

 

Sie können die ACL der Joomla-Benutzergruppe verwenden, um die Aktionen der Tabellenbearbeitung zu steuern. , wer Tabellen anzeigen darf, sollten Sie zunächst zur Benutzerrollen in der Droptables Konfiguration gehen.

 

Frontend-Table-Edition

 

Sie können den Besitzer für einen Tisch im Menü Tisch > Tischzugriff festlegen.

 

user-group-acl

 

5. Einfrieren von Zeilen und Spalten

Einfrieren der Säule

Das Einfrieren von Spalten ist im Menü „ Format“ > „Responsive Optionen“ . Sie können bis zu 5 Spalten einfrieren. Gezählt wird ab der ersten Spalte.

 

Gefriersäule

 

Um das Einfrieren von Spalten/Zeilen zu bewirken, gibt es eine zusätzliche Option, mit der Sie die Höhe der Tabelle festlegen können (da Ihr Tabellencontainer eine unendliche Höhe haben kann).

 

Tischhöhe

 

Wenn Sie die einzufrierende Spalte ausgewählt haben, können Sie in Ihrer Tabelle scrollen und immer die feste Spalte anzeigen.

 

Festnetzanzeige

 

Reihen einfrieren

Sie finden es unter „Menüformat“ > „Tabellenkopf“ . Von hier aus können Sie die Option aktivieren und festlegen, dass Zeilen eingefroren werden (bis zu 5 Zeilen).

 

Zeilen-Freeze-Tabellen-Header

 

Wenn Sie die Tischhöhe festlegen möchten, kehren Sie bitte zu den Responsive-Optionen zurück.

Dann wird die erste Zeile im Frontend nach der Einstellung eingefroren.

 

Reihen einfrieren

 

6. Spaltendaten filtern

Eine Filteroption ist unter Menü Format > Filter . Sie können es aktivieren, indem Sie auf klicken, um öffentliche Datenfilterfelder zu aktivieren.

 

Sortierfilter

 

Beispiel für Filter:

 

Datenfilter

 

7. Zellenpolsterung und Randradius

Sie finden das Rahmensymbol in der Symbolleiste, mit dem Sie den Abstand und den Randradius der Zelle anpassen können.

 

Polsterungsrand

 

 

8. Benutzerdefiniertes CSS

Gehen wir noch einen Schritt weiter. Wenn Sie ein Webdesigner mit Kenntnissen in der CSS-Edition sind, können Sie CSS unter Menü Format > Benutzerdefiniertes CSS .

 

Benutzerdefinierte CSS

 

Zellen, Zeilen, Spalten haben Koordinaten, um sie zu identifizieren und benutzerdefiniertes CSS darauf anzuwenden. R ist Zeile, C ist Spalte. Hier ist es Zeile 1 (r1), Spalte 4 (c4) = dtr1 dtc4

 

CSS-Koordinaten

 

Der CSS-Code wird mittels Code Mirror eingefärbt. Der CSS-Code kann weniger Code sein, er funktioniert auch!

 

CSS-benutzerdefinierte Tabelle

 

9. Responsive Joomla-Tabellen

Reagieren meine Tabellen oder verwenden Sie den Bildlauf auf kleinen Geräten?

Cols verstecken

Droptables handhaben das Responsive Design optional mit einem Priority-Tool. Standardmäßig ist die Responsive-Funktion deaktiviert, es wird einen Überlauf geben (was auf Mobilgeräten jedoch hervorragend funktioniert). Um Hiding Cols , sollten Sie zu Menu Format > Responsive options gehen.

 

Responsive-Hiding-Col

 

Der Responsive-Modus ist erweitert, Sie können eine Priorität für das Ausblenden von Spalten in mobilen Größen definieren.
Wenn Spalten ausgeblendet sind, wird ein mobiles Menü mit einem Kontrollkästchen angezeigt, um das Anzeigen/Ausblenden von Spalten zu erzwingen. Die Spaltengröße wird während der Tabellenbearbeitung festgelegt. Wenn die Größe aller Spalten für den Container zu groß ist, kommt es zu einem Überlauf, und Sie können auf Mobilgeräten problemlos scrollen.

Tabelle mit einer Schriftrolle (besser für eine kleine Anzahl von Spalten)

 

Responsive-Table-Scroll

 

Tabelle mit ausgeblendeter Spalte (besser für eine große Anzahl von Spalten)

 

responsive-table-cololumn-hide

 

Wiederholter Header

Dies ist eine weitere Option, wenn Sie eine Tabelle in einem kleinen Bereich Ihrer Site einfügen möchten. Menüformat > Reaktionsoptionen navigieren Wählen Sie dann Responsive Type > Wiederholter Header aus.

 

wiederholter Header

 

Es gibt Optionen, die Sie entsprechend Ihren Anforderungen anpassen können:

  • Responsive Breakpoint (px): Wählen Sie einen Breakpoint-Wert in Pixel aus, um zu definieren, wann die Tabelle in diesen Responsive-Modus wechselt
  • Responsive Max-Höhe (px): Wenn der Responsive-Modus aktiviert ist, definieren Sie abhängig vom Haltepunktwert eine Max-Höhe, um eine sehr lange Tabelle zu vermeiden
  • Styling im Reaktionsmodus : Wenden Sie ein Standard-Styling für diesen Reaktionsmodus an oder verwenden Sie die Tabellenfarben

Danach können Sie sehen, wie die Tabelle im Frontend aussehen wird.

 

wiederholtes Header-Frontend

 

10. Tabelle herunterladen

Um Ihre Tabelle für die Öffentlichkeit freizugeben, navigieren Sie zum Menü „Tabelle“ und aktivieren Sie die Schaltfläche „Excel exportieren“ . Beim Herunterladen im Frontend ist der Dateityp *.xlsx.

 

export-excel

 

11. Paginierung

Sie finden diese Funktion in jeder Tabellenedition Menü Format > Paginierung Verwenden Sie die Umschaltfläche, um die Anzahl der auf einer Seite anzuzeigenden Zeilen zu aktivieren und auszuwählen.

 

Paginierungsoption

 

12. Format für einzelne Zellen 

Sie können das Format festlegen: Datum, Uhrzeit, Währungen, Zahl für einzelne Zelle(n) in Droptables . Zuerst sollten Sie eine/mehrere Zelle(n) auswählen. Gehen Sie dann zu Menü Format > Datumszeit.

 

Datum-Uhrzeit-Zellen

 

Danach können die Währungen und die Nummer auf die gleiche Weise vorgenommen werden.

 

13. Tabelle im Frontend drucken

Manchmal müssen Sie Ihre Tabelle ausdrucken. Um also die Schaltfläche „Drucken“ im Frontend anzuzeigen, sollten Sie zunächst zur Menütabelle die Schaltfläche „Drucken“ aktivieren .

 

Drucken-Schaltfläche