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 delle righe e la larghezza delle colonne possono essere definite in pixel. Andare su Menu Formato > Applica dimensione colonna/riga, quindi selezionare Ridimensiona colonna / Ridimensiona riga. Nella finestra a comparsa, è possibile selezionare l'intervallo e impostare i pixel per colonne o righe. Fare 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.

Nella stessa sezione Tema del menu > Colori alternativi, la funzione "Stile automatico" consente di colorare la linea della tabella con dell'intestazione e del piè di pagina . È possibile selezionare gli stili predefiniti o crearne di personalizzati nelle impostazioni del plugin.

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

L'allineamento della tabella riguarda l'allineamento del div che contiene l'intera tabella, ad esempio centrando l'intera tabella. Puoi trovare questa impostazione nel 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 > Droptables frontend.

È 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

È possibile trovarlo nel menu Formato > Intestazione tabella; da qui è possibile 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

È disponibile un'opzione di filtro nel menu Formato > Filtri. È possibile attivarla facendo clic per abilitare i campi di filtro dei dati pubblici.

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 modifica CSS, potrai aggiungere CSS tramite il menu Formato > CSS personalizzato.

Celle, righe e colonne hanno delle coordinate che permettono di identificarle e di applicare loro un CSS personalizzato. R indica la riga, C la colonna. In questo caso, 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 responsivo con uno strumento prioritario, disponibile come opzione. Per impostazione predefinita, la funzionalità responsiva è disabilitata e verrà visualizzato un overflow (che funziona comunque benissimo sui dispositivi mobili). Per utilizzare Nascondi colonne , è necessario andare su Menu Formato > Opzioni responsive.

La modalità responsive è avanzata e consente di definire una priorità per nascondere le colonne sui dispositivi mobili. Quando le colonne sono nascoste, viene visualizzato un menu mobile con una casella di controllo per forzarne la visualizzazione o la scomparsa.
La dimensione delle colonne è fissa durante la modifica della tabella. Se la dimensione di tutte le colonne è eccessiva per il contenitore, si verificherà un overflow, che consentirà di 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 uno spazio ridotto del tuo sito. Devi andare 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 Tabellae seleziona l' Esporta Excel . Il formato file sarà *.xlsx quando scaricherai sul frontend.

11. Paginazione

È possibile trovare questa funzione nel menu Formato > Paginazione in ogni edizione della tabella. Utilizzare il pulsante di attivazione/disattivazione per abilitarla e selezionare il numero di righe da visualizzare per pagina.

12. Formato per singole celle

è possibile impostare il formato di data e ora, valuta e numero per una o più celle. DroptablesPer prima cosa, seleziona una o più celle. Quindi vai al menu Formato > Data e 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 .