Creare Tabelle Interattive con HTML, CSS e JavaScript: Guida Completa

Introduzione: perché puntare sulle tabelle interattive?

Le tabelle interattive sono una componente fondamentale nello sviluppo web frontend. Quando i dati diventano numerosi e complessi, fornire agli utenti la possibilità di ordinarli e filtrarli rende la consultazione più rapida ed efficiente. In questo articolo, destinato a sviluppatori frontend di livello intermedio/avanzato, analizzeremo un codice che ti aiuterà a creare tabelle interattive personalizzabili con HTML, CSS e JavaScript.

Panoramica del codice delle tabelle interattive

Per comprendere come realizzare tabelle interattive, ecco i tre pilastri principali del nostro esempio di codice:

1. HTML: struttura della tabella e intestazioni cliccabili.
2. CSS: stile responsivo, colore di sfondo, effetti al passaggio del mouse.
3. JavaScript: logica di ordinamento, gestione degli eventi e cambio dell’icona in base alla direzione (asc/desc).

Nota: Abbiamo creato un piccolo dataset di studenti, ognuno con nome, cognome, livello e età. Il codice JavaScript ordinerà questi dati ogni volta che clicchiamo su un’intestazione di colonna, rendendo le nostre tabelle realmente interattive

(Esempio di come potrebbe apparire la tabella ordinabile.)

HTML: Struttura di base per tabelle interattive

Vediamo una sezione del markup (semplificata per brevità):

<header>
  <h2>Students</h2>
  <button type="button">
    <i class="fa-solid fa-gear"></i>
    Actions
    <i class="fa-solid fa-angle-down"></i>
  </button>
</header>

<div class="card">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th onclick="sortRows('firstName', this)">
            First Name <i></i>
          </th>
          <th onclick="sortRows('lastName', this)">
            Last Name <i></i>
          </th>
          <th onclick="sortRows('level', this)">
            Level <i></i>
          </th>
          <th onclick="sortRows('age', this)">
            Age <i></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Righe generate dinamicamente via JavaScript -->
      </tbody>
    </table>
  </div>
</div>

1. <header>: Contiene il titolo e un bottone per azioni extra (se desideri aggiungere menù o funzioni aggiuntive).
2. <div class="card"> e .wrapper: Box che definisce un layout pulito, con ombreggiatura e possibilità di scroll.
3. <table>: Ha un <thead> con le colonne cliccabili e un <tbody> vuoto, che verrà popolato da JavaScript.

Suggerimento: Per una migliore accessibilità, potresti inserire <button type="button"> all’interno delle <th> invece di ricorrere all’attributo onclick. Questo rende più chiara l’interattività e migliora la compatibilità con screen reader e dispositivi touch.

CSS: Rendere le tabelle interattive più gradevoli e responsive

Ecco alcune regole principali:

body {
  background: #f4f3f6;
  color: #616678;
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.wrapper {
  overflow: auto;
  position: relative;
  z-index: 2;
}

.card {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 30px 40px rgb(97 102 120 / 12%);
  margin: -100px 30px 30px;
  padding: 10px 18px;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}

thead th {
  cursor: pointer;
  transition: 0.3s;
}

tbody tr:nth-child(odd) {
  background: rgb(97 102 120 / 4%);
}

• Layout: .card e .wrapper forniscono un aspetto moderno con ombreggiature e spaziature adeguate.
• Effetto hover: Con cursor: pointer; gli utenti capiscono subito che le intestazioni delle colonne sono cliccabili, rendendo le tabelle interattive più intuitive.
• Stile alternato delle righe: Tramite nth-child(odd) si ottiene un’ombreggiatura leggera sulle righe dispari.

Per consigli su come ottimizzare ulteriormente il CSS, dai un’occhiata al nostro articolo correlato: Best Practices CSS: Organizzare il Foglio di Stile.

JavaScript: funzione di ordinamento nelle tabelle interattive

Il fulcro della nostra tabella dinamica risiede nel seguente codice:

const rows = [
    { firstName: "Joe", lastName: "Blogs", level: "Intermediate", age: 21 },
    { firstName: "Jane", lastName: "Doe", level: "Advanced", age: 25 },
    ...
  ];

  let sortOrder = "";
  let sortField = "firstName";
  let prevField = "firstName";

  const sort = (arr, field, element) => {
    // Determina la direzione asc/desc
    sortField = field;
    sortOrder = prevField === field && sortOrder === "asc" ? "desc" : "asc";
    prevField = field;

    // Aggiorna le icone e le classi sulle intestazioni
    document.querySelectorAll("thead th").forEach((th) => {
      th.classList.remove("active");
      th.querySelector("i").className = "";
    });
    element.classList.add("active");
    element.querySelector("i").className = `fa-solid fa-arrow-${
      sortOrder === "asc" ? "up" : "down"
    }`;

    // Ordina l'array
    return arr.sort((a, b) => {
      const [valA, valB] = [a[field], b[field]];
      if (sortOrder === "asc") {
        return valA > valB ? 1 : -1;
      } else {
        return valA < valB ? 1 : -1;
      }
    });
  };

  const sortRows = (field, element) => {
    const tbody = document.querySelector("tbody");
    tbody.innerHTML = sort(rows, field, element)
      .map((row) =>
        `<tr>
          <td>${row.firstName}</td>
          <td>${row.lastName}</td>
          <td>${row.level}</td>
          <td>${row.age}</td>
        </tr>`
      )
      .join("");
  };

  // Ordinamento iniziale
  sortRows("firstName", document.querySelector("thead th:first-child"));

1. rows: Il nostro dataset di base.
2. sortOrder e sortField: Variabili globali che tengono traccia della direzione (asc/desc) e della colonna su cui stiamo ordinando.
3. sort(): La funzione principale che ordina l’array rows basandosi sul field scelto, aggiornando al contempo l’icona di ordinamento nell’intestazione.
4. sortRows(): Ricostruisce l’HTML delle righe <tr> dopo l’ordinamento.

Se desideri approcci più avanzati, puoi integrare queste tabelle interattive con React o Vue.

Miglioramenti e ottimizzazioni

• Gestione eventi: Usa addEventListener anziché onclick, per separare la logica dal markup.
• Accessibilità: Inserisci attributi aria-sort nelle intestazioni e un testo accessibile che indichi “Ordina per [campo]”.
• Performance: Se il dataset è molto grande, valuta di non rigenerare l’intero <tbody> a ogni ordine, oppure di utilizzare librerie di virtualizzazione.
• Filtri e ricerca: Aggiungere input di testo o select per filtrare la tabella in base a determinati campi.

Se stai cercando consigli su come ottimizzare JavaScript per dataset molto grandi, scopri il nostro approfondimento su Ottimizzazione JavaScript e Performance Frontend. Per ulteriori informazioni sulle tabelle HTML, consigliamo di consultare la documentazione W3C.

Conclusione: perché fanno la differenza

Le tabelle interattive permettono agli utenti di ordinare e analizzare i dati in modo istantaneo, senza dover ricaricare la pagina. L’esempio che abbiamo esaminato mostra come gestire l’ordinamento con poche righe di JavaScript, mantenendo comunque un’architettura HTML/CSS pulita e responsive.

Ricorda di personalizzare gli stili in base al tuo brand e di testare l’accessibilità su più dispositivi. L’aggiunta di filtri e altri controlli di navigazione può trasformare delle semplici tabelle in un vero e proprio strumento di analisi dati, aumentando l’engagement e semplificando la gestione di grandi quantità di informazioni.