Table

Table

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

Props

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.
idstringSet id for Table
stripedbooleantrueFunctionality of table where every second line is grey
typeenum"primary"The type of Table.

enum

type
"primary"
"secondary"

Subcomponents

TableHead

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

Props

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

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

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

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

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