/

Adattamento e Disposizione Intelligente delle Colonne

Due funzionalità responsive indipendenti, attive per impostazione predefinita, che mantengono utilizzabile una tabella larga senza alcuno scorrimento orizzontale sugli schermi più piccoli.

Panoramica

Entrambe le funzionalità sono attive per impostazione predefinita su tutto il sito (XcrudConfig::$intelligentColumnFit e XcrudConfig::$intelligentColumnArrangement, entrambe true), e possono essere sovrascritte per singola pagina:

$xcrud->intelligent_column_fit();
$xcrud->intelligent_column_arrangement();

// Oppure disattiva una delle due solo per questa pagina:
$xcrud->intelligent_column_fit(false);
MetodoTipoPredefinitoDescrizione
intelligent_column_fit($enabled = true)boolXcrudConfig::$intelligentColumnFitOverride per singola pagina del Column Fit
intelligent_column_arrangement($enabled = true)boolXcrudConfig::$intelligentColumnArrangementOverride per singola pagina del Column Arrangement

Risolvono problemi di larghezza diversi e non entrano in conflitto - vedi "Come interagiscono le due funzionalità" più sotto.

Column Fit

Column Fit misura dal vivo, nel browser, quali colonne della griglia entrano effettivamente nella larghezza attuale del contenitore e mostra solo quelle - le restanti vengono nascoste dietro un piccolo pulsante di espansione per riga, che le rivela come riga di dettaglio senza bordi in formato "etichetta: valore" solo per quella riga, al click. Viene ricalcolato automaticamente al ridimensionamento della finestra, quindi una griglia che si adatta perfettamente su un monitor largo e mostra solo 4 delle 8 colonne su un laptop ne mostrerà di più o di meno man mano che la finestra viene allargata o ristretta.

$xcrud->table('customers');
$xcrud->intelligent_column_fit();

Si tratta di una funzionalità puramente additiva e lato client - non cambia nulla per una tabella le cui colonne entrano già, o per una pagina che non la attiva mai.

Column Arrangement

Column Arrangement è pensato specificamente per i viewport stretti, larghezza da smartphone (circa ≤640px), dove una tabella non ha più alcuna lettura "in orizzontale" sensata. Invece di ridurre o nascondere le colonne, ridisegna completamente ogni riga: ogni riga della griglia diventa una propria card bordata e impilata, con una riga "Etichetta: valore" per ciascun campo. Se la riga contiene un'immagine, una foto o un campo di tipo fotocamera, quel campo viene fissato come miniatura ancorata al bordo della card invece di apparire come un'ulteriore riga etichetta:valore.

$xcrud->table('products');
$xcrud->intelligent_column_arrangement();

Come interagiscono le due funzionalità

Column Fit e Column Arrangement sono consapevoli l'una dell'altra, non in competizione: al breakpoint stretto (≤640px), Arrangement subentra automaticamente a Fit - la griglia diventa una pila di card invece di una riga di colonne misurate per adattamento. Sopra quella larghezza, Arrangement non fa nulla e Fit (se anch'esso attivo) continua a gestire l'overflow nel modo consueto. In pratica puoi lasciarle entrambe attive ovunque e ciascuna interverrà esattamente dove è la soluzione più adatta.