Droptables: Stijltabel

1. Formatteer in tabel

Op de werkbalk kunt u de stijl van een cel instellen, zoals: lettertype, lettergrootte, tekststijl, achtergrondkleur, tekstkleur, horizontale en verticale uitlijning van de cel, enzovoort. Deze instellingen kunnen worden toegepast op een enkele cel of op meerdere cellen.

De rijhoogte en kolombreedte kunnen in pixels worden ingesteld. Ga naar Menu Opmaak > Kolom-/regelgrootte toepassen en selecteer vervolgens Kolomgrootte aanpassen / Rijgrootte . In het pop-upvenster kunt u een bereik selecteren en de pixelwaarde voor kolommen of rijen instellen. Klik op Voltooien om af te ronden.

2. Thema- en sorteeropties

In elke tabel vind je om een thema te selecteren in het menu ' Thema' . Klik op een thema om het toe te passen.

Als uw tabel al gegevens bevat en u een thema toepast, worden alle gegevens verwijderd. Als u een thema toepast op een nieuwe tabel, worden voorbeeldgegevens en -stijl toegevoegd die u kunt bewerken.

Op hetzelfde menu-thema > Alternatieve kleuren helpt de functie 'Automatische styling' u de lijn in uw tabel te kleuren met behulp koptekst- en voettekststyling . U kunt sjabloonstijlen selecteren of uw eigen stijl maken in de plugininstellingen.

Met de parameter 'sortable' kunt u AJAX-gegevens sorteren op de frontend. U vindt dit in het menu 'Format' > 'Sorteren' .

De tabeluitlijning heeft betrekking op het uitlijnen van de div die de hele tabel bevat, bijvoorbeeld door de hele tabel te centreren. Je vindt deze optie in het menu Opmaak > Tabeluitlijning .

Een celmarkering is ook beschikbaar als optie. U kunt de opties 'Lijn', 'Kolom' of 'Beide' inschakelen in de configuratie . Deze functie is standaard uitgeschakeld. U kunt de kleur en de transparantie van de markering aanpassen.

Een tooltip die verschijnt wanneer u met de muis over een cel beweegt, is ook beschikbaar (deze moet worden geactiveerd via de componentopties). Bij elke cel in een tabel kunt u de tooltip -optie zien wanneer u er met de rechtermuisknop op klikt.

Je kunt de breedte van de tooltip in pixels instellen. Dit opent een tooltip met een editor waarin je de gewenste instellingen kunt bewerken.

Voeg inhoud toe en sla op, klaar! De tooltip wordt aan de publieke kant weergegeven wanneer je met de muis eroverheen beweegt.

4. ACL- en frontend-beheer

Je kunt je tabellen beheren via de Joomla-frontend. Voeg in het Joomla-menu een nieuw menu- item toe, selecteer ' Tabellen beheren' als type en kies Droptables frontend - Standaard' als sjabloon.

Dit is wat je in Droptables Manager aan de voorkant kunt zien.

Opmerking: Om de interface van het tabelbeheer op volledig scherm in de frontend weer te geven, moet u Sjabloonstijl > Droptables frontend selecteren.

Je kunt de Joomla-gebruikersgroep-ACL gebruiken om de bewerkingsacties van tabellen te beheren. Om in te stellen wie tabellen mag bekijken, ga je eerst naar Gebruikersrollen in Droptables configuratie.

Je kunt de eigenaar van een tabel instellen via Menu Tabel > Toegang tot tabellen.

5. Rij- en kolombevriezing

Kolombevriezing

Kolomvastzetten is mogelijk via het menu Opmaak > Responsieve opties . Je kunt maximaal 5 kolommen vastzetten. De telling begint bij de eerste kolom.

Om kolommen/rijen te bevriezen, is er een extra optie waarmee je de hoogte van de tabel kunt vastzetten (omdat je tabelcontainer een oneindige hoogte kan hebben).

Als je eenmaal de kolom hebt gekozen die je wilt vastzetten, kun je door de tabel scrollen en wordt de vastgezette kolom altijd weergegeven.

Rijbevriezing

Je vindt deze optie in het menu Opmaak > Tabelkop . Daar kun je de optie inschakelen en instellen hoeveel rijen je wilt vastzetten (maximaal 5 rijen).

Als je de tafelhoogte wilt instellen, ga dan terug naar de responsieve opties.

De eerste rij wordt vervolgens op de frontend bevroren, conform de ingestelde parameters.

6. Kolomgegevens filteren

Een filteroptie is beschikbaar in het menu Opmaak > Filters . U kunt deze activeren door te klikken op 'Openbare gegevensfiltervelden inschakelen'.

Voorbeelden van filters:

7. Celopvulling en randradius

Je vindt het randpictogram in de werkbalk waarmee je de opvulling en de randradius van de cel kunt aanpassen.

8. Aangepaste CSS

Laten we nog een stap verder gaan. Als je een webdesigner bent met CSS-bewerkingsvaardigheden, kun je CSS toevoegen via Menu Opmaak > Aangepaste CSS .

Cellen, rijen en kolommen hebben coördinaten om ze te identificeren en er aangepaste CSS op toe te passen. R staat voor rij, C voor kolom. In dit geval is het rij 1 (r1), kolom 4 (c4) = dtr1 dtc4

De CSS-code wordt gekleurd met behulp van Code Mirror. De CSS-code kan ook korter zijn, dat werkt ook!

9. Responsieve Joomla-tabellen

Zijn mijn tabellen responsief of maken ze gebruik van de scrollfunctie op kleine apparaten?

Cols verstoppen

Droptables biedt een prioriteitstool voor responsief ontwerp, als optie. Standaard is de responsieve functie uitgeschakeld, waardoor er een overloop ontstaat (wat overigens prima werkt op mobiele apparaten). Om 'Kolommen verbergen' , ga je naar Menu-indeling > Responsieve opties.

De responsieve modus is geavanceerd; u kunt een prioriteit instellen voor het verbergen van kolommen op mobiele schermen. Wanneer kolommen verborgen zijn, wordt een mobiel menu met een selectievakje weergegeven waarmee u de kolommen kunt weergeven of verbergen.
De kolomgrootte is vast tijdens het bewerken van de tabel. Als de grootte van alle kolommen te groot is voor de container, treedt er een overloop op, waardoor u gemakkelijk kunt scrollen op mobiele apparaten.

Tabel met een scrollbalk (handiger voor een klein aantal kolommen)

Tabel met verborgen kolommen (handiger bij veel kolommen)

Herhaalde koptekst

Dit is een andere optie als u een tabel in een kleine ruimte op uw website wilt plaatsen. Ga naar Menu-indeling > Responsieve opties. Selecteer vervolgens Responsief type > Herhaalde koptekst.

Er zijn mogelijkheden om de instellingen aan te passen aan uw wensen:

Responsief breekpunt (px): Selecteer een breekpuntwaarde in pixels om te bepalen wanneer de tabel overschakelt naar deze responsieve modus.
Responsieve max-height (px): Wanneer de responsieve modus is geactiveerd, wordt, afhankelijk van de breakpointwaarde, een max-height gedefinieerd om te voorkomen dat de tabel te lang wordt.
Stijl voor responsieve modus: Pas een standaardstijl toe voor deze responsieve modus of gebruik de tabelkleuren.

Daarna kun je zien hoe de tabel er aan de voorkant uit zal zien.

10. Downloadtabel

Om uw tabel met het publiek te delen, gaat u naar Menu > Tabel en vinkt u de 'Exporteren naar Excel' . Het bestand heeft de extensie *.xlsx wanneer u het downloadt via de frontend.

11. Paginering

U vindt deze functie in het menu Opmaak > Paginering in elke tabelversie. Gebruik de schakelaar om de functie in te schakelen en het gewenste aantal rijen per pagina te selecteren.

12. Opmaak voor afzonderlijke cellen

Droptables kunt u de volgende opmaak instellen: Datum/tijd, Valuta, Getal voor afzonderlijke cellen. Selecteer eerst een of meerdere cellen. Ga vervolgens naar Menu Opmaak > Datum/tijd.

Daarna kunnen de valuta's en getallen op dezelfde manier worden verwerkt.

13. Tabel afdrukken op de frontend

Soms moet je je tabel afdrukken. Om de afdrukknop op de website weer te geven, ga je eerst naar het menu 'Tabellen' en vink je 'Afdrukknop' .