SummaryTable

React Sass

Oppsummeringstabeller brukes for eksempel til å vise produkter som ligger i en handlekurv med informasjon om navn og pris.

Informasjon om produkter og pris i handlekurven
Product	Price
Uførepensjon	340,00 kr/mnd
Livsforsikring	Tatt ut av tilbudet
Innboforsikring	122,00 kr/mnd
Reiseforsikring	249,00 kr/mnd
Rabatt	- 17,50 kr/mnd
Total sum	693,50 kr/mnd
Total sum per år	8322,50 kr/mnd

<SummaryTable
    caption="Informasjon om produkter og pris i handlekurven"
    header={["Produkt", "Pris"]}
    body={
        <>
            <SummaryTableRow header={`Uførepensjon`} content="340,00 kr/mnd" />
            <SummaryTableRow
                className="summary-table-example__custom-row"
                header={`Livsforsikring`}
                content="Tatt ut av tilbudet"
            />
            <SummaryTableRow header={`Innboforsikring`} content="122,00 kr/mnd" />
            <SummaryTableRow header={`Reiseforsikring`} content="249,00 kr/mnd" />
            <SummaryTableRow className="summary-table-example__custom-row" header="Rabatt" content="- 17,50 kr/mnd" />
        </>
    }
    footer={
        <>
            <SummaryTableRow header="Total sum" content="693,50 kr/mnd" />
            <SummaryTableRow header={<span className="jkl-sr-only">Total sum per år</span>} content="8322,50 kr/år" />
        </>
    }
/>

Bruk DescriptionList om du skal vise metadata, for eksempel detaljer om et produkt, hvor oppsummering ikke er et behov.

Dersom du trenger mer fleksibilitet i presentasjonen av innholdet, bruk komponentene fra Table.

React API

Her finner du en oversikt over props på komponentene i pakken.

SummaryTable

Prop	Standardverdi	Påkrevd	Type
`className`	ingen	Ikke påkrevd	`string \| undefined`
`caption`	ingen	Ikke påkrevd	`string \| undefined`
`header`	ingen	Påkrevd	`[string, string]`
`body`	ingen	Påkrevd	`ReactNode`
`footer`	ingen	Ikke påkrevd	`ReactNode`

SummaryTableRow