Droptables : Styling Table

1. Formatera fliken

Formatfliken är tillgänglig till höger på skärmen som standard. Det innehåller olika stylingparametrar.

 

tabell-format

 

  • Celltyp: standard eller HTML (med redaktör). Standardtypen låter dig göra beräkningar med det HTML som infogar HTML-innehåll som bilder.
  • Cellbakgrunden handlar naturligtvis om att definiera bakgrundsfärg
  • Alternativ för kant och teckensnitt kan appliceras på enstaka eller flera celler
  • Rad- och kolumnbredd / höjd kan definieras i pixlar. Välj kolumn eller rad var som helst i tabellen och validera storleken.

 

rad-kolumn-storlek

 

Ett verktygstips på musmuspekaren är också tillgänglig (måste aktiveras från komponentalternativ). När du klickar på verktygstipsknappen kan du redigera innehållet som är synligt på musen på musen på frontend.

 

tabell-cell-tooltip

 

2 . Tema och sorteringsalternativ

Tabell fliken, fortfarande till höger, du har en temaväljare för miniatyrbilder. Klicka bara på ett tema för att tillämpa det. Vi rekommenderar starkt att tillämpa teman på färska tabeller, det är verkligen lättare att ändra data då.

 

theme-val

 

Om du redan har data i tabellen och använder ett tema kommer alla data att tas bort. Om du tillämpar ett tema i en ny tabell läggs exempeldata och stil till och kan redigeras.

 

Fortfarande i tabellen till höger kolumnen är parametern för två ramar här för att definiera färgen på alternativa rader (rad1, linje2, linje1, linje2 ...)

 

två-ram

 

Den sorterbara parametern låter dig göra AJAX-datasortering på frontend. Observera att om du aktiverar filterverktyget aktiveras ett datasorteringsverktyg som standard.  

 

sorterbart-och-filter-tabell

 

  • Använd sorterbar tabell: Ja Nej
  • Justera tabellen: Center / höger / vänster / None
  • Ansvarig typ: Rullande / dölja cols
  • Aktivera filter: Ja Nej
  • Aktivera pagination: Ja Nej
  • Antal rader per sida: 10, 20, ...
  • Sortera en klumma som standard: välj klumma A, B eller C, ...
  • Order sortera en kolumn som standard: ASC / DESC

Datafilter och sortera på frontend

 

datafilter

 

Tabellen justerar handlar om att justera div som innehåller hela tabellen, centrera hela tabellen till exempel. Alternativet för frysning av kolumn och linje fryser valet och aktiverar en rullning på resten.

 

line-freeze

 

Gör mina tabeller lyhörda eller använda rullningen på små enheter?

Droptables hanterar den responsiva designen med ett prioriterat verktyg, som ett alternativ. Som standard är den responsiva funktionen inaktiverad, det kommer att vara ett överflöde (häxan fungerar dock bra på mobil).

 

reagerar-mode

 

Det responsiva läget är avancerat, du kan definiera en prioritering för att dölja kolumner i mobilstorlekar. När kolumner är dolda kommer en mobilmeny med kryssruta att visas för att tvinga visning / dölja kolumner.  
Kolumnstorleken är fast under tabellutgåvan. Om storleken på alla kolumner är för stor för behållaren har du ett överflöde och du kan enkelt bläddra på mobila enheter.

Tabell med en rullning (bättre för en liten mängd kolumner)

 

reagerar-table-scroll

 

Tabell med kolumn dold (bättre för en stor mängd kolumner)

 

reagerar-table-cololumn-hide

 

En cellhightlight är också tillgänglig som tillval. Du kan aktivera den här funktionen i  konfiguration. Det är som standard inaktiverat. Du kan justera färg och opacitet för markering.

 

bords belysa

 

3 . ACL och Frontend administration

Det är möjligt att hantera dina bord från Joomla frontend. Från Joomla menihanteraren  lägg till en ny meny objekt och välj som typ Hantera tabeller och välj Droptables frontend som mall.

 

meny- droptables

 

 

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

 

Droptables frontend

 

Obs: För att visa tabellhanteringsgränssnittet med full skärm på frontend bör du välja Droptables > Droptables frontend.

 

Du kan använda Joomla Group ACL för att kontrollera tabellutgåvan. Först för att ställa in vem som får se tabeller måste du aktivera funktionen Droptables (ACL) i Droptables konfiguration.

 

frontend-table-utgåva

 

Dessutom kan du styra tabellens framsynbarhet för varje tabell från tabellinställningarna (Mer flik). Plocka upp en Joomla användargrupp för att tillåta en grupp att se bordet på frontend.

 

användargrupp-acl

 

4 . Anpassad CSS

Låt oss gå ett steg längre. Om du är en webbdesigner med kunskaper om CSS-utgåva kan du lägga till css från  till höger fliken Fler.

Du kan lägga till stoppning och kantradie på cellen.

 

padding-css

 

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

 

css-koordinater

 

CSS-koden är färgad med kodspegel. Css-koden kan vara mindre, den fungerar också!

 

css-custom-table