Avanserte tabeller bruker du når en enkel tabell ikke er nok. De hjelper deg å finne informasjon raskt, sammenligne data og arbeide med informasjon – forutsatt at tabellen er bygget rundt brukerens oppgave.
Avanserte tabeller i Punkt
Når bør du bruke avanserte tabeller?
En avansert tabell inneholder mer enn rader og kolonner. Den gir brukeren støtte til å utforske data gjennom funksjoner som sortering, filtrering, søk og ekspanderende detaljer.
Bruk avanserte tabeller når brukeren trenger å:
- finne spesifikke oppføringer i store datasett
- sammenligne verdier på tvers av rader og kolonner
- analysere og jobbe videre med data
- utføre handlinger på flere elementer samtidig
Tabeller fungerer best når data er tett og strukturert, og når brukeren aktivt skal jobbe med innholdet – ikke bare lese det.
Når bør du ikke bruke tabell?
Hvis brukeren bare skal lese noen få verdier, er ofte en enklere presentasjon bedre.
Velg heller andre komponenter når:
- datasettet er lite → bruk liste eller cards
- målet er å vise trender → bruk diagrammer
- innholdet er visuelt → bruk cards
Tabellen i Punkt er et visuelt skall
Tabellen i Punkt håndterer det visuelle uttrykket, tilgjengeligheten og interaksjonene brukeren forventer, men for mer avanserte funksjoner trenger du et tabellbibliotek som håndterer logikken.
Vi anbefaler TanStack Table, som er et headless bibliotek. Det vil si at det ikke har eget utseende, men gir deg fleksible verktøy for sortering, filtrering, paginering, kolonnegruppering, virtuelle lister og mer.
Du får da en kombinasjon som fungerer slik:
- Punkt: visuelt uttrykk og universell utforming
- TanStack Table eller tilsvarende: logikk, datastruktur og avanserte funksjoner
Start med brukerens oppgave
Design tabellen ut fra hva brukeren faktisk skal gjøre og ikke ut fra datasettet.
NÃ¥r du speiler databasen direkte, ender du ofte med:
- for mange kolonner
- informasjon ingen bruker
- en tabell som er tung å forstå
Spør deg selv:
- Hvilke oppgaver skal brukeren utføre i tabellen?
- Hvilken informasjon trenger hen for å ta en beslutning?
- Hva kan skjules bak interaksjon, som detaljpanel eller egen side?
Unngå å vise «alt for alle». Det skaper støy og gjør tabellen vanskeligere å bruke.
Start alltid med oppgavene – ikke funksjonene.
| Oppgave | Løsning i tabell |
|---|---|
| Finne informasjon | Søk og filtrering |
| Sammenligne verdier | Sortering og tydelig justering |
| Inspisere detaljer | Utvidbare rader eller detaljvisning |
| Utføre handlinger | Radhandlinger og massehandlinger |
Gjør det lett å utforske data
Avanserte tabeller skal støtte utforsking. Funksjonene må være:
- konsekvente
- plassert der brukeren forventer dem
- enkle å forstå uten forklaring
Vanlige funksjoner er:
- sortering
- filtrering
- søk
- paginering
Ikke legg til funksjonalitet bare fordi det er mulig. Hver funksjon bør støtte en konkret oppgave.
Prioriter og skap tydelig visuelt hierarki
Brukeren leser tabeller horisontalt, men skanner dem vertikalt. Når tabellen blir stor, er hierarkiet avgjørende.
Anbefalt praksis:
- Fremhev kolonner som er viktigst for oppgaven
- Bruk moderat linjehøyde og subtil kontrast mellom rader
- Sørg for nok luft til å skille rader fra hverandre
- Bruk sticky header, og eventuelt sticky første kolonne, når tabellen er bred
Et tydelig hierarki gjør tabellen lettere å forstå, også for brukere med hjelpemidler.
Anbefalte mønstre
Her er mønstrene vi anbefaler, basert på erfaringer fra flere kommunale tjenester, andre designsystemer og universell utforming.
Tom liste (empty state)
Hvis tabellen ikke har rader, må du si tydelig ifra om det.
Vis:
- at listen er tom
- hvorfor den er tom, hvis mulig
- hva brukeren kan gjøre videre (Call to Action)
Legg til en tydelig handling hvis brukeren forventes å opprette eller legge til innhold.
Klikkbare rader
Når hele raden leder til mer informasjon, kan du gjøre raden klikkbar.
Anbefalinger:
- Bruk chevron-ikon til høyre som indikator
- Unngå andre klikkbare elementer i raden hvis hele raden er klikkbar
Rader med handlinger
Plasser handlinger til høyre i tabellen, i en egen kolonne.
Bruk:
- kjente ikoner
- korte og tydelige etiketter
Unngå å blande handlinger med primærinformasjon. Hvis det er mange handlinger, vurder å legge sekundærhandlinger i en kontekstmeny for å holde tabellen ryddig.
Kontekstmeny
En kontekstmeny per rad kan være nyttig når det er mange handlinger. Kontekstmenyen finnes ikke som egen komponent i Punkt i dag.
Sørg for at:
- menyen er lett å finne
- handlingene er tydelige og forventede
Ekspanderende rader for detaljer
Ekspanderende rader er nyttige når du vil vise sekundærinformasjon uten å forlate tabellen.
Anbefalinger:
- Bruk chevron til venstre for å støtte tilgjengelighet
- Vis metadata, historikk eller sekundære handlinger i panelet som åpner seg
- Test innholdet og flyten med brukere
Unngå at ekspansjon, seleksjon og radklikk konkurrerer med hverandre.
Sortering
Aktiver sortering bare der det gir verdi. Sortering skal hjelpe brukeren, ikke distrahere.
Skal:
- Brukes kun på relevante kolonner (f.eks. dato, tall, sentrale felt)
- Vise tydelig retning (stigende/synkende)
- Vise hvilken sortering som er aktiv.
Skal ikke:
- Aktiveres på alle kolonner uten vurdering
- Være skjult eller tvetydig
Batch-håndtering eller flervalg
Bruk flervalg kun når brukeren faktisk gjør endringer på mange rader samtidig. Hvis flervalg sjelden brukes, skaper det mer kompleksitet enn verdi.
Filtrering og søk
Plasser filtre enten i en horisontal linje over tabellen, eller i en kolonne til venstre. I komplekse tabeller med mange filtre vil det være naturlig å kombinere flere plasseringer. Paginering plasseres under tabellen.
Hvis du har mange filtre:
- grupper dem
- test med brukere
Husk alltid en tydelig tom‑tilstand når filtrering eller søk ikke gir treff.
Oppsummering
En god avansert tabell i Punkt:
- tar utgangspunkt i brukerens oppgaver
- gir nødvendig funksjonalitet – ikke mer enn nødvendig
- er lett å lese og navigere
- er tilgjengelig og robust
- skalerer til store datasett
Brukertest tidlig, test ofte, og juster:
- hvilke kolonner du viser
- hvilke funksjoner som er tilgjengelige
- hvordan informasjon prioriteres
Når tabellen støtter brukerens oppgave, blir den et effektivt verktøy, ikke bare et sted å legge data.
Les mer
- Data Tables: Four Major User Tasks(Nielsen Norman Group)
- Best Practices for Usable and Efficient Data table in Applications (UX Planet)
- Data Table Design UX Patterns (Pencil & Paper)
- Designing big data tables: Insights from a UX/UI perspective (Nika Romanenko)