Tabelle in WordPress sono ingannevolmente semplici. Finché ti servono una o due griglie statiche per l'intero sito, l'HTML manuale è sufficiente. Ma non appena devi gestire aggiornamenti regolari dei dati, importazioni da Excel o Google Sheets, o l'ordinamento delle colonne, i metodi nativi si trasformano in un continuo smanettamento di codice.

Peggio ancora: il tuo sito è responsive, ma le tabelle HTML non lo sono. Sugli schermi mobile si disintegrano, richiedono lo scorrimento orizzontale e rompono l'intero layout. Aggiungere interattività (filtri, ricerca, modifica frontend) con gli strumenti standard di WordPress è praticamente impossibile senza assumere uno sviluppatore.

wpDataTables è un plugin che risolve tutti questi problemi con una singola installazione. Niente codice, piena responsività nativa, decine di fonti dati e visualizzazione tramite grafici. È usato da più di 80.000 aziende e la versione gratuita Lite è stata installata oltre 60.000 volte su WordPress.org. Vediamo cosa può fare e come si usa.

💡 Panoramica rapida:

• Installa wpDataTables da CodeCanyon e attivalo sul tuo sito.
• Crea una tabella da CSV, Excel, Google Sheets, MySQL, JSON, XML o manualmente: qualsiasi fonte funziona.
• Configura l'aspetto: colori, font, allineamento, comportamento responsive su mobile.
• Inserisci lo shortcode pronto in un articolo o una pagina: la tabella appare immediatamente con filtri, ordinamento e ricerca.
• Se necessario, crea un grafico basato sulla stessa tabella e aggiungilo allo stesso modo.

Cosa non va nelle tabelle HTML su WordPress

Il metodo standard per inserire tabelle sono i tag HTML nella scheda dell'editor di testo. La struttura di base si presenta così:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Il risultato è una semplice tabella a tre colonne. Ha un aspetto decente se ne hai una sola sul sito e non prevedi di aggiornarla.

Ma l'approccio ha tre problemi fondamentali. Primo: le tabelle HTML sono statiche. I dati sono cablati nel codice e ogni modifica significa modificare di nuovo il codice. Secondo: la responsività. Il tema può essere fluido, ma <table> non lo è. Su uno smartphone, gli utenti vedono colonne tagliate o lo scorrimento orizzontale. Terzo: niente filtri, niente ordinamento, niente ricerca, solo una griglia inerte.

Il tuo sito è responsive. Le tue tabelle no.

Anche l'importazione manuale dei dati da Excel o Google Sheets non aiuta: copiare e incollare dai fogli di calcolo in WordPress trasforma la formattazione in caos. Se hai molte tabelle e si aggiornano frequentemente, passi il tempo a lottare con il layout invece di lavorare sui contenuti.

Creare tabelle senza codice con wpDataTables

wpDataTables è un plugin premium che trasforma WordPress in un motore completo per lavorare con tabelle e grafici. Non una sola riga di codice. Installalo, scegli una fonte dati, configura l'aspetto e la tabella è pronta per essere inserita con uno shortcode.

Il plugin è distribuito tramite CodeCanyon con il modello "acquista una volta, usa per sempre". I prezzi partono da $49 all'anno per una licenza per singolo dominio (piano Starter). Ci sono tre piani superiori: Standard, Pro e Developer, che si differenziano per il numero di domini e funzionalità avanzate come la connessione a database multipli e l'integrazione con WooCommerce. La versione gratuita Lite è disponibile nella directory di WordPress.org con funzionalità di base.

🔗 Scopri di più su wpDataTables | 🔗 Demo dal vivo

Gli sviluppatori si sono concentrati su tre aspetti: flessibilità delle fonti, personalizzazione avanzata e lavoro con dati in tempo reale. Vediamo le caratteristiche principali.

Fonti dati multiple

Il plugin recupera i dati da qualsiasi fonte. Excel, CSV, Google Sheets, XML, JSON, array PHP serializzati e query MySQL dirette sono tutte disponibili al momento della creazione di una tabella. Puoi compilare manualmente una tabella da zero tramite l'editor del backend. Oppure connetterti a una fonte in tempo reale in modo che la tabella si aggiorni dinamicamente a ogni caricamento della pagina.

MySQL merita una menzione speciale. Scrivi una query e il plugin restituisce il risultato come una tabella ordinabile con ricerca. Sono supportate connessioni separate a MS SQL e PostgreSQL, e ogni tabella può recuperare i dati dal proprio server. Per i progetti con architettura distribuita, questo risolve il problema del consolidamento dei dati senza ETL intermedi.

Personalizzazione avanzata e layout responsive

La struttura della tabella si compone con checkbox e selettori di colore, senza bisogno di CSS. Le impostazioni includono tipografia, allineamento, formati di data e ora e lingua dell'interfaccia. Sono disponibili skin già pronte per le tabelle: viola, scura, blu. Per i casi più complessi, ci sono campi per JS e CSS personalizzati.

La responsività è implementata senza compromessi. Il plugin non si limita a comprimere la tabella alla larghezza dello schermo: sei tu a decidere come si comporta su mobile. Puoi attivare la compressione flessibile delle colonne, aggiungere lo scorrimento orizzontale o limitare la larghezza massima. La tabella resta leggibile su qualsiasi dispositivo.

Filtri per una ricerca efficiente

Quando crei una tabella, attivi i filtri e gli utenti ottengono la possibilità di restringere immediatamente la selezione per qualsiasi colonna. Per grandi volumi di dati, questo cambia radicalmente l'esperienza: invece di scorrere tre schermate, una persona inserisce un parametro e vede solo le righe pertinenti.

I filtri funzionano lato server. Ogni azione dell'utente aumenta il carico computazionale sul database, quindi il plugin ti permette di disattivare il filtraggio dove è superfluo. L'equilibrio tra velocità e praticità si configura per ogni singola tabella.

Modifica MySQL dal frontend

Una funzionalità unica: attivando un'opzione nella scheda Editing, permetti agli utenti di modificare i dati direttamente dal frontend del sito. Non si tratta solo di un ritocco estetico, le modifiche vengono scritte nel database. L'accesso è configurato per ruoli: tutti i visitatori, solo gli utenti registrati o gruppi specifici.

Gli scenari sono molti: i clienti aggiornano i propri record in una tabella CRM, i dipendenti segnano lo stato delle attività, gli iscritti aggiungono dati a un registro condiviso. Nessun pannello di amministrazione separato, nessuna formazione degli utenti su WordPress.

Visualizzazione tramite grafici

Le persone leggono le visualizzazioni ordini di grandezza più velocemente dei numeri tabellari. wpDataTables costruisce grafici dinamici basati su Google Charts, HighCharts o Chart.js: basta specificare la tabella di origine e mappare le colonne sugli assi del grafico.

Ci sono più di una dozzina di tipi di grafico: a linee, a torta, a colonne, istogramma, a dispersione. Dopo la configurazione, il grafico ottiene un proprio shortcode e viene inserito in un articolo indipendentemente dalla tabella. Aggiornati i dati di origine, il grafico si ridisegna automaticamente. Perfetto per i blogger con report mensili sui ricavi e per le dashboard aziendali.

Come creare una tabella responsive: guida passo passo

La teoria è chiara, passiamo alla pratica. Tre passaggi ti separano da una tabella funzionante sul tuo sito.

Step 1: installa wpDataTables

Il plugin si acquista su CodeCanyon. Dopo il pagamento, vai nella sezione Download del tuo account, cerca wpDataTables e scarica il file etichettato «Installable WordPress file only». Nell'amministrazione di WordPress, vai su Plugin → Aggiungi nuovo → Carica plugin, seleziona il file ZIP scaricato e attivalo.

Per gli aggiornamenti automatici, dovrai inserire il Codice di acquisto dell'articolo (Item Purchase Code) fornito da CodeCanyon. Ti servirà anche per accedere al supporto premium durante il primo anno dopo l'acquisto.

Step 2: crea una tabella

Nel menu laterale di WordPress comparirà una nuova voce chiamata wpDataTables. Cliccaci sopra, poi sul pulsante blu Aggiungi. Il plugin ti proporrà di scegliere un metodo di creazione della tabella: importare da CSV/Excel, collegare a Google Sheets, creare manualmente, tramite query SQL o collegare a un'API esterna.

A scopo dimostrativo, prendiamo il CSV. Carica il file, il plugin riconosce automaticamente i delimitatori e mostra un'anteprima. Nella schermata successiva, imposti il nome della tabella e modifichi le colonne se necessario: rinomina, elimina quelle superflue, aggiungine di nuove.

L'ultima schermata è quella delle regolazioni fini. Qui attivi gli strumenti della tabella (stampa, copia, esporta in PDF/Excel), i filtri e la modifica da frontend. Tutte le modifiche vengono visualizzate nell'anteprima dal vivo sulla destra. Cliccato Salva, la tabella è pronta.

Step 3: inserisci lo shortcode in un articolo o una pagina

Dopo il salvataggio, il plugin ti fornirà uno shortcode simile a [wpdatatable id=X]. Copialo e incollalo in qualsiasi articolo o pagina di WordPress, tutto qui. La tabella apparirà sul sito con tutte le funzionalità attivate: ordinamento, ricerca, filtri.

Il risultato è nello screenshot qui sopra: i filtri sono attivi, la ricerca funziona, le colonne si ordinano al clic. Non una riga di codice oltre a un breve shortcode. Impiegheresti un'ora a costruire la stessa tabella in HTML, e comunque senza interattività.

Come costruire un grafico basato su una tabella

Quando la tabella è pronta, aprila nell'elenco e clicca su Crea un grafico. Scegli un tipo di visualizzazione: colonne, torta, linee, dispersione, in totale sono disponibili più di una dozzina di varianti.

Nel passaggio successivo, specifichi la tabella di origine e mappi le colonne sugli assi. Per un grafico a colonne, hai bisogno di almeno due colonne: categorie e valori. Le colonne numeriche possono essere filtrate con uno slider a intervallo, utile quando la tabella ha centinaia di righe ma devi mostrarne solo una parte sul grafico.

La terza schermata riguarda le impostazioni visive. Larghezza, altezza, sfondo, bordi, font, colori delle serie, etichette, tooltip al passaggio del mouse. Configurato il tutto, salva, copia lo shortcode del grafico e inseriscilo nel contenuto accanto alla tabella o separatamente.

I grafici sono collegati dinamicamente alla tabella. Se i dati di origine cambiano, il grafico si ricostruisce da solo. Niente esportazioni in Excel, aggiornamenti manuali di screenshot o altre attività di routine.

Estensioni per capacità aggiuntive

La funzionalità di base è sufficiente per la maggior parte delle esigenze. Ma se hai bisogno di funzioni specifiche, l'ecosistema di addon copre scenari di nicchia.

Filtri potenti. Filtraggio a cascata (da sinistra a destra: categoria selezionata, il filtro della sottocategoria si aggiorna), ricerca sfaccettata, possibilità di nascondere la tabella finché non vengono selezionati i parametri e ricerca in tempo reale durante la digitazione. Si attiva con un solo flag nelle impostazioni.

Il generatore di report produce documenti Word o Excel direttamente dai dati tabellari. Scenario: i dipendenti hanno compilato la tabella tramite frontend, tu hai cliccato un pulsante, report mensile pronto per la stampa. Utile per timesheet, fatture e analisi periodiche.

Formidable Forms. I form raccolgono dati dagli utenti, il plugin trasforma automaticamente ogni invio in una riga della tabella. Campo del form, colonna della tabella. Nessuna esportazione intermedia.

Gravity Forms. Stessa meccanica, ma per il builder di form WordPress più diffuso. Dopo l'integrazione, Gravity Forms diventa una fonte dati aggiuntiva quando si crea una tabella. È supportata la modifica frontend dei record creati tramite form.

Piano di abbonamento e prezzi

wpDataTables ha una griglia prezzi semplice con quattro livelli:

Tutti i piani includono un anno di supporto premium e aggiornamenti mensili. La licenza è a vita: se non rinnovi, il plugin continua a funzionare, ma perdi l'accesso ad aggiornamenti e supporto. C'è una garanzia di rimborso di 15 giorni.

Il modo migliore per valutare il plugin prima dell'acquisto è la sandbox live sul sito di wpDataTables. Ottieni accesso completo al backend: crei tabelle, costruisci grafici, sperimenti con le impostazioni. Niente demo video e screenshot, un vero test drive nel browser.

Per una partenza rapida, c'è una versione Lite gratuita su WordPress.org (oltre 60.000 installazioni attive). Le funzionalità sono limitate ma sufficienti per capire se il plugin fa al caso tuo.

⁉️🤔 Domande frequenti

Devo saper programmare per usare wpDataTables?

No, tutte le tabelle e i grafici si creano tramite un'interfaccia visuale, un wizard ti guida dalla selezione della fonte fino all'inserimento dello shortcode. Esistono campi per JS e CSS personalizzati, ma sono opzionali. Gli sviluppatori apprezzeranno la possibilità di scrivere le proprie query SQL, connettersi a database esterni e usare l'API REST per recuperare dati da servizi di terze parti.

Cosa succede alle tabelle dopo aver rimosso il plugin?

Di default, le tabelle vengono salvate nel database anche se disattivi o cancelli wpDataTables. Reinstallandolo, si ripristineranno. Questo comportamento è configurabile: nelle opzioni puoi scegliere la cancellazione completa dei dati insieme al plugin. Le tabelle non sono legate in modo permanente al plugin, puoi sempre esportare i dati in CSV e trasferirli su un altro strumento.

In cosa differisce la versione a pagamento dalla Lite?

La versione Lite permette di creare tabelle da CSV, Excel, Google Sheets, JSON e XML, oltre che manualmente. Sono disponibili ordinamento e ricerca di base. Manca però: query MySQL, connessione a database multipli, grafici, modifica frontend, filtraggio, integrazione WooCommerce e tutti gli addon. Se gestisci dati da fonti esterne e vuoi costruire grafici, ti serve la versione a pagamento. Per tabelle statiche, la Lite sarà probabilmente sufficiente.

Il plugin supporta WooCommerce?

Sì, a partire dal piano Standard. Puoi creare tabelle prodotto dinamiche che si aggiornano automaticamente quando il catalogo WooCommerce cambia. I clienti ottengono una lista prodotti ordinabile e filtrabile con prezzi e giacenze aggiornati. Per negozi con assortimenti ampi, questo sostituisce un plugin di catalogo separato.

Quante tabelle posso creare?

Tutte quelle che ti servono. Nessun piano limita il numero di tabelle e grafici. L'unica restrizione della licenza è il numero di domini su cui il plugin è attivato.

Cosa scegliere per il tuo progetto

wpDataTables copre l'intero spettro del lavoro con le tabelle in WordPress, dal semplice output CSV a query su database distribuiti con visualizzazione a grafico. E lo fa senza richiedere codice, cosa rara nell'ecosistema WordPress.

La meccanica è semplice: scegli una fonte, configuri il design, inserisci lo shortcode. Poi la tabella vive di vita propria: si aggiorna quando la fonte cambia, filtra al clic dell'utente, ordina per qualsiasi colonna e resta leggibile su mobile. Non una riga di HTML, nessun layout mobile separato.

Il plugin è a pagamento, ma con un test gratuito in sandbox e una versione Lite per gli scenari base. Il piano starter da $49 all'anno è paragonabile a un'ora o due di lavoro di uno sviluppatore e ti dà uno strumento per tutto l'anno.

🔗 Scarica la versione Lite da WordPress.org