Tabellen

Eenvoudige tabel

Breder dan de kamer

Tabel met acties

Gestreepte rijen, verlicht onder de aanwijzer

Rijen die aangevinkt kunnen worden

Een vakje aan het begin van elke rij, één in de kop voor allemaal, en de acties erboven: ze verzenden de aangevinkte rijen naar hun eigen adres, en blijven buiten bereik terwijl er niets is aangevinkt.

Bestanden, een totaal, een actie op elke rij

Paden gelezen op hun naam, de mappen ervoor worden vanaf hun start weggelaten. De balk eindigt met hoeveel rijen er zijn, en een actie gemarkeerd met `alle` werkt met niets aangevinkt — het neemt elke rij, en leidt de balk wanneer het de verwachte is.

Filters

Een balk met filters aan het hoofd van de tabel, één discreet menu per stuk, die zegt wat het beperkt zodra het dat doet. Op de server leven ze in de query van de pagina — elke optie is een link — en de controller beperkt de rijen daarvan; in vue zijn ze een waarde die aan de pagina wordt gegeven voor zijn api, of toegepast door de tabel op de rijen die het al heeft. Elke optie is een vak — rond voor een keuze uit één — gekleurd door zijn toon wanneer het er een heeft, een status of een categorie.

Sorteren

Een header die sorteert is een link op de server en een knop in vue: oplopend, aflopend, dan terug naar de volgorde die de pagina heeft verklaard, waarop de lijst opent en die zijn pijl vanaf het begin toont. Lege data komen beide keren als laatste, en namen worden vergeleken zoals de taal ze ordent. Hier sorteert de tabel de rijen die hij zelf heeft gekregen; een controller die zijn lijst paginaat leest dezelfde query in plaats daarvan.

Sorteren in de browser, vanuit twig

`vue: true` geeft dezelfde kolommen en rijen door aan de vue-tweeling: het sorteert en zoekt de hele lijst in de browser, zonder pagina-laden. Voor een lijst die de pagina geheel vasthoudt — een korte, of eentje die geen api bedient.

Acties in een select

Dezelfde balk wanneer er genoeg acties zijn om het te vullen: één wordt gekozen, en vervolgens toegepast.

Link- en pictogramcellen

Laden

Lege staat

Kolomuitlijning

Codes, cijfers en totalen

`cell: 'code'` stelt een identificatie in de mono face in; `cell: 'number'`, of een `unit`, schrijft een cijfer in de lokale instelling van de pagina. `negative: true` tekent een cijfer onder nul in de fouttoon, zijn minteken zegt het ook. `totals` is een rij die de pagina overdraagt, getekend onder de anderen — de tabel telt niets op, houdt één pagina of een gefilterde lijst. Getekend door de server, dan door vue.

Van markdown

Een tabel geschreven in markdown en door `markdown_ds` gepasseerd: de kolommen, hun uitlijning en de opmaak van elke cel worden uit het document gelezen, en de tabel wordt hier getekend zoals elke andere. `markdown` houdt de eenvoudige `<table>`, voor wat niet een pagina is — een mail, een feed.

Groep rijen

Een rij die alleen een groep bevat, is geen rij: het is de lijn tussen twee reeksen ervan, gegeven een woord. Het beslaat de tabel en benoemt wat volgt — dezelfde lezing als een menu scheidingsteken.

Statuscellen

Een status is een cirkel, nooit een kleur die iemand heeft gekozen: de cel neemt een type naam, of een type met een aantal en een titel, en tekent het statuspictogram dat de rest van het systeem tekent. Niets om te stylen in de pagina.

Plakkerige kop

Een lange tabel wordt kolom voor kolom gelezen net zoveel als rij voor rij. Met `sticky` blijft de kop in beeld terwijl de rijen eronder scrollen; een pagina met iets dat bovenaan is vastgezet, zegt hoe ver naar beneden in `--table-sticky-top`.

Een tabel in een eigen zone

Een `zone--table` zone wordt geheel aan de tabel gegeven: wat het bovenaan aandrijft, zijn pagina's aan de voet, uit wat scrollt, en ertussen de bodem van de tabel naar de onderkant van de zone, zelfs voor drie rijen. Elke tabel kan erin, geschreven door de server of door een vue. Met `natural`, zoals de linker, behoudt de tabel de breedte van zijn kolommen, noch uitgerekt noch samengedrukt.

Vue entiteit tabel

Vue tabel met selectie

Hetzelfde contract aan de client: de aangevinkte sleutels komen terug via v-model:selected, elke actie wordt uitgezonden als bulk-actie, en een met een adres wordt gepost zoals de server tabel het plaatst. Deze hebben geen, dus de lijn hieronder zegt wat gedaan zou zijn. Drie rijen per pagina, het totaal aan het einde van de balk, en Archiveer alles zonder iets aangevinkt.

Paginering zonder een totaal

Wanneer de API geen totaal retourneert, valt de pager terug op vorige/volgende.

Paginering, getekend door de server

`pagination(page, pages_count)` tekent de pagina's van een lijst als links: elke link behoudt de route en de query van de pagina waar het zich op bevindt — een zoekopdracht, een sortering — en verandert alleen `page`, geteld vanaf 1. De getoonde nummers zijn die van de vue pager: de eerste, de laatste, de huidige en zijn buren. `compact` houdt de vorige en volgende rond het paginanummer; `route` en `params` bladeren door een ander adres.

Vue datumformatters