Table

@/components/ui/Table

Data-drevet grid for kolonner av tall som sammenlignes NEDOVER — månedsoversikt, historikk, en flerårsprognose.

Når brukes den

• Bruk for ren datavisning UTEN rad-handling — tall som sammenlignes nedover, ikke en liste av objekter man handler på.

• `radOnClick` + `interactive` når raden likevel skal være klikkbar (f.eks. åpne en detalj) — for en liste der HELE poenget er en handling per rad, bruk ListRow i stedet.

• `striped` i tabeller med mange rader, der øyet trenger hjelp til å følge en rad vannrett.

• Bruk ListRow i stedet når raden har en tilhørende handling eller identitet (klikk for detaljer, rediger, slett, godkjenn) — se regel/liste-med-handling-er-listrow.

• Sett minBredde når kolonnene ellers blir uleselig smale — da vises et «Sveip tabellen»-hint og scroll skjer inne i tabellens egen beholder, aldri på body.

Eksempler

<Table
  kolonner={[
    { key: 'mnd', label: 'Mnd', bredde: '56px' },
    { key: 'netto', label: 'Netto', align: 'hoyre' },
  ]}
  rader={rader}
  radKey={r => r.mnd}
  celle={(r, key) => key === 'mnd' ? r.mnd : formatKr(r.netto)}
/>

<Table
  striped
  interactive
  radOnClick={r => apneDetalj(r.id)}
  kolonner={[...]}
  rader={rader}
  radKey={r => r.id}
  celle={(r, key) => key === 'belop' ? (r.belop ? formatKr(r.belop) : null) : r.leverandor}
/>

Props

Regler

Beslektede komponenter