Tabelle

Tabella semplice

Più largo della pagina

Tabella con azioni

Righe a strisce, illuminate sotto il puntatore

Righe che possono essere selezionate

Una casella all'inizio di ogni riga, una nell'intestazione per tutte, e le azioni sopra: pubblicano le righe selezionate al proprio indirizzo, e rimangono fuori portata mentre nulla è selezionato.

File, un totale, un'azione su ogni riga

Percorsi letti per nome, le cartelle prima di esso tagliate dal loro inizio. La barra termina su quante righe ci sono, e un'azione contrassegnata come `all` funziona anche senza nulla selezionato — prende ogni riga e guida la barra quando è quella attesa.

Filtri

Una barra di filtri in cima alla tabella, un menu discreto ciascuno, che indica cosa restringe una volta attivato. Sul server vivono nella query della pagina — ogni opzione è un link — e il controller restringe le righe a partire da essa; in vue sono un valore passato alla pagina per la sua api, o applicato dalla tabella alle righe che ha già. Ogni opzione è una casella — rotonda per una scelta singola — colorata dal suo tono quando ne ha uno, uno stato o una categoria.

Ordinamento

Un'intestazione che ordina è un link sul server e un pulsante in vue: ascendente, discendente, poi di nuovo nell'ordine dichiarato dalla pagina, che l'elenco apre e che la sua freccia mostra dall'inizio. Le date vuote vanno ultime in entrambi i modi e i nomi si confrontano nel modo in cui la lingua li ordina. Qui la tabella ordina le righe che le sono state date; un controller che pagina la sua lista legge la stessa query.

Ordinamento nel browser, da twig

`vue: true` passa le stesse colonne e righe al gemello vue: ordina e ricerca l'intero elenco nel browser, senza ricaricare la pagina. Per un elenco che la pagina mantiene intero — uno breve, o uno che nessuna api serve.

Azioni in una selezione

La stessa barra quando ci sono abbastanza azioni per affollare: una viene scelta, poi applicata.

Cellule di link e icone

Stato di caricamento

Stato vuoto

Allineamento colonne

Codici, cifre e totali

`cell: 'code'` imposta un identificatore nel carattere mono; `cell: 'number'`, o un `unit`, scrive una cifra nella locale della pagina. `negative: true` disegna una cifra sotto zero nel tono di errore, il suo segno meno lo indica anch'esso. `totals` è una riga che la pagina consegna, disegnata sotto le altre — la tabella non somma nulla, mantenendo una pagina o un elenco filtrato. Disegnata dal server, poi da vue.

Da markdown

Una tabella scritta in markdown e passata attraverso `markdown_ds`: le colonne, il loro allineamento e il markup di ogni cella vengono letti dal documento, e la tabella viene disegnata qui come qualsiasi altra. `markdown` mantiene il semplice `<table>`, per tutto ciò che non è una pagina — una mail, un feed.

Raggruppa righe

Una riga che contiene solo un gruppo non è una riga: è la linea tra due gruppi di esse, data una parola. Si estende sulla tabella e nomina ciò che segue — la stessa lettura di un separatore di menu.

Cellule di stato

Uno stato è un cerchio, mai un colore scelto da qualcuno: la cella prende un nome di tipo, o un tipo con un conteggio e un titolo, e disegna l'icona di stato che il resto del sistema disegna. Niente da stilizzare nella pagina.

Intestazione fissa

Una lunga tabella viene letta colonna per colonna tanto quanto riga per riga. Con `sticky`, l'intestazione rimane visibile mentre le righe scorrono sotto di essa; una pagina con qualcosa di suo bloccato in alto indica quanto è in basso in `--table-sticky-top`.

Una tabella in una propria zona

Una zona `zone--table` viene assegnata all'intera tabella: ciò che la guida in cima, le sue pagine in fondo, fuori da ciò che scorre, e tra di esse il fondo della tabella fino al fondo della zona, anche per tre righe. Qualsiasi tabella può andarci, scritta dal server o da un vue. Con `natural`, come quella a sinistra, la tabella mantiene la larghezza delle sue colonne, né allungata né compressa.

Tabella entità Vue

Tabella Vue con selezione

Lo stesso contratto sul client: le chiavi selezionate tornano attraverso v-model:selected, ogni azione è emessa come bulk-action, e una con un indirizzo è pubblicata come la tabella del server la pubblica. Queste non ne hanno, quindi la riga sottostante dice cosa sarebbe stato fatto. Tre righe per pagina, il totale alla fine della barra, e Archivia tutto senza nulla selezionato.

Paginazione senza un totale

Quando l'API non restituisce un totale, il paginatore torna a precedente/successivo.

Paginazione, generata dal server

`pagination(page, pages_count)` genera le pagine di un elenco come link: ciascuno mantiene il percorso e la query della pagina su cui si trova — una ricerca, un ordinamento — e cambia solo `page`, contata a partire da 1. I numeri mostrati sono quelli del pager vue: il primo, l'ultimo, quello corrente e i suoi vicini. `compact` mantiene precedenti e successivi attorno al numero di pagina; `route` e `params` navigano attraverso un altro indirizzo.

Formattatori di date Vue