Developer mode
Opens components on the React tab by default.
Your bookmarks

Table

Creates a table for your tabular content.

Tables are great for presenting information with a clear, repeating structure. Our users are busy and may not want to read long sections of text. Breaking structured data into tables can help them scan it and find what they need to make informed decisions.

While tables present a clear structure, they are not good for designing layouts. Use them only when data you are presenting calls for a tabular structure, for example prices for various travel dates or multiple options for baggage.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Table head: optionally describes what each column contains; table body: wraps table rows; table rows: wrap table cells; table cells: present static information.

Guidelines       

Use semantic structure

Tables are great at presenting a clear structure that can be scanned to get just the right information. Make sure to use all of the benefits this structure offers.

This means not just taking advantage of the visual differences in rows, but making it clear what headers are connected to what data. Use `<th>` elements and `scope` to make it clear to everyone what the table means.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Table from "@kiwicom/orbit-components/lib/Table";
import TableCell from "@kiwicom/orbit-components/lib/TableCell";
import TableBody from "@kiwicom/orbit-components/lib/TableBody";
import TableHead from "@kiwicom/orbit-components/lib/TableHead";
import TableRow from "@kiwicom/orbit-components/lib/TableRow";
() => (
  <Stack>
    <Heading as="h3" type="title3">
      Passengers
    </Heading>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell as="th" scope="col">
            Name
          </TableCell>
          <TableCell as="th" scope="col">
            Age
          </TableCell>
          <TableCell as="th" scope="col">
            Email
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell as="th" scope="row">
            Nicolás Pérez
          </TableCell>
          <TableCell>34</TableCell>
          <TableCell>nic-p@example.com</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th" scope="row">
            Freja Møller
          </TableCell>
          <TableCell>39</TableCell>
          <TableCell>freja21@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Stack>
)

Keep headers short

Tables are useful for scanning for the right information. Users will get slowed down in scanning if there’s too much information at once.

Keep the data short, especially in headers. Use only one or two words when possible to communicate the essence of what the table contains.

  # Short headers

Use for data, not layout

Tables are great for presenting information with a clear, repeating structure. Breaking structured data into tables helps users scan it for what they need.

While tables have long been used for layouts on the web, it’s not what they’re best at. Use components like cards, stack, and grid to get the layout you want.

Align consistently

To quickly scan data, it helps if it is all presented in the same way. Keep your data aligned in the same way throughout the table so users don’t get confused about where the information is.

Look & feel

Hover

When you have tables with multiple columns, sometimes it can be hard to match rows to exact columns. That’s why rows in Orbit tables have a Cloud / Normal background when they are hovered over.

This darker background makes the data easier to scan to match the correct row and column.

Colors

Tables have options for both the row backgrounds (whether or not to be striped) and the text color.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Table from "@kiwicom/orbit-components/lib/Table";
import TableCell from "@kiwicom/orbit-components/lib/TableCell";
import TableBody from "@kiwicom/orbit-components/lib/TableBody";
import TableHead from "@kiwicom/orbit-components/lib/TableHead";
import TableRow from "@kiwicom/orbit-components/lib/TableRow";
import BaggageCabin from "@kiwicom/orbit-components/lib/icons/BaggageCabin";
import BaggageChecked from "@kiwicom/orbit-components/lib/icons/BaggageChecked";
() => (
  <Stack>
    <Stack>
      <Heading as="h3" type="title3">
        Striped or not
      </Heading>
      <Stack flex>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell as="th">Baggage</TableCell>
              <TableCell as="th">Availability</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>
                <BaggageCabin /> Cabin baggage
              </TableCell>
              <TableCell>Free</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <BaggageChecked /> Checked baggage
              </TableCell>
              <TableCell>Paid-for option</TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <Table striped={false}>
          <TableHead>
            <TableRow>
              <TableCell as="th">Baggage</TableCell>
              <TableCell as="th">Availability</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>
                <BaggageCabin /> Cabin baggage
              </TableCell>
              <TableCell>Free</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <BaggageChecked /> Checked baggage
              </TableCell>
              <TableCell>Paid-for option</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Stack>
      <Stack>
        <Heading as="h3" type="title3">
          Primary or secondary
        </Heading>
        <Stack flex>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell as="th">Baggage</TableCell>
                <TableCell as="th">Availability</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell>
                  <BaggageCabin /> Cabin baggage
                </TableCell>
                <TableCell>Free</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>
                  <BaggageChecked /> Checked baggage
                </TableCell>
                <TableCell>Paid-for option</TableCell>
              </TableRow>
            </TableBody>
          </Table>
          <Table type="secondary">
            <TableHead>
              <TableRow>
                <TableCell as="th">Baggage</TableCell>
                <TableCell as="th">Availability</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell>
                  <BaggageCabin /> Cabin baggage
                </TableCell>
                <TableCell>Free</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>
                  <BaggageChecked /> Checked baggage
                </TableCell>
                <TableCell>Paid-for option</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Stack>
      </Stack>
    </Stack>
  </Stack>
)

Related components

List

Tables are good at presenting complex tabular data. If you have simple groups of information, consider using a list.

Card

Tables make lots of information easier to scan. If you have fewer sections and want to emphasize each group more, consider using cards.

PricingTable

If the information you’re displaying is a comparison of features at various price points, use a pricing table.