Droptables : Styling Table

1. Formater i tabel

På værktøjslinjen kan du indstille stil for celle såsom: skrifttype, skriftstørrelse, tekststil, baggrundsfarve for celle, tekstfarve, celle vandret og lodret justering,... Det kan anvendes på en enkelt celle eller flere celler.

Rækkehøjden og kolonnebredden kan defineres i pixels. Gå til Menuformat > Anvend kolonne-/linjestørrelse , og vælg derefter Tilpas kolonnestørrelse / Tilpas række . I pop op-vinduet kan du vælge område og indstille px for kolonner eller rækker. Klik på Udført for at afslutte.

2. Tema og sorteringsmuligheder

I hver tabel kan du finde temavalgsmuligheden under Menu Theme . Bare klik på et tema for at anvende det.

På det samme menutema > Alternative farver hjælper funktionen "Automatisk styling" dig med at farve linjen på dit bord med sidehoved og sidefod . Du kan vælge skabelonstilene eller lave dine egne i plugin-indstillinger.

Den sorterbare parameter giver dig mulighed for at lave AJAX-datasortering på frontend. Du kan se på Menu Format > Sorter .

Tabeljusteringen handler om at justere den div, der indeholder hele tabellen, centrere hele tabellen f.eks. Du kan finde under Menuformat > Tabeljustering .

En cellefremhævning er også tilgængelig som en mulighed. Du kan aktivere Linje, Kolonne eller Begge muligheder i konfigurationen . Den er som standard deaktiveret. Du kan justere farve og opacitet af fremhævning.

3. Tilføj værktøjstip på celler

Et værktøjstip om cellemusehovering er også tilgængeligt (skal aktiveres fra komponentindstillinger). På hver celle i en tabel kan du se værktøjstip- indstillingen, når du højreklikker på den.

Du kan indstille værktøjstipbredden i pixels. Det bringer dig til et værktøjstip med en editor til redigering.

Tilføj indhold og gem, du er færdig, værktøjstip vises på offentlig side på musemarkøren.

4. ACL og Frontend administration

Det er muligt at administrere dine borde fra Joomla frontend. Fra Joomla Droptables , tilføje et nyt menupunkt og vælg som type Administrer tabeller og vælg Droptables frontend - Standard som skabelon.

Her er hvad du kan se Droptables Manager fra frontend.

Du kan bruge Joomla User Group ACL til at styre tabeludgavens handlinger. Først, for at indstille, hvem der har tilladelse til at se tabeller, skal du gå til Brugerroller i Droptables konfigurationen.

Du kan indstille ejeren af ​​et bord fra Menu Tabel > Tabeladgang.

5. Række- og kolonnefrysning

Kolonnefrysning

Kolonnefrysning er tilgængelig i menuformatet > Responsive muligheder . Du kan fryse op til 5 kolonner. Det tælles fra første kol.

For at lave farve/rækkefrysning er der en ekstra mulighed, der lader dig fastgøre bordets højde (fordi din bordbeholder kan have en uendelig højde).

Når du har valgt den kolonne, der skal fryses, vil du kunne rulle på din tabel og altid vise den faste kolonne.

Radfrysning

Du kan finde den under Menu Format > Tabeloverskrift , herfra kan du slå muligheden til og indstille rækker til at fryse (op til 5 rækker).

Hvis du vil indstille bordhøjden, skal du vende tilbage til Responsive muligheder.

Derefter fryses den første række ved frontend efter indstillingen.

6. Filtrering af kolonnedata

En filtreringsmulighed er tilgængelig under Menu Format > Filtre . Du kan aktivere den ved at klikke for at aktivere offentlige datafiltreringsfelter.

Eksempel på filtre:

7. Cellepolstring og kantradius

Du kan finde kantikonet på værktøjslinjen, der hjælper med at justere polstring og kantradius på cellen.

8. Brugerdefineret CSS

Lad os gå et skridt videre. Hvis du er en webdesigner med færdigheder i CSS-udgave, vil du være i stand til at tilføje CSS på Menu Format > Custom CSS .

Celler, rækker, kolonner har koordinater til at identificere hver enkelt og anvende tilpasset CSS til den. R er række, C er kolonne. Her er det række 1 (r1), kolonne 4 (c4) = dtr1 dtc4

CSS-koden farves ved hjælp af kodespejl. CSS-koden kan være mindre kode, den virker også!

9. Responsive Joomla-tabeller

Er mine tabeller lydhøre eller bruger du rullepanelet på små enheder?

Skjul Cols

Droptables håndterer det responsive design med et prioriteret værktøj, som en mulighed. Som standard er den responsive funktion deaktiveret, der vil være et overløb (som dog fungerer godt på mobilen). For at bruge Hiding Cols- indstillingen skal du gå til Menuformat > Responsive muligheder.

Den responsive tilstand er avanceret, du kan definere en prioritet for at skjule kolonner på mobilstørrelser.
Når kolonner er skjult, vises en mobilmenu med et afkrydsningsfelt for at fremtvinge visning/skjulning af kolonner. Søjlestørrelsen er fast under tabeludgaven. Hvis størrelsen af ​​alle kolonnerne er for stor til containeren, vil du have et overløb, og du vil nemt kunne scrolle på mobile enheder.

Tabel med rulle (bedre for en lille mængde kolonner)

Tabel med kolonne skjult (bedre for et stort antal kolonner)

Gentagen header

Dette er en anden mulighed, hvis du vil indsætte en tabel i et lille område på dit websted. Du skal navigere til Menuformat > Responsive muligheder. Vælg derefter Responsive Type > Repeated header.

Der vil være muligheder for at tilpasse efter dit krav:

• Responsivt breakpoint (px): Vælg en breakpoint-værdi i pixel for at definere, hvornår tabellen skifter til denne responsive tilstand
• Responsiv maksimalhøjde (px): Når den responsive tilstand er aktiveret, afhængigt af brudpunktværdien, definer en maksimal højde for at undgå en meget lang tabel
• Responsive mode styling: Anvend en standard styling til denne responsive mode eller brug tabelfarverne

Derefter kan du se, hvordan bordet ser ud på frontend.

10. Download tabel

For at dele din tabel med offentligheden skal du navigere til Menutabel og markere Eksporter Excel-knappen . Filtypen vil være *.xlsx ved download på frontend.

11. Paginering

Du kan finde denne funktion under Menuformat > Sideinddeling i hver tabeludgave. Brug til/fra-knappen til at aktivere og vælge antallet af rækker, der skal vises på en side.

12. Formater til enkelte celler 

Du kan indstille format: Dato, klokkeslæt, Valutaer, Tal for enkeltceller i Droptables . Først skal du vælge en/flere celle(r). Gå derefter til Menu Format > Dato tid.

Derefter kan Valutaer og Antal gøres på samme måde.

13. Print bord på frontend

Nogle gange skal du udskrive dit bord. Så for at vise Udskriv-knappen på frontend, skal du først navigere til Menutabel og markere Udskriv-knappen .