@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
148 lines (109 loc) • 6.85 kB
Markdown
# Table
To implement Table component into your project you'll need to add the import:
```jsx
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:
```jsx
<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`](#tablehead) or [`TableHead`](#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`](#enum) | `"primary"` | The type of Table. |
### enum
| type |
| :------------ |
| `"primary"` |
| `"secondary"` |
## Subcomponents
There are four subcomponents which you need to use.
### TableHead
```jsx
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`](#tablerow). |
| dataTest | `string` | | Optional prop for testing purposes. |
### TableBody
```jsx
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`](#tablerow). |
| dataTest | `string` | | Optional prop for testing purposes. |
### TableRow
```jsx
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`](#tablecell). |
| dataTest | `string` | | Optional prop for testing purposes. |
### TableCell
```jsx
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`](#enum) | `"left"` | The align of text in the TableCell. |
| as | [`enum`](#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`](#enum) | | The scope attribute identifies whether a table header is a column header or a row header. More about a11y reasons [here](https://webaim.org/techniques/tables/data) |
| verticalAlign | [`enum`](#enum) | | The vertical align of the content in the TableCell. |
| whiteSpace | [`enum`](#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
```jsx
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`](#tablerow). |
| dataTest | `string` | | Optional prop for testing purposes. |