- du skal vise strukturert, tabellarisk data organisert i rader og kolonner, satt sammen av Table og seksjonskomponentene TableHead, TableBody og eventuelt TableFooter
Handlinger en bruker kan utføre fra en tabellrad vises i kolonnen helt til høyre, og er synlige ved hover. Har raden mer enn tre alternativer, bruk en OverflowMenu som inneholder handlingene. Har menyen et "slett"-alternativ, bør det ligge nederst.
Inneholder handlingene færre enn tre alternativer, vis dem heller på linje som ikonknapper. Dette reduserer ett klikk og gjør de tilgjengelige handlingene synlige for brukeren med en gang.
Tabeller med mer enn 20 elementer bør inkludere Pagination, plassert under, eller både over og under, tabellen. Dette hjelper brukeren å analysere et stort antall elementer uten å bli overveldet av for mye informasjon samtidig.
Kontrollene som støttes er: rader per side (slik at brukeren kan tilpasse hvor mye de vil se), venstre/høyre pil (naviger til neste eller forrige side), og gå til side (hopp direkte til en ønsket side).
En sammenligningstabell egner seg godt til å visualisere og sammenligne funksjoner og egenskaper mellom produkter eller tjenester. Alle kolonner bør sorteres i enten stigende eller synkende rekkefølge fra samme side, slik at likhetene samles mot henholdsvis høyre eller venstre.
<Table>
<TableHead>
<TableRow>
<HeaderCell>Beskrivelse</HeaderCell>
<HeaderCell>Status</HeaderCell>
<HeaderCell>Publisering start og slutt</HeaderCell>
<HeaderCell>Opprettet av</HeaderCell>
</TableRow>
</TableHead>
<TableBody style={{ verticalAlign: 'top' }}>
<TableRow>
<DataCell>Kan Entur vise reklame i mobilappen?</DataCell>
<DataCell variant="success">Publisert</DataCell>
<DataCell>
01.04.2020 -<br />
01.01.2022
</DataCell>
<DataCell>Entur</DataCell>
</TableRow>
<TableRow>
<DataCell>Kan Entur sende deg tilbud og nyheter på e-post?</DataCell>
<DataCell variant="neutral">Kladd</DataCell>
<DataCell></DataCell>
<DataCell>Entur</DataCell>
</TableRow>
<TableRow>
<DataCell>
Kan Kringom sende deg e-post med <br />
kvitteringer og billetter?
</DataCell>
<DataCell variant="negative">Utløpt</DataCell>
<DataCell>02.02.2020</DataCell>
<DataCell>Kringom</DataCell>
</TableRow>
</TableBody>
</Table>
<Table fixed>
<TableHead>
<TableRow>
<HeaderCell>Valør</HeaderCell>
<HeaderCell>Reisebillett</HeaderCell>
<HeaderCell>Plass</HeaderCell>
<HeaderCell>Sovekupé</HeaderCell>
<HeaderCell>Oppgradering</HeaderCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<DataCell>Platinum</DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
</TableRow>
<TableRow>
<DataCell>Gull</DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell></DataCell>
</TableRow>
<TableRow>
<DataCell>Sølv</DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell><CheckIcon inline aria-label="inkludert" /></DataCell>
<DataCell></DataCell>
<DataCell></DataCell>
</TableRow>
</TableBody>
</Table>
() => {
const [selectedItems, setSelectedItems] = React.useState([
{ selected: false, fra: 'Majorstua', til: 'Østerås', avgang: '10.00' },
{ selected: false, fra: 'Oslo S', til: 'Røa', avgang: '11.30' },
{ selected: false, fra: 'Sofies Plass', til: 'Helsfyr', avgang: '12.11' },
]);
const isEverythingSelected = selectedItems.every(v => v.selected);
const isNothingSelected = selectedItems.every(v => !v.selected);
const isSomeSelected = !isEverythingSelected && !isNothingSelected;
const handleAllOrNothingChange = () => {
setSelectedItems(prev => prev.map(item => ({ ...item, selected: !isEverythingSelected })));
};
const handleRegularChange = fra => {
setSelectedItems(prev => prev.map(item => item.fra === fra ? { ...item, selected: !item.selected } : item));
};
return (
<Table>
<TableHead>
<TableRow>
<HeaderCell padding="checkbox" aria-label="avkrysningsbokser">
<Checkbox
name="all"
checked={isSomeSelected ? 'indeterminate' : isEverythingSelected}
onChange={handleAllOrNothingChange}
aria-label="kryss av alle"
/>
</HeaderCell>
<HeaderCell>Fra</HeaderCell>
<HeaderCell>Til</HeaderCell>
<HeaderCell>Avgang</HeaderCell>
</TableRow>
</TableHead>
<TableBody>
{selectedItems.map((item, index) => (
<TableRow key={index}>
<DataCell padding="checkbox" aria-label="avkrysningsboks">
<Checkbox name={item.fra} checked={item.selected} onChange={() => handleRegularChange(item.fra)} />
</DataCell>
<DataCell>{item.fra}</DataCell>
<DataCell>{item.til}</DataCell>
<DataCell>{item.avgang}</DataCell>
</TableRow>
))}
</TableBody>
</Table>
);
}