Droptables: Tabel de stilizare

1. Formatare în tabel

Pe bara de instrumente, puteți seta stilul pentru celulă, cum ar fi: fontul, dimensiunea fontului, stilul textului, culoarea de fundal pentru celulă, culoarea textului, alinierea orizontală și verticală a celulei... Poate fi aplicat unei singure celule sau mai multor celule.

Înălțimea rândului și lățimea coloanei pot fi definite în pixeli. Accesați Meniu Format > Aplicare dimensiune coloană/linie , apoi selectați Redimensionare coloană / Redimensionare rând . În fereastra pop-up, puteți selecta un interval și seta px pentru coloane sau rânduri. Faceți clic pe Gata pentru a termina.

2. Temă și opțiuni de sortare

În fiecare tabel, puteți găsi de selectare a temei în Meniul Temă . Pur și simplu faceți clic pe o temă pentru a o aplica.

Dacă aveți deja date în tabel și aplicați o temă, toate datele vor fi eliminate. Dacă aplicați o temă unui tabel nou, vor fi adăugate date și stiluri de exemplu, care pot fi editate.

În aceeași Temă de meniu > Culori alternative , funcția „Stilizare automată” vă ajută să colorați linia din tabel cu a antetului și a subsolului . Puteți selecta stilurile șablonului sau puteți crea propriile stiluri în setările pluginului.

Parametrul sortable vă permite să sortați datele AJAX pe frontend. Puteți vedea acest lucru în meniul Format > Sort .

Alinierea tabelului constă în alinierea div-ului care conține întregul tabel, de exemplu, centrarea întregului tabel. Puteți găsi opțiunea în meniul Format > Aliniere tabel .

Evidențierea celulelor este, de asemenea, disponibilă ca opțiune. Puteți activa opțiunile Linie, Coloană sau Ambele în configurare . Este dezactivată în mod implicit. Puteți ajusta culoarea și opacitatea evidențierii.

Este disponibil și un tooltip la trecerea cu mouse-ul peste o celulă (trebuie activat din opțiunile componentei). Pe fiecare celulă dintr-un tabel, puteți vedea Tooltip atunci când faceți clic dreapta pe ea.

Puteți seta lățimea tooltip-ului în pixeli. Veți fi direcționat către un tooltip cu un editor pe care îl puteți edita.

Adăugați conținut și salvați, ați terminat, fereastra de instrumente va fi afișată în partea publică la trecerea cursorului cu mouse-ul.

4. ACL și administrarea Frontend-ului

Este posibil să vă gestionați tabelele din interfața Joomla. Din managerul de meniuri Joomla, adăugați un element Meniu nou și selectați ca tip Gestionare tabele și selectați Droptables interfață - Implicit ca șablon.

Iată ce puteți vedea în Droptables Manager din frontend.

Notă: Pentru a afișa interfața managerului de tabele pe tot ecranul pe frontend, trebuie să selectați Stil șablon > Frontend Droptables

Puteți utiliza ACL-ul Grupului de Utilizatori Joomla pentru a controla acțiunile de editare a tabelelor. Mai întâi, pentru a configura cine are permisiunea de a vizualiza tabelele, trebuie să accesați Roluri Utilizatori din Droptables .

Puteți seta proprietarul pentru un tabel din Meniu Tabel > Acces la tabel.

5. Înghețarea rândurilor și coloanelor

Congelarea coloanei

Înghețarea coloanelor este disponibilă în meniul Format > Opțiuni responsive . Puteți îngheța până la 5 coloane. Se numără de la prima coloană.

Pentru a îngheța culorile/rândurile, există o opțiune suplimentară care vă permite să fixați înălțimea tabelului (deoarece containerul tabelului poate avea o înălțime infinită).

După ce ați ales coloana pe care doriți să o înghețați, veți putea derula în tabel și veți putea afișa întotdeauna coloana fixă.

Înghețarea rândurilor

Îl puteți găsi în Meniu Format > Antet tabel , de aici puteți activa opțiunea și seta înghețarea rândurilor (până la 5 rânduri).

Dacă doriți să setați înălțimea tabelului, vă rugăm să reveniți la opțiunile Responsive.

Apoi, primul rând va fi înghețat pe frontend după setare.

6. Filtrarea datelor din coloană

O opțiune de filtrare este disponibilă în meniul Format > Filtre . O puteți activa făcând clic pentru a activa câmpurile de filtrare a datelor publice.

Exemplu de filtre:

7. Umplutura celulelor și raza bordurii

Puteți găsi pictograma bordură pe bara de instrumente care vă ajută să ajustați umplerea și raza bordurii celulei.

8. CSS personalizat

Să mergem cu un pas mai departe. Dacă ești un designer web cu abilități de editare CSS, vei putea adăuga CSS în meniul Format > CSS personalizat .

Celulele, rândurile și coloanele au coordonate pentru a le identifica fiecare și pentru a le aplica CSS personalizat. R este rândul, C este coloana. Aici este rândul 1 (r1), coloana 4 (c4) = dtr1 dtc4

Codul CSS este colorat folosind oglinda codului. Codul CSS poate fi mai puțin cod, funcționează și așa!

9. Tabele Joomla responsive

Tabelele mele sunt responsive sau folosesc derularea pe dispozitive mici?

Ascunderea coloanelor

Droptables gestionează designul responsiv cu un instrument de prioritate, ca opțiune. În mod implicit, funcția responsive este dezactivată, va exista un overflow (care funcționează perfect pe mobil). Pentru a utiliza Hiding Cols , trebuie să accesați Meniu Format > Responsive options.

Modul responsiv este avansat, puteți defini o prioritate pentru ascunderea coloanelor pe dispozitivele mobile. Când coloanele sunt ascunse, va fi afișat un meniu mobil cu o casetă de selectare pentru a forța afișarea/ascunderea coloanelor.
Dimensiunea coloanei este fixă în timpul editării tabelului. Dacă dimensiunea tuturor coloanelor este prea mare pentru container, veți avea un overflow și veți putea derula cu ușurință pe dispozitivele mobile.

Tabel cu sul (mai bine pentru un număr mic de coloane)

Tabel cu coloană ascunsă (mai bine pentru un număr mare de coloane)

Antet repetat

Aceasta este o altă opțiune dacă doriți să inserați un tabel într-o zonă mică de pe site-ul dvs. Ar trebui să navigați la Meniu Format > Opțiuni responsive. Apoi selectați Tip responsiv > Antet repetat.

Vor exista opțiuni de personalizare în funcție de cerințele dumneavoastră:

Punct de întrerupere responsiv (px): Selectați o valoare a punctului de întrerupere în pixeli pentru a defini când tabelul va comuta la acest mod responsiv
Înălțime maximă responsivă (px): Când modul responsiv este activat, în funcție de valoarea punctului de întrerupere, definește o înălțime maximă pentru a evita un tabel foarte lung
Stilizare mod responsiv: Aplicați un stil implicit pentru acest mod responsiv sau utilizați culorile tabelului

După aceea, puteți vedea cum va arăta tabelul pe frontend.

10. Descărcați tabelul

Pentru a partaja tabelul cu publicul, navigați la Meniu Tabel și bifați buton Export Excel . Tipul fișierului va fi *.xlsx la descărcarea pe frontend.

11. Paginare

Puteți găsi această funcție în meniul Format > Paginare din fiecare ediție de tabel. Folosiți butonul de comutare pentru a activa și a alege numărul de rânduri care vor fi afișate pe o pagină.

12. Format pentru celule individuale

Puteți seta formatul: Dată și oră, Valute, Număr pentru o singură celulă (celule) în Droptables . Mai întâi, trebuie să selectați o/mai multe celule. Apoi accesați Meniul Format > Dată și oră.

După aceea, monedele și numărul pot fi făcute în același mod.

13. Imprimați tabelul pe frontend

Uneori, trebuie să imprimați tabelul. Așadar, pentru a afișa butonul Imprimare pe frontend, mai întâi trebuie să navigați la Meniul Tabel și să bifați butonului Imprimare .