Designsystemoversikt

SummaryTable

SummaryTable samler korte etikett-verdi-rader i en kompakt oppsummering som fortsatt beholder tabellsemantikken.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

SummaryTable er nyttig når du vil vise et lite sammendrag av felter og verdier uten å bygge en full datatabell.

Komponenten består av selve tabellen og `SummaryTableRow`, og bruker en skjult header for å beholde semantikken selv om presentasjonen er veldig kompakt.

Playgrounden under viser den dokumenterte kontrakten for caption og footer, siden disse valgene ofte avgjør om oppsummeringen blir forståelig og robust.

Eksempel

Props

    • caption=true · footer=true

    Oppsummering av Jøkul-dokumentasjonen
    FeltVerdi
    Dokumenterte komponenter14
    Dokumenterte ikoner30
    Mangler lokale docs4
    Total18 komponenter

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/summary-table/summary-table.min.css";
import { SummaryTable, SummaryTableRow } from "@fremtind/jokul/summary-table";

export function Example() {
    return (
        <SummaryTable
            header={["Felt", "Verdi"]}
            caption="Oppsummering av Jøkul-dokumentasjonen"
            footer={<SummaryTableRow header="Total" content="18 komponenter" />}
            body={
                <>
                    <SummaryTableRow header="Dokumenterte komponenter" content="14" />
                    <SummaryTableRow header="Dokumenterte ikoner" content="30" />
                    <SummaryTableRow header="Mangler lokale docs" content="4" />
                </>
            }
        />
    );
}

    Props

    Disse prop-tabellene gjelder rotelementet SummaryTable.

    Jøkul-props

    Komponentens egne oppsummeringsvalg for caption og footer.

    Prop Type Standard Beskrivelse
    caption string ingen Skjult caption som navngir oppsummeringen for hjelpemidler.
    footer ReactNode ingen Valgfri footer med totaler eller annen oppsummerende rad nederst.

    React-props

    Props på `SummaryTable` som bygger opp oppsummeringens struktur og semantiske navn.

    Prop Type Standard Beskrivelse
    body ReactNode påkrevd Rendrer kroppsradene, vanligvis satt sammen av flere `SummaryTableRow`-elementer.
    className string ingen Ekstra klasse på tabellen når den må kobles til lokal layout eller sporing.
    header [string, string] påkrevd To kolonneetiketter som brukes i den skjulte headeren for tabellsemantikken.

    Delkomponenter

    SummaryTableRow

    API: SummaryTableRow · Selektor: tr

    Enkel radkomponent som binder sammen etikett og verdi i oppsummeringen.

    React-props

    Props på `SummaryTableRow` for etikett, verdi og eventuell lokal styling.

    Prop Type Standard Beskrivelse
    className string ingen Ekstra klasse på raden når oppsummeringen trenger en lokal variant eller markering.
    content string | ReactNode påkrevd Verdien eller innholdet i høyre kolonne på raden.
    header string | ReactNode påkrevd Radetiketten som beskriver hva verdien på raden gjelder.

    Når du skal bruke SummaryTable

    Bruk SummaryTable når du trenger en lett oppsummering av noen få rader med etikett og verdi, for eksempel i kvitteringer, sammendrag og gjennomganger før innsending.

    Hvis brukeren må sortere, sammenligne flere kolonner eller skanne mange rader, bør du heller bruke vanlig tabell eller beskrivelsesliste.

    Tilgjengelighet

    Selv kompakte oppsummeringer bør bruke ekte tabellmarkup når etikett og verdi faktisk opptrer som radstruktur med to kolonner.

    Caption og skjult header gjør at hjelpemidler får en tydelig forståelse av hva oppsummeringen gjelder og hvordan kolonnene henger sammen.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    6
    Playground-kontroller
    2
    Delkomponenter
    1
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/summary-table/summary-table.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • SummaryTable · SummaryTableProps · @fremtind/jokul/summary-table · 5 props
    • SummaryTableRow · SummaryTableRowProps · @fremtind/jokul/summary-table · 3 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: SummaryTable har ingen egen tastaturlogikk utover vanlig navigasjon til eventuelle lenker eller kontroller som legges inni radinnholdet.

    Semantikk som kreves

    • Bruk SummaryTable når du trenger en kompakt oppsummering med tydelige radetiketter og verdier, spesielt i kvitteringer eller sammendrag.
    • Caption og skjult header gir tabellen et tydelig navn og korrekt kolonnesemantikk selv om presentasjonen er kompakt.
    • Hold radetikettene korte og konsistente så oppsummeringen blir lett å skanne.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at SummaryTable fortsatt er rett valg og ikke burde være en vanlig tabell hvis brukeren trenger å sammenligne flere like datasett.
    • Bekreft at footer bare brukes for faktisk oppsummerende informasjon og ikke som et ekstra vanlig radområde.

    Ytelse

    • SummaryTable rendres som vanlig tabellmarkup uten klientruntime.
    • Komponenten er lett, men lange verdier kan bryte rytmen hvis du prøver å presse for mye fri tekst inn i høyre kolonne.

    Relatert