Droptables: Tabella di stile

1. Formato nella tabella

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

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 i pixel per colonne o righe. Fai clic sul Fine per terminare.

2. Opzioni di tema e ordinamento

In ogni tabella, puoi trovare di selezione del tema nel menu Tema . Basta cliccare su un tema per applicarlo.

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

Nello stesso menu Tema > Colori alternativi , la funzione "Stile automatico" ti aiuta a colorare la linea sulla tabella con Intestazione e Piè di pagina . Puoi selezionare gli stili del modello o crearne di personalizzati nelle impostazioni del plugin.

Il parametro sortable consente di ordinare i dati tramite AJAX sul frontend. È possibile visualizzarlo nel menu Formato > Ordina .

L'allineamento della tabella consiste nell'allineare il div che contiene l'intera tabella, ad esempio centrando l'intera tabella. Puoi trovarlo in Menu Formato > Allineamento tabella .

È disponibile anche un'evidenziazione delle celle come opzione. È possibile abilitare le opzioni Riga, Colonna o Entrambe nella configurazione . Questa opzione è disabilitata per impostazione predefinita. È possibile regolare il colore e l'opacità dell'evidenziazione.

È disponibile anche un suggerimento al passaggio del mouse sulla cella (deve essere attivato dalle opzioni del componente). Su ogni cella di una tabella, è possibile visualizzare l' Suggerimento cliccandoci sopra con il tasto destro.

Puoi impostare la larghezza del tooltip in pixel. Verrà visualizzata una descrizione comandi con un editor per le modifiche.

Aggiungi il contenuto e salva, il gioco è fatto, il suggerimento verrà visualizzato sul lato pubblico al passaggio del mouse.

4. Amministrazione ACL e Frontend

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

Ecco cosa puoi vedere Droptables Manager dal frontend.

Nota: per visualizzare l'interfaccia del gestore delle tabelle a schermo intero sul frontend, è necessario selezionare Stile modello > Frontend Droptables

È possibile utilizzare l'ACL del gruppo utenti di Joomla per controllare le azioni di modifica delle tabelle. Innanzitutto, per impostare chi è autorizzato a visualizzare le tabelle, è necessario accedere alla Ruoli utente nella Droptables .

È possibile impostare il proprietario di una tabella dal menu Tabella > Accesso alla tabella.

5. Congelamento di righe e colonne

Congelamento a colonna

Il blocco delle colonne è disponibile nel menu Formato > Opzioni responsive . È possibile bloccare fino a 5 colonne. Il conteggio inizia dalla prima colonna.

Per bloccare riga/colonna è disponibile un'opzione aggiuntiva che consente di fissare l'altezza della tabella (perché il contenitore della tabella potrebbe avere un'altezza infinita).

Dopo aver scelto la colonna da bloccare, potrai scorrere la tabella e visualizzare sempre la colonna fissa.

Congelamento delle righe

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

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

Quindi la prima riga verrà bloccata sul frontend in base all'impostazione.

6. Filtraggio dei dati delle colonne

Un'opzione di filtraggio è disponibile nel menu Formato > Filtri . È possibile attivarla cliccando sui campi di filtraggio dei dati pubblici per abilitarli.

Esempio di filtri:

7. Riempimento delle celle e raggio del bordo

L'icona del bordo si trova sulla barra degli strumenti e aiuta a regolare la spaziatura e il raggio del bordo nella cella.

8. CSS personalizzato

Facciamo un ulteriore passo avanti. Se sei un web designer con competenze di editing CSS, potrai aggiungere CSS dal menu Formato > CSS personalizzato .

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

Il codice CSS è colorato utilizzando il codice mirror. Il codice CSS può essere ridotto, funziona anche così!

9. Tabelle Joomla reattive

Le mie tabelle sono responsive o utilizzano lo scorrimento sui dispositivi di piccole dimensioni?

Nascondere Cols

Droptables gestisce il design responsive con uno strumento di priorità, come opzione. Per impostazione predefinita, la funzionalità responsive è disabilitata, con conseguente overflow (che funziona benissimo sui dispositivi mobili). Per utilizzare "Nascondi colonne" , è necessario andare su "Menu Formato" > "Opzioni responsive".

La modalità responsive è avanzata, è possibile definire una priorità per nascondere le colonne in base alle dimensioni dei dispositivi mobili. Quando le colonne sono nascoste, verrà visualizzato un menu mobile con una casella di controllo per forzare la visualizzazione/nascondenza delle colonne.
La dimensione delle colonne viene fissata durante la modifica della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, si verificherà un overflow e sarà possibile scorrere facilmente sui dispositivi mobili.

Tabella con scorrimento (migliore per un numero limitato di colonne)

Tabella con colonna nascosta (migliore per un gran numero di colonne)

Intestazione ripetuta

Questa è un'altra opzione se desideri inserire una tabella in un'area ridotta del tuo sito. Vai su "Menu Formato" > "Opzioni Responsive". Quindi seleziona "Tipo Responsive" > "Intestazione ripetuta".

Ci saranno opzioni da personalizzare in base alle tue esigenze:

Punto di interruzione reattivo (px): seleziona un valore di 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 usa i colori della tabella

Dopodiché potrai vedere come apparirà la tabella nel frontend.

10. Scarica la tabella

Per condividere la tua tabella con il pubblico, vai al menu Tabella e seleziona l' Esporta Excel . Il formato file sarà *.xlsx quando scaricherai sul frontend.

11. Paginazione

Questa funzionalità è disponibile nel menu Formato > Impaginazione in ogni edizione della tabella. Utilizza il pulsante di attivazione/disattivazione per attivarla e seleziona il numero di righe da visualizzare in una pagina.

12. Formato per singole celle

È possibile impostare il formato: Data/Ora, Valute, Numero per singole celle in Droptables . Per prima cosa, selezionare una o più celle. Quindi andare su Menu Formato > Data/Ora.

Dopodiché, le Valute e i Numeri possono essere gestiti allo stesso modo.

13. Stampa la tabella sul frontend

A volte può essere necessario stampare la tabella. Per visualizzare il pulsante Stampa sul frontend, per prima cosa bisogna andare al menu Tabella e selezionare Pulsante Stampa .