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

Table / React

Creates a table for your tabular content.

To implement Table component into your project you’ll need to add the import:

import Table, {
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TableFooter,
} from "@kiwicom/orbit-components/lib/Table";

After adding import into your project you can use it simply like:

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Header</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Content</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Footer</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Props

Table below contains all types of the props available in the Table component.

Name Type Default Description
children React.Node The content of the Table, normally TableHead or TableHead.
compact boolean false If true, the Table will have more compact styles.
dataTest string Optional prop for testing purposes.
striped boolean true Functionality of table where every second line is grey
type enum "primary" The type of Table.

enum

type
"primary"
"secondary"

Subcomponents

There are four subcomponents which you need to use.

TableHead

import TableHead from "@kiwicom/orbit-components/lib/Table/TableHead";
Props

Table below contains all types of the props in TableHead component.

Name Type Default Description
children React.Node The content of the TableHead, normally TableRow.
dataTest string Optional prop for testing purposes.

TableBody

import TableBody from "@kiwicom/orbit-components/lib/Table/TableBody";
Props

Table below contains all types of the props in TableBody component.

Name Type Default Description
children React.Node The content of the TableBody, normally TableRow.
dataTest string Optional prop for testing purposes.

TableRow

import TableRow from "@kiwicom/orbit-components/lib/Table/TableRow";
Props

Table below contains all types of the props in TableRow component.

Name Type Default Description
children React.Node The content of the TableRow, normally TableCell.
dataTest string Optional prop for testing purposes.

TableCell

import TableCell from "@kiwicom/orbit-components/lib/Table/TableCell";
Props

Table below contains all types of the props in TableCell component.

Name Type Default Description
align enum "left" The align of text in the TableCell.
as enum "td" possibility to render TableCell in different HTML
children React.Node The content of the TableCell.
dataTest string Optional prop for testing purposes.
scope enum The scope attribute identifies whether a table header is a column header or a row header. More about a11y reasons here
verticalAlign enum The vertical align of the content in the TableCell.
whiteSpace enum The white-space setting of text in the TableCell.
enum
align whiteSpace VerticalAlign as scope
"left" "nowrap" "baseline" "th" "col"
"center" "pre" "middle" "td" "row"
"right" "pre-line" "top" "colgroup"
"bottom" "rowgroup"

TableFooter

import TableFooter from "@kiwicom/orbit-components/lib/Table/TableFooter";
Props

Table below contains all types of the props in TableFooter component.

Name Type Default Description
children React.Node The content of the TableFooter, normally TableRow.
dataTest string Optional prop for testing purposes.