Table
Vi bruker tabeller for å vise data på en ordnet måte som gjør sammenlikning enkelt.
Tabellkomponenter
Datatabeller
De enkleste tabellene består av et sett med navngitte kolonner, og en eller flere rader med data som tilhører de angitte kolonnene. Radene er uten interaksjon, og alle cellene er venstrejusterte. Den kan ikke brukes med tallverdier eller valuta.
Rader med handling
Knapper skal komme til slutt i raden og høyrejusteres. Tekstinnholdet i rader med handling bør sentreres vertikalt slik at det kommer på linje med knappene, med mindre det er mye innhold som bryter over flere linjer. I listevisning skal knappene venstrejusteres og vises under en egen overskrift.
Klikkbare rader
Hele raden kan gjøres klikkbar om du ønsker, men foretrekk å ha en rad med handling i egen kolonne da det er mer tilgjengelig visuelt og for skjermlesere.
Ekspanderende tabeller
Hele raden blir automatisk klikkbar, samtidig som man skal sette inn en celle for å vise hvorvidt raden er åpen eller ikke og tilføre informasjon for hjelpemidler. Hvis man vil ha en egen klikk-handling på raden og bruker propen clickable, er det kun knappen som vil kontrollere hvorvidt raden er åpen eller ikke.
Sticky tabell heading
Tabellens header blir festet til toppen av skjermen og flyter over tabellinnholdet om man scroller lenger ned i tabellen enn skjermens høyde. For å sette en egen bakgrunnsfarge kan man overstyre CSS-variabelen --jkl-table-head-sticky-color.
Paginering
Sortering
Responsivitet
Mobilvisning av tabeller kan være vanskelig å løse siden det ikke finnes ett felles design som fungerer i alle sammenhenger. Noen ganger er det en forutsetning å kunne sammenligne flere kolonner vertikalt for å forstå innholdet, selv på mobil. Andre ganger lar innholdet seg stable på små skjermer uten at det går for mye ut over lesbarheten. Eller kanskje innholdet lar seg representere bedre på en helt annen måte på mobil, for eksempel med en graf.
Det sagt ser vi som oftest én av to varianter av tabeller på mobil:
- En tabell som scroller horisontalt
- En tabell som gjøres om til en listevisning
Under ser du et eksempel på horisontal scroll. Legg merke til at scrollbaren legger seg ved tabellen (gjør vinduet ditt mindre om det ikke scrolles). Det er viktig at tabeller som dette ikke gjør så hele siden scroller horisontalt.
Og her ser du et eksempel på en tabell som gjøres om til en listevisning.