HomeCasa Specifica di design di una tabella dati per un pannello di gestione
Definisci una tabella dati completa: ordine e formato delle colonne, ordinamento, filtri, paginazione o scroll virtuale, azioni massive, densità, stati, mobile e accessibilità. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 6 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.
Intermedio · Testo · In attesa di revisione editoriale
Prompt
Agisci come product designer specializzato in applicazioni B2B ricche di dati.
Contesto:
- Prodotto: {{prodotto}}
- Entità mostrata nella tabella: {{entita}}
- Colonne disponibili: {{colonne}}
- Attività principali dell'utente con questa tabella: {{attivita}}
- Volume abituale di righe: {{volume}}
- Piattaforma: {{piattaforma}}
Consegne:
1. Priorità e ordine delle colonne in base alle attività, con allineamento (numeri a destra, testo a sinistra), formato di date, importi e stati e regole di troncamento con tooltip.
2. Intestazione: ordinamento (predefinito e su più colonne se utile), intestazione e prima colonna fisse, ridimensionamento e scelta delle colonne visibili.
3. Ricerca e filtri: filtri rapidi, filtri avanzati, chip dei filtri attivi, «cancella tutto» e viste salvate.
4. Paginazione, scroll infinito o virtualizzazione: raccomandazione motivata per il volume indicato.
5. Selezione e azioni: azioni per riga, azioni massive, selezione di tutte le righe rispetto a tutte quelle della pagina e conferma delle azioni distruttive.
6. Densità (comoda, compatta), altezza delle righe e spaziatura.
7. Stati: caricamento con skeleton, vuoto, nessun risultato, errore e dati parziali.
8. Comportamento responsive o alternativa su schermi piccoli.
9. Accessibilità: tabella semantica, aria-sort, navigazione da tastiera, focus visibile e annuncio degli aggiornamenti.
10. Tabella riassuntiva di componenti e token necessari al design system.
Vincoli:
- Non inventare colonne o dati di esempio non presenti nel contesto; usa [DA COMPLETARE].
- Motiva ogni decisione con l'attività dell'utente che supporta.
- Se mancano informazioni chiave (ad esempio quali azioni si possono fare su una riga), chiedimele prima.
Formato: specifica con titoli numerati, tabelle e un wireframe testuale della tabella nello stato predefinito.Come usarlo
- Elenca le colonne reali e cosa fanno gli utenti con la tabella. 2. Verifica la raccomandazione sulla paginazione con il team tecnico. 3. Usa la tabella finale dei componenti per creare o aggiornare il componente nel design system.
Esempio d'uso
Entità: ordini · Colonne: numero, cliente, data, importo, stato, corriere · Attività: trovare anomalie ed esportare · Volume: 100-10.000 righe.
Esempio di risultato
1. Priorità delle colonne
| Ordine | Colonna | Allineamento | Formato | Attività supportata |
|---|---|---|---|---|
| 1 | N. ordine | Sinistra, fissa | Monospaziato, link | Trovare un ordine preciso |
| 2 | Stato | Sinistra | Badge con icona + testo | Individuare i problemi |
| 3 | Cliente | Sinistra | Troncato con tooltip | Riconoscere l'ordine |
| 4 | Data | Destra | 12/03/2025 · 14:05 | Ordinare per anzianità |
| 5 | Importo | Destra | 1.234,50 € | Controllare gli ordini grandi |
| 6 | Corriere | Sinistra | Testo | Raggruppare i problemi |
| 7 | Paese | Sinistra | Nome breve | Filtrare le spedizioni |
4. Paginazione
Fino a 10.000 righe ed export CSV: consiglio la paginazione a 50 righe con scelta della dimensione; si ritrova la posizione tornando da un ordine e la selezione in blocco resta chiara.
5. Selezione
Selezionando tutto: «50 ordini di questa pagina selezionati · Seleziona tutti i 2.340 che corrispondono al filtro». Le azioni distruttive chiedono conferma con il numero esatto.
Wireframe (stato predefinito)
[Cerca ordine…] [Stato ▾] [Corriere ▾] [Paese ▾] [Viste ▾] [Esporta CSV]
Filtri: (Con problema ×) (Ultimi 7 giorni ×) Cancella tutto
☐ | N. ▲ | Stato | Cliente | Data | Importo | Corriere | Paese
☐ | [DA COMPLETARE] | ⚠ Problema | [DA COMPLETARE] | [DA COMPLETARE] | [DA COMPLETARE] | … | ……
Dati chiave
- Categoria
- Design UI/UX · Dashboard
- Tipo di output
- Testo
- Livello
- Intermedio
- Pensato per
- ChatGPT, Claude, Gemini e Microsoft Copilot
- Verificato in
- In attesa di verifica editoriale
- Variabili
- Prodotto, Entità, Colonne disponibili, Attività principali, Volume di righe e Piattaforma
- Lingua
- Italiano
- Prezzo
- Gratuito, senza registrazione
- Aggiornato
- 07/11/2026
Domande frequenti
Paginazione o scroll infinito per una tabella dati?
Per le tabelle di lavoro funzionano meglio di solito paginazione o virtualizzazione, perché l’utente deve tornare a una riga precisa e vedere i totali. Il prompt raccomanda un’opzione in base a volume e attività.
Come si adatta una tabella complessa al mobile?
In genere si mantengono 2-3 colonne chiave e il resto va in una riga espandibile o in una vista a card. La specifica propone l’alternativa più adatta.
A cosa serve questo prompt?
Definisci una tabella dati completa: ordine e formato delle colonne, ordinamento, filtri, paginazione o scroll virtuale, azioni massive, densità, stati, mobile e accessibilità.
Con quali strumenti di IA funziona?
È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.
Come personalizzo il prompt?
Clicca su «Personalizza» e compila le variabili (Prodotto, Entità, Colonne disponibili, Attività principali, Volume di righe e Piattaforma). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.
Serve esperienza per usarlo?
È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.
Questo prompt è gratuito?
Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.
Posso fidarmi dell'output dell'IA?
Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.