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

Table

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

FigmaGitHub

Code examples

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>

Guidelines

Tables are well suited for structuring data and giving users a clear overview of related information.

Text within table cells should generally be left-aligned, while quantitatve/numeric values should be right-aligned to improve readability and comparison. The content of a table cell should generally be kept short and concise to maintain readability and ensure the table remains easy to scan.

If each row includes actions and these do not need to be visible at all times, consider placing them inside a Menu component within a table cell to save space and reduce visual clutter.

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