Spring til hovedindhold

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.

 

tabel-format

 

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

 

række-søjle-størrelse

 

 

2. Tema og sorteringsmuligheder

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

 

temavalg

 

Hvis du allerede har data i din tabel, og du anvender et tema, fjernes alle data. Hvis du anvender et tema på en ny tabel, tilføjes eksempler data og stil og kan redigeres.

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

 

alternativ farve

 

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

 

sorteres-og-filter-bord

 

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

 

tabel-align

 

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.

 

bordfremhæ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.

 

tabel-celle-tooltip

 

Du kan indstille værktøjstip-bredden i pixels. Det vil bringe dig til et værktøjstip med en editor til at redigere.

 

værktøjstip-editor

 

Tilføj indhold og gem, du er færdig, værktøjstippet vil blive vist på den offentlige side ved musebevægelse.

 

værktøjstip-hover

 

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.

 

menu- droptables

 

Her er, hvad du kan se Droptables Manager fra frontend.

 

Droptables frontend

 

Bemærk: For at få vist Droptables med fuld skærm på frontend, skal du vælge Skabelonstil> Droptables 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.

 

frontend-table-udgave

 

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

 

bruger-group-acl

 

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.

 

fryse-kolonne

 

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

 

bordhøjde

 

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

 

fast-line-visning

 

Radfrysning

Du kan finde det under Menu Format > Tabeloverskrift , herfra kan du aktivere mulighed og indstille rækker til at fryse (op til 5 rækker).

 

række-frys-tabel-overskrift

 

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

Så vil den første række blive frosset på frontend efter indstillingen.

 

række-fryse

 

6. Filtrering af kolonnedata

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

 

sortere-filter

 

Eksempel på filtre:

 

data-filter

 

7. Cellepolstring og kantradius

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

 

padding-grænse

 

 

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 .

 

brugerdefineret-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-koordinaterne

 

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

 

css-custom-bord

 

9. Responsive Joomla-tabeller

Er mine borde responsive eller bruger rullen 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.

 

responsiv-skjul-kol

 

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)

 

responsiv-tabel-scroll

 

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

 

responsiv-tabel-søjle-skjul

 

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.

 

gentaget header

 

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

  • Responsive breakpoint (px): Vælg en breakpoint-værdi i pixel for at definere, hvornår tabellen skifter til denne responsive mode
  • 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 for denne responsive mode eller brug bordfarverne

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

 

gentaget-header-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.

 

eksport-excel

 

11. Paginering

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

 

pagineringsmulighed

 

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.

 

dato-tid-celler

 

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 .

 

print-knap