Droptables : Styling-Tabelle

1. In Tabelle formatieren

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.

Auf demselben Menüthema > Alternative Farben hilft Ihnen die Funktion „Automatisches Styling“ dabei, die Zeile in Ihrer Tabelle mit Optionen Kopfzeilen und Fußzeilen Sie können die Vorlagenstile auswählen oder Ihre eigenen in den Plugin-Einstellungen erstellen.

Mit dem sortierbaren Parameter können Sie AJAX-Daten im Frontend sortieren. Sie können im Menü Format > Sortieren .

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 Zellenmarkierung verfügbar. Sie können die Optionen Linie, Spalte oder Beide in der Konfiguration aktivieren . Es ist standardmäßig deaktiviert. Sie können Farbe und Deckkraft der Hervorhebung anpassen.

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.

Sie können die QuickInfo-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 vom Joomla-Frontend aus zu verwalten. Droptables Sie im Joomla- Droptables ein neues Droptables und 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.

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. Es wird vom ersten Col gezählt.

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 Zeilen zum Einfrieren festlegen (bis zu 5 Zeilen).

Wenn Sie die Tischhöhe einstellen möchten, kehren Sie bitte zu den Optionen "Reaktionsschnell" 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 Rahmenradius in 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 Website einfügen möchten. Sie sollten zu Menüformat > Responsive Optionen navigieren. Wählen Sie dann Responsive Type > Repeated header aus.

Es gibt Optionen, die Sie an Ihre 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 .