Table

Creates a table for your tabular content.

Table

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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the Table, normally TableHead or TableHead.
compactbooleanfalseIf true, the Table will have more compact styles.
dataTeststringOptional prop for testing purposes.
stripedbooleantrueFunctionality of table where every second line is grey
typeenum"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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the TableHead, normally TableRow.
dataTeststringOptional 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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the TableBody, normally TableRow.
dataTeststringOptional 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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the TableRow, normally TableCell.
dataTeststringOptional 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.

NameTypeDefaultDescription
alignenum"left"The align of text in the TableCell.
asenum"td"possibility to render TableCell in different HTML
childrenReact.NodeThe content of the TableCell.
dataTeststringOptional prop for testing purposes.
scopeenumThe scope attribute identifies whether a table header is a column header or a row header. More about a11y reasons here
verticalAlignenumThe vertical align of the content in the TableCell.
whiteSpaceenumThe white-space setting of text in the TableCell.

enum

alignwhiteSpaceVerticalAlignasscope
"left""nowrap""baseline""th""col"
"center""pre""middle""td""row"
"right""pre-line""top""colgroup"
"normal""bottom""rowgroup"

TableFooter

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

Props

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

NameTypeDefaultDescription
childrenReact.NodeThe content of the TableFooter, normally TableRow.
dataTeststringOptional prop for testing purposes.