Droptables: Stylingtabell

1. Formatera i tabell

I verktygsfältet kan du ställa in stil för celler, såsom: teckensnitt, teckenstorlek, textstil, bakgrundsfärg för celler, textfärg, cellens horisontella och vertikala justering,... Det kan tillämpas på en enskild cell eller flera celler.

Radhöjd och kolumnbredd kan definieras i pixlar. Gå till Meny Format > Använd kolumn-/radstorlek och välj sedan Ändra kolumnstorlek / Ändra radstorlek . I popup-fönstret kan du välja intervall och ange pixelstorlek för kolumner eller rader. Klicka på Klar för att slutföra.

2. Tema och sorteringsalternativ

I varje tabell hittar du för temaval i menyn Tema . Klicka bara på ett tema för att tillämpa det.

Om du redan har data i din tabell och du använder ett tema kommer all data att tas bort. Om du använder ett tema på en ny tabell kommer exempeldata och stil att läggas till och kan redigeras.

I samma menytema > Alternativa färger hjälper funktionen "Automatisk styling" dig att färglägga linjen i din tabell med för sidhuvudsstyling och sidfotsstyling . Du kan välja mallstilar eller skapa dina egna i plugin-inställningarna.

Parametern sortable låter dig sortera AJAX-data i frontend. Du kan se det under Meny Format > Sortera .

Tabelljustering handlar om att justera div-funktionen som innehåller hela tabellen, centrera hela tabellen till exempel. Du hittar den under Meny Format > Tabelljustering .

En cellmarkering är också tillgänglig som ett alternativ. Du kan aktivera alternativen Linje, Kolumn eller Båda i konfigurationen . Det är inaktiverat som standard. Du kan justera färg och opacitet för markeringen.

Ett verktygstips för cellmusen finns också tillgängligt (måste aktiveras från komponentinställningar). På varje cell i en tabell kan du se verktygstipsalternativet när du högerklickar på den.

Du kan ställa in verktygstipsets bredd i pixlar. Det tar dig till ett verktygstips med en redigerare att redigera.

Lägg till innehåll och spara, du är klar, verktygstipset visas på den offentliga sidan när du håller muspekaren över den.

4. ACL och frontend-administration

Det är möjligt att hantera dina tabeller från Joomlas frontend. Från Joomlas menyhanterare, lägg till ett nytt menyalternativ och välj typen Hantera tabeller och välj Droptables frontend - Standard som mall.

Här är vad du kan se Droptables Manager från frontend.

Obs: För att visa tabellhanterarens gränssnitt i helskärmsläge på användargränssnittet bör du välja Mallstil > Droptables gränssnitt.

Du kan använda Joomla User Group ACL för att styra tabellredigeringsåtgärderna. Först, för att konfigurera vem som får visa tabeller, bör du gå till Användarroller i Droptables -konfigurationen.

Du kan ange ägare för ett bord från Meny Bord > Bordåtkomst.

5. Frysning av rader och kolumner

Kolumnfrysning

Kolumnfrysning är tillgängligt i menyn Format > Responsiva alternativ . Du kan frysa upp till 5 kolumner. Det räknas från den första kolumnen.

För att frysa färg/rad finns det ett ytterligare alternativ som låter dig fixera tabellens höjd (eftersom din tabellbehållare kan ha en oändlig höjd).

När du har valt vilken kolumn som ska frysas kan du skrolla i tabellen och alltid visa den fasta kolumnen.

Radfrysning

Du hittar den under Menyformat > Tabellrubrik , härifrån kan du aktivera alternativet och ställa in att rader ska frysas (upp till 5 rader).

Om du vill ställa in tabellhöjden, gå tillbaka till Responsiva alternativ.

Sedan kommer den första raden att frysas i frontend efter inställningen.

6. Filtrering av kolumndata

Ett filtreringsalternativ finns tillgängligt under Meny Format > Filter . Du kan aktivera det genom att klicka för att aktivera fält för offentliga datafiltrering.

Exempel på filter:

7. Cellfyllning och kantradius

Du hittar kantlinjeikonen i verktygsfältet som hjälper till att justera utfyllnad och kantlinjeradie i cellen.

8. Anpassad CSS

Låt oss gå ett steg längre. Om du är en webbdesigner med kunskaper i CSS-redigering kan du lägga till CSS via Menyformat > Anpassad CSS .

Celler, rader och kolumner har koordinater för att identifiera var och en och tillämpa anpassad CSS på den. R är rad, C är kolumn. Här är det rad 1 (r1), kolumn 4 (c4) = dtr1 dtc4

CSS-koden är färgad med hjälp av kodspegel. CSS-koden kan vara mindre kod, det fungerar också!

9. Responsiva Joomla-tabeller

Är mina tabeller responsiva eller använder de scrollfunktionen på små enheter?

Dölja kolumner

Droptables hanterar responsiv design med ett prioriteringsverktyg som ett alternativ. Som standard är den responsiva funktionen inaktiverad, det kommer att finnas ett överflöde (vilket fungerar utmärkt på mobiler dock). För att använda Dölj kolumner bör du gå till Menyformat > Responsiva alternativ.

Det responsiva läget är avancerat, du kan definiera en prioritet för att dölja kolumner på mobila enheter. När kolumner är dolda visas en mobilmeny med en kryssruta för att tvinga fram visning/döljning av kolumner.
Kolumnstorleken är fast under tabellredigeringen. Om storleken på alla kolumner är för stor för behållaren kommer det att bli ett överflöd och du kommer enkelt att kunna scrolla på mobila enheter.

Tabell med scroll (bättre för ett litet antal kolumner)

Tabell med dold kolumn (bättre för ett stort antal kolumner)

Upprepad rubrik

Detta är ett annat alternativ om du vill infoga en tabell i ett litet område på din webbplats. Du bör gå till Menyformat > Responsiva alternativ. Välj sedan Responsiv typ > Upprepad rubrik.

Det kommer att finnas alternativ att anpassa efter dina behov:

Responsiv brytpunkt (px): Välj ett brytpunktsvärde i pixlar för att definiera när tabellen ska växla till detta responsiva läge.
Responsiv maxhöjd (px): När det responsiva läget är aktiverat, definiera en maxhöjd, beroende på brytpunktsvärdet, för att undvika en mycket lång tabell.
Responsivt lägesformat: Använd en standardformatering för detta responsiva läge eller använd tabellfärgerna

Efter det kan du se hur tabellen kommer att se ut i frontend.

10. Ladda ner tabell

För att dela din tabell med allmänheten, gå till Meny Tabell och markera Exportera Excel . Filtypen kommer att vara *.xlsx vid nedladdning på frontend.

11. Paginering

Du hittar den här funktionen under Menyformat > Sidnumrering i varje tabellversion. Använd växlingsknappen för att aktivera och välja antalet rader som ska visas på en sida.

12. Format för enskilda celler

Du kan ställa in format: Datum och tid, Valutor, Nummer för enskild(a) cell(er) i Droptables . Först bör du välja en/flera celler. Gå sedan till Menyformat > Datum och tid.

Efter det valutor och nummer göras på samma sätt.

13. Skriv ut tabellen på frontend

Ibland behöver du skriva ut din tabell. Så för att visa utskriftsknappen i gränssnittet bör du först gå till menyn Tabell och markera alternativet Skriv ut-knapp