Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Table

Tables are a great way to present facts and structured data.

FigmaGitHub

Examples

A simple table (to avoid screen readers double read the table header the "th" tag should have an optional role="cell" as in the example)

<Table size="md">
  <TableHeader>
    <TableRow>
      <TableColumnHeader role="cell">
        Country
      </TableColumnHeader>
      <TableColumnHeader role="cell">
       Capital
      </TableColumnHeader>
      <TableColumnHeader role="cell">
        Currency
      </TableColumnHeader>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
      Norway
      </TableCell>
      <TableCell>
      Oslo
      </TableCell>
      <TableCell>
      Norwegian krone
      </TableCell>
    </TableRow>
	<TableRow>
      <TableCell>
        Canada
      </TableCell>
      <TableCell>
        Ottawa
      </TableCell>
      <TableCell>
        Canadian Dollar
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        Japan
      </TableCell>
      <TableCell>
        Tokyo
      </TableCell>
      <TableCell>
        Yen
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Different variants

<Stack>
  <Table variant="ghost">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>
          From
        </TableColumnHeader>
        <TableColumnHeader>
          To
        </TableColumnHeader>
        <TableColumnHeader textAlign="end">
          Departure
        </TableColumnHeader>
        <TableColumnHeader textAlign="end">
          Arrival
        </TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Oslo bussterminal</TableCell>
        <TableCell>Kristiansand rutebilstasjon</TableCell>
        <TableCell textAlign="end">10:30</TableCell>
        <TableCell textAlign="end">14:48</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Oslo bussterminal</TableCell>
        <TableCell>Kristiansand rutebilstasjon</TableCell>
        <TableCell textAlign="end">10:30</TableCell>
        <TableCell textAlign="end">14:48</TableCell>
      </TableRow>
    </TableBody>
  </Table>
  
  <Table variant="core">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>From</TableColumnHeader>
        <TableColumnHeader>To</TableColumnHeader>
        <TableColumnHeader  textAlign="end">Departure</TableColumnHeader>
        <TableColumnHeader  textAlign="end">Arrival</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Oslo bussterminal</TableCell>
        <TableCell>Kristiansand rutebilstasjon</TableCell>
        <TableCell  textAlign="end">10:30</TableCell>
        <TableCell  textAlign="end">14:48</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Oslo bussterminal</TableCell>
        <TableCell>Kristiansand rutebilstasjon</TableCell>
        <TableCell  textAlign="end">10:30</TableCell>
        <TableCell  textAlign="end">14:48</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</Stack>

Different colors

<Stack>
  <Table variant="core" colorPalette="green" size="md">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>First</TableColumnHeader>
        <TableColumnHeader>Last</TableColumnHeader>
        <TableColumnHeader>Handle</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Max</TableCell>
        <TableCell>Verstappen</TableCell>
        <TableCell>@twitter</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Charles </TableCell>
        <TableCell>Leclerc</TableCell>
        <TableCell>@facebook</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Lewis</TableCell>
        <TableCell>Hamilton</TableCell>
        <TableCell>@instagram</TableCell>
      </TableRow>
    </TableBody>
  </Table>
  
  <Table variant="core" colorPalette="grey" size="md">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>First</TableColumnHeader>
        <TableColumnHeader>Last</TableColumnHeader>
        <TableColumnHeader>Handle</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Max</TableCell>
        <TableCell>Verstappen</TableCell>
        <TableCell>@twitter</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Charles </TableCell>
        <TableCell>Leclerc</TableCell>
        <TableCell>@facebook</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Lewis</TableCell>
        <TableCell>Hamilton</TableCell>
        <TableCell>@instagram</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</Stack>

Different sizes

<Stack>
  <Table size="sm">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>Country</TableColumnHeader>
        <TableColumnHeader>Capitals</TableColumnHeader>
        <TableColumnHeader>Currency</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Norway</TableCell>
        <TableCell>Oslo</TableCell>
        <TableCell>Norwegian Krone</TableCell>
      </TableRow>
    </TableBody>
  </Table>
  <Table size="md">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>Country</TableColumnHeader>
        <TableColumnHeader>Capitals</TableColumnHeader>
        <TableColumnHeader>Currency</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Norway</TableCell>
        <TableCell>Oslo</TableCell>
        <TableCell>Norwegian Krone</TableCell>
      </TableRow>
    </TableBody>
  </Table>
  <Table size="lg">
    <TableHeader>
      <TableRow>
        <TableColumnHeader>Country</TableColumnHeader>
        <TableColumnHeader>Capitals</TableColumnHeader>
        <TableColumnHeader>Currency</TableColumnHeader>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Norway</TableCell>
        <TableCell>Oslo</TableCell>
        <TableCell>Norwegian Krone</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</Stack>

Make the columns sortable by clicking on them

<Table size="md" sortable>
  <TableHeader>
    <TableRow>
      <TableColumnHeader role="cell">
        Country
      </TableColumnHeader>
      <TableColumnHeader role="cell" data-nosort>
        Exists
      </TableColumnHeader>
      <TableColumnHeader role="cell">
        Status
      </TableColumnHeader>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
      Norway
      </TableCell>
      <TableCell>
      Yes
      </TableCell>
      <TableCell data-sort="0">
        <SuccessFill24Icon/>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        Canada
      </TableCell>
      <TableCell>
        Yes
      </TableCell>
      <TableCell data-sort="2">
        <ErrorFill24Icon/>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        Japan
      </TableCell>
      <TableCell>
        Yes
      </TableCell>
      <TableCell data-sort="1">
        <WarningFill24Icon/>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Code

<Table />

import { Table } from "@vygruppen/spor-react";

The containing table element. Should consist of Thead, Tbody and Tfoot components

Props

Name
Type
Required?
Description
variant"ghost" | "core"Default "ghost"
colorPalette"grey" | "green" | "white"
size"sm" | "md" | "lg"Default "md"
childrenReact.ReactNodeAccepts Thead, Tbody and Tfoot components
sortablebooleanMakes the columns sortable. Automatically uses the text content as sort key if `children: string`, else you can directly feed the sort key using `data-sort` on TableCell. Can disable sorting for a columnHeader by using `data-nosort`.

<TableHeader />

import { TableHeader } from "@vygruppen/spor-react";

Contains the header rows of the table, including all of its column headings

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<TableBody />

import { TableBody } from "@vygruppen/spor-react";

Contains the rows of the table

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<TableFooter />

import { TableFooter } from "@vygruppen/spor-react";

Tfoot is the bottom text of a table that includes the row or rows that summarizes the other rows. <Tfoot> is used together with <Thead> and <Tbody> elements to create a table

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<TableCaption />

import { TableCaption } from "@vygruppen/spor-react";

The optional title of a table

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<TableRow />

import { TableRow } from "@vygruppen/spor-react";

A row in a table

Props

Name
Type
Required?
Description
childrenReact.ReactNodeA list of Td elements

<TableColumnHeader />

import { TableColumnHeader } from "@vygruppen/spor-react";

A column heading

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<TableCell />

import { TableCell } from "@vygruppen/spor-react";

A table cell

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe content of the cell