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.