<lm-data-table> – Datatabell / Data table

Om komponenten

Kanonisk navn

<lm-data-table>

Synonymer

datatabell, sorterbar tabell, data table, sortable table, grid, datagrid

Kategori

innhold

ARIA-mønster

Table Pattern

Parts

ramme, tabell, tittel, hode, kropp

Native-first-vurdering

Bruker en ekte, native <table>/<thead>/<tbody>/<th>/<td>-struktur internt - ingen role="table"-erstatning. Sortering er lagt til som et tillegg til, ikke en erstatning for, den native tabellsemantikken.

Nettleserstøtte

Bruker @container (satt via container-type: inline-size på :host) til å stable rader under ca. 32ch containerbredde - støttet i alle moderne evergreen-nettlesere. Ingen !important eller nettleserspesifikke forbehold utover dette.

Design-tokens

var(--border-color, ...), var(--opacity-muted, ...), var(--font-weight-semibold, ...), var(--space-2xs, ...), var(--space-xs, ...), var(--space-small, ...)

Sist endret

20. september 2026

Brukt

1 sted

Formål

En fullt tilgjengelig, sorterbar tabell for strukturerte datasett - fra en kort liste til flere hundre rader. Tar kolonner/data som egenskaper (samme mønster som <lm-chart-bar>/<lm-chart-pie> m.fl.) og tegner selve <table>-strukturen internt, i stedet for å kreve at forbrukeren skriver markup for hver rad selv.

Egner seg for

• Lister/transaksjoner/rader der brukeren skal kunne sortere på én eller flere kolonner (beløp, dato, navn).
• Store datasett som må vises kompakt på smal skjerm - komponenten stabler radene som etikett/verdi-par under en viss containerbredde, i stedet for å tvinge frem horisontal skrolling eller kutte kolonner.

Egner seg ikke for

• Rene nøkkeltall/oppsummeringer med én verdi - bruk <lm-stat>.
• Data som primært skal vises visuelt (andeler, trender) - bruk et av data-visualisering-diagrammene; kombiner gjerne et diagram med denne tabellen når begge deler trengs (diagrammet for oversikt, tabellen for eksakte tall og sortering).
• Regnearklignende bruk der brukeren skal navigere/redigere celle for celle med piltaster - det er Grid-mønsteret, bevisst IKKE implementert her (se detaljer).

Bruk

<script type="module" src="/designsystem/komponenter/innhold/data-table/data-table.js"></script>

<lm-data-table tittel="Siste transaksjoner"></lm-data-table>

const tabell = document.querySelector("lm-data-table");
tabell.kolonner = [
    {nokkel: "dato", etikett: "Dato", sorterbar: true},
    {nokkel: "beskrivelse", etikett: "Beskrivelse"},
    {
        nokkel: "belop",
        etikett: "Beløp",
        type: "tall",
        sorterbar: true,
        format: (value) => `${value.toLocaleString("nb-NO")} kr`,
    },
];
tabell.data = [
    {dato: "2024-03-01", beskrivelse: "Dagligvarer", belop: -412},
    {dato: "2024-03-03", beskrivelse: "Lønn", belop: 32000},
];

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-data-table::part(ramme) {
    /* egne stiler for "Den ytre, horisontalt skrollbare rammen rundt tabellen." */
}

lm-data-table::part(tabell) {
    /* egne stiler for "Selve `<table>`-elementet." */
}

lm-data-table::part(tittel) {
    /* egne stiler for "`<caption>`-elementet." */
}

lm-data-table::part(hode) {
    /* egne stiler for "`<thead>`-elementet." */
}

lm-data-table::part(kropp) {
    /* egne stiler for "`<tbody>`-elementet." */
}

Tilgjengelighet

<th scope="col"> gir kolonneoverskrifter korrekt tilknytning til cellene. Sorterbare kolonner har aria-sort ("none"/"ascending"/"descending") på <th>-en og et fokuserbart <button> med synlig sorteringsikon inni - både mus, tastatur og skjermleser kan sortere og lese gjeldende sorteringsretning. Det stablede mobiloppsettet skjuler <thead> visuelt (samme .visuelt-skjult-teknikk som resten av designsystemet) og viser kolonnenavnet foran hver verdi via content: attr(data-etikett), slik at radene fortsatt gir mening uten den synlige overskriftsraden.

• <th scope="col"> knytter kolonneoverskrifter til cellene under.
• Sorterbare kolonner har aria-sort på <th> og et fokuserbart <button> med sorteringsikon.
• Det stablede mobiloppsettet skjuler <thead> visuelt og gjentar kolonnenavnet foran hver verdi via data-etikett.
• Ingen egen !important/nettleserforbehold utover standard @container-støtte.

Detaljer

• Denne tabellen følger bevisst Table (statiske celler, sorterbare kolonneoverskrifter), ikke Grid. Grid krever at hele tabellen blir ett sammensatt tastaturobjekt (roving tabindex over celler, piltast-navigasjon inn i cellene, ofte celleredigering) - en betydelig kompleksitetsøkning som kun gir verdi for regnearklignende bruk. Ingen tjeneste i dette repoet trenger celle-for-celle-navigasjon per nå; native tab-gjennom-lenker/knapper i cellene er tilstrekkelig og enklere å bruke korrekt. Hvis et fremtidig behov faktisk krever Grid, bør det løses som en egen komponent (f.eks. <lm-data-grid>) fremfor å overlaste denne.

Referanser

Se også:

• ../stat/index.html - brukes i stedet når kun ett enkelt nøkkeltall skal vises, ikke en full rad-for-rad tabell.
• ../../data-visualisering/chart-bar/index.html - gir en visuell oppsummering av de samme dataene - god følgesvenn til denne tabellen for eksakte tall.

Brukes av:

• Ingen ennå - ny komponent.

Avhengigheter: designsystem/komponenter/ikon/ikon/