---
name: Table
menu: Components
route: /components/table
---

import { Playground, PropsTable } from 'docz'
import { Table } from '@personio/ui-components'
import times from 'lodash/times'
import './table.scss'

# Table
Use Personio's custom table styles for showing data in a tabular way, with a lot of custom options, such as fixed header and columns.

This component mimics the DOM API, so you have a collection of tags: `<Table />`, `<TableHead />`, `<TableBody />`, `<TableRow />` and `<TableCell />` (is equivalent for both header and body):

```javascript
import { Table, TableHead, TableRow, TableCell } from '@personio/ui-components'

export default () => (
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Example</TableCell>
      </TableRow>
    </TableHead>
  </Table>
)
```

## Note
You can import all those Table components, or you can just import `<Table />`; component and use the syntax `<Table.Head />`, `<Table.Body />`, `<Table.Row />`, `<Table.Cell />`:

```javascript
import { Table } from '@personio/ui-components';

export default () => (
  <Table>
    <Table.Head>
      <Table.Row>
        <Table.Cell>Example</Table.Cell>
      </Table.Row>
    </Table.Head>
  </Table>
)
```

<PropsTable of={Table} />

## Examples
Bellow is the simple way to use Personio's Table

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell colSpan={3}>
            Personal data
          </Table.Cell>
        </Table.Row>
        <Table.Row theme="default">
          <Table.Cell width="50px"></Table.Cell>
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell width="50px">
            <Table.Badge theme="success">
              New
            </Table.Badge>
          </Table.Cell>
          <Table.Cell bold>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell bold theme="warning">DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell width="50px"></Table.Cell>
          <Table.Cell bold>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell bold theme="warning">NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell width="50px"></Table.Cell>
          <Table.Cell bold>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell bold theme="warning">(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## Sizes
Bellow is the simple way to use Personio's Table

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell colSpan={3}>
            Personal data
          </Table.Cell>
        </Table.Row>
        <Table.Row size="small" theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
        <Table.Row size="medium" theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
        <Table.Row size="large" theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row size="large">
          <Table.Cell bold>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell bold theme="warning">DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
        <Table.Row size="medium">
          <Table.Cell bold>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell bold theme="warning">NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row size="small">
          <Table.Cell bold>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell bold theme="warning">(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## With disabled row / cell

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell colSpan={3}>
            Personal data
          </Table.Cell>
        </Table.Row>
        <Table.Row theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row >
          <Table.Cell>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell>DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## With themed row

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell>DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell>NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row theme="success">
          <Table.Cell>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell>(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## With themed cell

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>IBAN</Table.Cell>
          <Table.Cell theme="warning" bold>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell theme="success" bold>DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell>NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell>(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## With empty date

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell empty />
        </Table.Row>
        <Table.Row>
          <Table.Cell>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell empty theme="warning" />
        </Table.Row>
        <Table.Row>
          <Table.Cell>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell empty theme="danger" />
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## Events

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell>Attributes</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row onClick={(e) => {
          console.log('row', e)
        }}>
          <Table.Cell
            onClick={(e) => {
              console.log('cell', e)
            }}
          >IBAN
          </Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell>DE01 1211 2421 2311 9312 09</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell>NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell>(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## Width

<Playground>
  <div>
    <Table>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell width="25%">Attributes</Table.Cell>
          <Table.Cell width="55%">Old value</Table.Cell>
          <Table.Cell width="20%">New value</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>IBAN</Table.Cell>
          <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
          <Table.Cell>lorem</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>BIC</Table.Cell>
          <Table.Cell>CO1345DE</Table.Cell>
          <Table.Cell>NX7821DE</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Tax ID</Table.Cell>
          <Table.Cell>42 187 999 19</Table.Cell>
          <Table.Cell>(Deleted)</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>

## Fixed Head

<Playground>
  <div>
    <Table>
      <Table.Head fixed>
        <Table.Row theme="default" >
          {times(5).map(i =>
            <Table.Cell
              key={i}
              minWidth={i === 3 ? 100 : undefined}
              maxWidth={i === 3 ? 300 : undefined}
            >
              Th {i}
            </Table.Cell>
          )}
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {times(5).map(i =>
          <Table.Row
            id={i}
            key={i}
            size="large"
            backgroundOnHover="#f9f9f9"
          >
            {times(5).map(j =>
              <Table.Cell
                key={j}
                minWidth={50}
                maxWidth={300}
              >
                Cell {j}
              </Table.Cell>
            )}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
  </div>
</Playground>

## Fixed columns
Columns can be fixed by adding the property `columnsFixed`to the Table Component.
In order to fix both, the header as well as columns, please see the next example.

<Playground>
  <div className="table-container">
    <Table columnsFixed={1}>
      <Table.Head>
        <Table.Row theme="default">
          <Table.Cell>TH Fixed 1</Table.Cell>
          {times(5).map(i =>
            <Table.Cell
              key={i}
              minWidth={i === 3 ? 100 : undefined}
              maxWidth={i === 3 ? 300 : undefined}
            >
              Th dynamically {i}
            </Table.Cell>
          )}
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {times(10).map(i =>
          <Table.Row
            id={i}
            key={i}
            size="large"
            backgroundOnHover="#f9f9f9"
          >
            <Table.Cell>TD Fixed 1</Table.Cell>
            {times(5).map(j =>
              <Table.Cell
                key={j}
                minWidth={50}
                maxWidth={300}
              >
                Td dynamically {j}
              </Table.Cell>
            )}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
  </div>
</Playground>

## Fixed columns and fixed height
To fix any number of columns, as well as the Table Head three properties need to be set:
- `columns fixed={n}` on the table component
- `height={500}`fixed height of the table in px
- `fixed` on the Table.Head component

<Playground>
  <div className="table-container">
    <Table columnsFixed={1} height={500}>
      <Table.Head fixed>
        <Table.Row theme="default">
          <Table.Cell>TH Fixed 1</Table.Cell>
          {times(5).map(i =>
            <Table.Cell
              key={i}
              minWidth={i === 3 ? 100 : undefined}
              maxWidth={i === 3 ? 300 : undefined}
            >
              Th dynamically {i}
            </Table.Cell>
          )}
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {times(10).map(i =>
          <Table.Row
            id={i}
            key={i}
            size="large"
            backgroundOnHover="#f9f9f9"
          >
            <Table.Cell>TD Fixed 1</Table.Cell>
            {times(5).map(j =>
              <Table.Cell
                key={j}
                minWidth={50}
                maxWidth={300}
              >
                Td dynamically {j}
              </Table.Cell>
            )}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
  </div>
</Playground>