Components

Table

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

Examples

A simple table

<Table variant="simple">
  <Thead>
    <Tr>
      <Th>Country</Th>
      <Th>Capitals</Th>
      <Th>Currency</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Norway</Td>
      <Td>Oslo</Td>
      <Td>Norwegian Krone</Td>
    </Tr>
    <Tr>
      <Td>Canada</Td>
      <Td>Ottawa</Td>
      <Td>Canadian Dollar</Td>
    </Tr>
    <Tr>
      <Td>Japan</Td>
      <Td>Tokyo</Td>
      <Td>Yen</Td>
    </Tr>
  </Tbody>
</Table>

Different variants

<Stack>
  <Table variant="simple" colorScheme="grey">
    <Thead>
      <Tr>
        <Th>From</Th>
        <Th>To</Th>
        <Th isNumeric>Departure</Th>
        <Th isNumeric>Arrival</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>Oslo bussterminal</Td>
        <Td>Kristiansand rutebilstasjon</Td>
        <Td isNumeric>10:30</Td>
        <Td isNumeric>14:48</Td>
      </Tr>
    </Tbody>
  </Table>
  <Table variant="outline" colorScheme="grey">
    <Thead>
      <Tr>
        <Th>From</Th>
        <Th>To</Th>
        <Th isNumeric>Departure</Th>
        <Th isNumeric>Arrival</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>Oslo bussterminal</Td>
        <Td>Kristiansand rutebilstasjon</Td>
        <Td isNumeric>10:30</Td>
        <Td isNumeric>14:48</Td>
      </Tr>
    </Tbody>
  </Table>
</Stack>

Different colors

<Table variant="outline" colorScheme="green" size="md">
  <Thead>
    <Tr>
      <Th>First</Th>
      <Th>Last</Th>
      <Th>Handle</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Max</Td>
      <Td>Verstappen</Td>
      <Td>@twitter</Td>
    </Tr>
    <Tr>
      <Td>Charles </Td>
      <Td>Leclerc</Td>
      <Td>@facebook</Td>
    </Tr>
    <Tr>
      <Td>Lewis</Td>
      <Td>Hamilton</Td>
      <Td>@instagram</Td>
    </Tr>
  </Tbody>
</Table>

Different sizes

<Stack>
  <Table size="sm">
    <Thead>
      <Tr>
        <Th>Country</Th>
        <Th>Capitals</Th>
        <Th>Currency</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>Norway</Td>
        <Td>Oslo</Td>
        <Td>Norwegian Krone</Td>
      </Tr>
    </Tbody>
  </Table>
  <Table size="md">
    <Thead>
      <Tr>
        <Th>Country</Th>
        <Th>Capitals</Th>
        <Th>Currency</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>Norway</Td>
        <Td>Oslo</Td>
        <Td>Norwegian Krone</Td>
      </Tr>
    </Tbody>
  </Table>
  <Table size="lg">
    <Thead>
      <Tr>
        <Th>Country</Th>
        <Th>Capitals</Th>
        <Th>Currency</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>Norway</Td>
        <Td>Oslo</Td>
        <Td>Norwegian Krone</Td>
      </Tr>
    </Tbody>
  </Table>
</Stack>