@personio/ui-docs
Version:
478 lines (445 loc) • 12.9 kB
text/mdx
---
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 row
<Playground>
<div>
<Table>
<Table.Head>
<Table.Row theme="default" fixed>
{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
<Playground>
<div className="table-container">
<Table fixed columnsFixed={3}>
<Table.Head>
<Table.Row theme="default">
<Table.Cell>Fixed 1</Table.Cell>
<Table.Cell>Fixed 2</Table.Cell>
{times(10).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(10).map(i =>
<Table.Row
id={i}
key={i}
size="large"
backgroundOnHover="#f9f9f9"
>
<Table.Cell>Fixed 1</Table.Cell>
<Table.Cell>Fixed 2</Table.Cell>
{times(10).map(j =>
<Table.Cell
key={j}
minWidth={50}
maxWidth={300}
>
{(j === 3) ? 'Lorem Ipsum Dolor Simet At Magna' : j }
</Table.Cell>
)}
</Table.Row>
)}
</Table.Body>
</Table>
</div>
</Playground>
## Fixed columns
<Playground>
<div className="table-container">
<Table fixed columnsFixed={2}>
<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 dinnamicly {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 dinnamicly {j}
</Table.Cell>
)}
</Table.Row>
)}
</Table.Body>
</Table>
</div>
</Playground>