Skip to content
Vy logo
  • 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
childrenReact.ReactNodeAccepts Thead, Tbody and Tfoot components
colorPalette"grey" | "green" | "white"
size"sm" | "md" | "lg"Default "md"
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`.
variant"ghost" | "core"Default "ghost"

<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
data-sortstringIf the Table is sortable use this prop to manually overwrite the sort-key that is used to sort the column. Sort-key is automatically set to be the child of the Cell, but if the child for example is an icon, you can override the sort-key to be something else.