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>

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