Tabeller

Bruk av tabeller

Tabeller brukes når vi vil vise informasjon under 1 felles overskrift. For å være semantisk riktig må alle tabell-kolonnene ha en overskrift.

• Kolonnene skal være sorterbare
• Alle kolonner skal ha en overskrift (table header)
• Har du en stor og komplisert tabell kan fontstørrelsen reduseres
• Skal en rad ekspanderes, skal hele raden være klikkbar

Table

Vi har to varianter; en med normal fontstørrelse og en med redusert fontstørrelse. Ved særlig kompliserte tabeller / mye informasjon kan fontstørrelsen reduseres.

Innrykk: I BM vil man kunne oppleve at man trenger å markere flere ekspanderinger. Heller enn å markere dette med innrykk, definerer man dette nå ved hjelp av farge.

For å kunne definere en tabell, så trenger du to arrays - en med kolonner og en med dataen.

Slik ser det ut:

Både columns og Table har en del props tilgjengelige. Disse er nærmere dokumentert i Table.propTypes.

Et mer komplekst eksempel kan se slik ut:

Dersom tabellen har rader som kan ekspanderes kan data-arrayet også inneholder verdier som sier hvorvidt en rad skal være ekspandert som default.

Bruk av render funksjoner for columns: cellRender, columnHeaderRender, columnFooterRender.

For hele tabellen: rowRender, headerRender, footerRender.

Det er også mulig å si at en rad skal scrolles til når tabell-komponentet mountes. Dette gjøres ved å sette scrollToOnMount = true for det rad-elementet i data-arrayt som det skal scrolles til.