Una tabella dinamica in HTML, JavaScript e CSS - codice, esempi e spiegazione

Funzionalità come il fetch dinamico dei dati, il sorting e la paginazione permettono di interagire con una tabella in maniera più veloce ed efficente. Per lo sviluppoSpesso ci si affida a soluzioni di terze parti, ma in questa guida vorrei farvi provare a sviluppare una tabella dinamica partendo da zero e utilizzando solo le versioni vanilla di HTML, JavaScript e CSS. Spero di esservi utile!

Introduzione

La nostra tabella dinamica si svilupperà in maniera progressiva partendo da una semplice soluzione statica con i dati tabellari scritti a mano dallo sviluppatore, seguirà con una tabella popolata dinamicamente tramite dati ottenuti da una fonte remota (JSON tramite chiamata HTTP), ed infine si aggiungeranno funzionalità più avanzate come la paginazione, il sorting e il filtering.

Le varie sezioni saranno elaborate in momenti differenti e potrebbero non essere tutte disponibili: incoraggiate il mio lavoro condividendo questa pagina o mettendo un like (vedi sezione in fondo alla pagina)!

Una semplice tabella statica HTML

Per iniziare e per ripassare un poco l'argomento, sviluppiamo una semplice tabella HTML utilizzando i tag previsti nelle specifiche HTML5.

Qui di seguito scrivo il codice che definisce una tabella per un insieme di ipotetici utenti e un CSS per dare una minimo di stile al risultato ottenuto.

<table>

  <caption>Tabella utenti</caption>

  <thead>

    <tr>

      <th>Name</th>

      <th>Username</th>

      <th>Email</th>

      <th>Phone</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Leanne Graham</td>

      <td>Bret</td>

      <td>Sincere@april.biz</td>

      <td>1-770-736-8031 x56442</td>

    </tr>

    <tr>

      <td>Ervin Howell</td>

      <td>Antonette</td>

      <td>Shanna@melissa.tv</td>

      <td>010-692-6593 x09125</td>

    </tr>

    <tr>

      <td>Clementine Bauch</td>

      <td>Samantha</td>

      <td>Nathan@yesenia.net</td>

      <td>1-463-123-4447</td>

    </tr>

  </tbody>

<table>

table {

  width: 75%;

  margin: 2rem auto;

  color: #000;

  background-color: #FFF;

  border-collapse: collapse;

}

caption {

  margin: .5rem 0;

  font-weight: bold;

}

th {

  font-weight: bold;

}

/* Effetto hover sulle righe della tabella */ 

tbody tr:hover {

  color: #FFF;

  background-color: #000;

}

th, td {

  text-align: left;

  padding: .3rem .2rem;

  border-bottom: 1px solid #999;

}

Il risultato dei due codici precedenti è esattamente quello che potete vedere qui di seguito.

Riepilogo

Abbiamo ricreato una semplice e funzionale tabella che mostra i dati di tre ipotetici utenti; una ottima soluzione in caso di tabelle molto brevi e dati statici, ma cosa succederebbe se i dati fossero nell'ordine delle decine o centinaia? E cosa succederebbe se questi dati fossero serviti tramite JSON da servizi esterni? In questi casi è necessario sviluppare una soluzione dinamica che si occupi di eseguire il fetch (reperimento) dei dati ed il conseguente popolamento dinamico della tabella.
Lo vediamo nel prossimo capitolo.

Popolare una tabella HTML con dati ottenuti da sorgenti remote

L'obiettivo è quello di popolare la tabella in maniera dinamica attraverso dati provenienti da una sorgente remota, per fare questo sarà necessario aggiungere un file JavaScript in cui gestiremo la chiamata remota e creazione delle righe della tabella. La sorgente esterna sarà fornita dalla url: https://jsonplaceholder.typicode.com/users, un servizio a scopo didattico che fornisce una lista di utenti in formato JSON.

La situazione iniziale prevede un file HTML simile al precedente, ma in questo caso non ci sarà alcun contenuto all'interno del tag <tbody>: questo sarà aggiunto dinamicamente. Ecco il contenuto.

 <table>

  <caption>Tabella utenti</caption>

  <thead>

    <tr>

      <th>Name</th>

      <th>Username</th>

      <th>Email</th>

      <th>Phone</th>

    </tr>

  </thead>

  <tbody>

  </tbody>

 <table>

All'interno di un file javascript ci occuperemo di definire una funzione loadRemoteData() che si occupa di caricare i dati utenti dalla sorgente remota, e una funzione populateTable che si occuperà di popolare le righe della tabella con i dati appena ottenuti. Eccone il contenuto.

  // Ottengo i riferimenti alla tabella <table> e al suo <tbody>

  const $table = document.querySelector('table')

  const $tbody = $table.getElementsByTagName('tbody')[0]

  const loadRemoteData = async () => {

    $table.classList.add('loading')

    // Eseguo il fetch dei dati remoti

    await fetch('https://jsonplaceholder.typicode.com/users')

      .then(response => {

        // Se non ho una risposta valida dal servizio remoto...

        if (!response.ok) throw (Error(`Status: ${response.status}. ${response.statusText}`))

        // ... altrimenti dati ottenuti vengono tradotti in formato JSON

        return response.json()

      })

      .then((json) => {

        // Utilizzo i dati ottenuti per popolare la tabella

        populateTable(json)

      })

      .catch((error) => {

        $table.classList.add('error')

        console.error(error)

      })

      .finally(() => {

        $table.classList.remove('loading')

      })

  }

  const populateTable = (rows) => {

    $tbody.innerText = ''

    for (const row of rows) {

      // Per ogni utente, definisco una nuova riga della tabella

      const $tr = document.createElement('tr')

      $tr.innerHTML = `

        <td>${row.name}</td>

        <td>${row.username}</td>

        <td>${row.email}</td>

        <td>${row.phone}</td>

      `

      $tbody.appendChild($tr)

    }

 }

  // Chiamo la funzione principale

 loadRemoteData()

La tabella dinamica

Qui di seguito il risultato (reale e "in diretta") del codice HTML, CSS e JS descritto. Avrete notato che nel codice precedente ci sono alcune istruzioni per l'inserimento e la rimozione di classi come loading ed error, sono classi ausiliarie che definiscono la status attuale della tabella e permettono di definire uno style per ciascuno dei tre possibili stati: loading - in caricamento; error - errore; -empty- default. Lascio all'utente la definizione di tali stili.

Aggiungere la paginazione

Sezione non ancora disponibile

Aggiungere un ordinamento per colonne (funzionalità di sorting)

Sezione non ancora disponibile

Aggiungere un filtro (funzionalità di filtering)

Sezione non ancora disponibile

Conclusioni

Sezione non ancora disponibile