
## 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>
  <State initial={{ actived: 0 }}>
      {({ state, setState }) => (
        <div className="table-container">
          <div>
            <Button onClick={() => {
              setState({ actived: state.actived + 1})
            }}>
              Change
            </Button>
          </div>
          <Table columnsFixed={2}>
            <Table.Head fixed>
              <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} active={i === state.actived}>
                  <Table.Cell>Fixed 1</Table.Cell>
                  <Table.Cell>Fixed 2</Table.Cell>
                  {times(10).map(j =>
                    <Table.Cell key={`${i}-${j}`} minWidth={10} maxWidth={300}>
                      {i} - {j}
                    </Table.Cell>
                  )}
                </Table.Row>
              )}
            </Table.Body>
          </Table>

        </div>
    )}
  </State>
</Playground>
