Droptables : Styling-Tabelle

1. Formatieren Sie die Tabelle

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

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

2. Themen- und Sortieroptionen

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

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.

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

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 .

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.

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.

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

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

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.

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

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.

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

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.

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).

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

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).

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.

6. Spaltendaten filtern

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

Beispiel für Filter:

7. Zellenpolsterung und Randradius

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

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 .

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

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

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.

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)

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

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.

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.

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.

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.

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.

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 .