Passa al contenuto principale

Droptables : Styling Table

1. Formato in tabella

Sulla barra degli strumenti, puoi impostare lo stile per la cella come: carattere, dimensione del carattere, stile del testo, colore di sfondo per cella, colore del testo, allineamento orizzontale e verticale della cella,... Può essere applicato a una singola cella o a più celle.

 

forma di tabella

 

L'altezza della riga e la larghezza della colonna possono essere definite in pixel. Vai al menu Formato > Applica dimensione colonna/riga , quindi seleziona Ridimensiona colonna/Ridimensiona riga . Nella finestra popup, puoi selezionare l'intervallo e impostare px per colonne o righe. Fare clic sul Fine per terminare.

 

riga-colonna-size

 

 

2. Tema e opzioni di ordinamento

In ogni tabella, puoi trovare l' opzione di selezione del tema nel menu Tema . Basta fare clic su un tema per applicarlo.

 

theme-selezione

 

Se nella tabella sono già presenti dati e si applica un tema, tutti i dati verranno rimossi. Se si applica un tema su una nuova tabella, verranno aggiunti dati e stile di esempio che possono essere modificati.

Nello stesso tema del menu > Colori alternativi , la funzione "Stile automatico" ti aiuta a colorare la linea sulla tabella con le stile intestazione e piè . Puoi selezionare gli stili del modello o crearne di tuoi nelle impostazioni del plug-in.

 

colore alternativo

 

Il parametro sortable consente di effettuare l'ordinamento dei dati AJAX sul frontend. Puoi vedere su Menu Formato> Ordina .

 

sortable-filtro-table

 

L'allineamento della tabella riguarda l'allineamento del div che contiene l'intera tabella, ad esempio centrare tutta la tabella. Puoi trovarlo in Menu Formato > Allinea tabella .

 

tavolo-align

 

Come opzione è disponibile anche l'evidenziazione della cella. È possibile abilitare le opzioni Linea, Colonna o Entrambi nella configurazione . È disabilitato per impostazione predefinita. Puoi regolare il colore e l'opacità dell'evidenziazione.

 

table-mettendo in evidenza

 

3. Aggiungi tooltip sulle celle

È inoltre disponibile una descrizione comando al passaggio del mouse sul cellulare (deve essere attivata dalle opzioni del componente). Su ogni cella di una tabella, puoi vedere l' Descrizione comando quando fai clic con il tasto destro su di essa.

 

table-cell-tooltip

 

Puoi impostare la larghezza della descrizione comando in pixel. Ti porterà a una descrizione comando con un editor da modificare.

 

tooltip-editore

 

Aggiungi contenuto e salva, il gioco è fatto, la descrizione comandi verrà visualizzata sul lato pubblico al passaggio del mouse.

 

tooltip-hover

 

4. Amministrazione ACL e frontend

È possibile gestire le tue tabelle dal frontend di Joomla. Dal menu manager di Joomla, aggiungi una voce Nuovo menu e seleziona come tipo Gestisci tabelle e seleziona Droptables - Predefinito come modello.

 

menu- droptables

 

Ecco cosa puoi vedere Droptables Manager dal frontend.

 

Droptables : frontend

 

Nota: per visualizzare l'interfaccia del gestore tabelle a schermo intero sul frontend, devi scegliere Stile modello > Droptables .

 

È possibile utilizzare l'ACL del gruppo utenti Joomla per controllare le azioni di modifica della tabella. Innanzitutto, per impostare chi è autorizzato a visualizzare le tabelle, devi andare alla Ruoli utente nella configurazione Droptables

 

frontend-table-edition

 

Puoi impostare il proprietario di un tavolo da Menu Tavolo > Accesso al tavolo.

 

user-group-acl

 

5. Congelamento di righe e colonne

Congelamento della colonna

Il congelamento delle colonne è disponibile in Formato menu > Opzioni reattive . Puoi bloccare fino a 5 colonne. Viene contato dal primo col.

 

colonna di congelamento

 

Per congelare col/row c'è un'opzione aggiuntiva che ti permette di fissare l'altezza della tabella (perché il tuo contenitore di tabella può avere un'altezza infinita).

 

altezza del tavolo

 

Una volta scelta la colonna da bloccare, potrai scorrere la tabella e visualizzare sempre la colonna fissa.

 

fix-line-visualizzazione

 

Congelamento delle file

Puoi trovarlo in Formato menu> Intestazione tabella , da qui puoi attivare l'opzione e impostare le righe da bloccare (fino a 5 righe).

 

riga-congela-tabella-intestazione

 

Se desideri impostare l'altezza del tavolo, torna alle opzioni Responsive.

Quindi la prima riga verrà congelata sul frontend seguendo l'impostazione.

 

congelamento delle righe

 

6. Filtraggio dei dati della colonna

Un'opzione di filtraggio è disponibile in Formato menu > Filtri . Puoi attivarlo facendo clic per abilitare i campi di filtraggio dei dati pubblici.

 

filtro di ordinamento

 

Esempio di filtri:

 

dati filtro

 

7. Imbottitura delle celle e raggio del bordo

Puoi trovare l'icona del bordo sulla barra degli strumenti che aiuta a regolare il riempimento e il raggio del bordo sulla cella.

 

padding-border

 

 

8. CSS personalizzato

Andiamo un passo oltre. Se sei un web designer con competenze nell'edizione CSS, potrai aggiungere CSS in Formato menu > CSS personalizzato .

 

CSS personalizzato

 

Celle, righe e colonne hanno coordinate per identificarle e applicarvi CSS personalizzati. R è la riga, C è la colonna. Qui è la riga 1 (r1), la colonna 4 (c4) = dtr1 dtc4

 

css coordinate

 

Il codice CSS viene colorato utilizzando lo specchio del codice. Il codice CSS può essere meno codice, funziona anche!

 

css-custom-table

 

9. Tabelle Joomla reattive

Le mie tabelle sono sensibili o usano lo scorrimento su piccoli dispositivi?

Nascondere Col

Droptables gestisce il design reattivo con uno strumento prioritario, come opzione. Per impostazione predefinita, la funzione reattiva è disabilitata, ci sarà un overflow (che però funziona benissimo sui dispositivi mobili). Per utilizzare Hiding Cols , devi andare su Formato menu> Opzioni reattive.

 

responsive-hiding-col

 

La modalità reattiva è avanzata, puoi definire una priorità per nascondere le colonne sulle dimensioni dei dispositivi mobili.
Quando le colonne sono nascoste, verrà visualizzato un menu mobile con una casella di controllo per forzare la visualizzazione/nascondere delle colonne. La dimensione della colonna viene fissata durante l'edizione della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, avrai un overflow e sarai in grado di scorrere facilmente sui dispositivi mobili.

Tabella con scorrimento (meglio per un piccolo numero di colonne)

 

reattivo-table-scroll

 

Tabella con colonne nascoste (meglio per una grande quantità di colonne)

 

reattivo-table-cololumn Nascondi

 

Intestazione ripetuta

Questa è un'altra opzione se vuoi inserire una tabella in una piccola area del tuo sito. Dovresti accedere a Formato menu> Opzioni reattive. Quindi seleziona Tipo reattivo > Intestazione ripetuta.

 

intestazione ripetuta

 

Ci saranno opzioni per personalizzare secondo la tua richiesta:

  • Punto di interruzione reattivo (px): seleziona un valore del punto di interruzione in pixel per definire quando la tabella passerà a questa modalità reattiva
  • Altezza massima reattiva (px): quando la modalità reattiva è attivata, a seconda del valore del punto di interruzione, definire un'altezza massima per evitare una tabella molto lunga
  • Stile modalità reattiva : applica uno stile predefinito per questa modalità reattiva o utilizza i colori della tabella

Dopodiché, puoi vedere come apparirà il tavolo sul frontend.

 

intestazione-intestazione-ripetuta

 

10. Scarica la tabella

Per condividere il tuo tavolo con il pubblico, vai al Menu Tabella e seleziona l' pulsante Esporta Excel . Il tipo di file sarà *.xlsx durante il download sul frontend.

 

export-excel

 

11. Impaginazione

Puoi trovare questa funzione in Formato menu > Impaginazione in ogni edizione della tabella. Utilizzare il pulsante di attivazione/disattivazione per abilitare e selezionare il numero di righe da visualizzare su una pagina.

 

opzione di impaginazione

 

12. Formato per celle singole 

È possibile impostare il formato: data, ora, valute, numero per celle singole in Droptables . Innanzitutto, dovresti selezionare una o più celle. Quindi vai su Formato menu > Data e ora.

 

data-ora-celle

 

Successivamente, le valute e il numero possono essere eseguite allo stesso modo.

 

13. Stampa la tabella sul frontend

A volte è necessario stampare la tabella. Quindi, per mostrare il pulsante Stampa sul frontend, devi prima accedere alla Tabella dei menu e selezionare l' del pulsante Stampa .

 

pulsante di stampa