Simple example

```
const { Header, Footer, Body, Row, RowColumn } = Table;
const rows = [
  { _id: 1, status: 'Employed', name: 'Samuel Roberts' },
  { _id: 2, status: 'Employed', name: 'Steve Brown' },
  { _id: 3, status: 'Employed', name: 'Stephanie Sanders' },
  { _id: 4, status: 'Employed', name: 'Adam Moooore' },
  { _id: 5, status: 'Unemployed', name: 'Randal White' },
  { _id: 6, status: 'Employed', name: 'Samuel Roberts' },
  { _id: 7, status: 'Employed', name: 'Steve Brown' },
  { _id: 8, status: 'Employed', name: 'Stephanie Sanders' },
  { _id: 9, status: 'Employed', name: 'Adam Moore' },
  { _id: 10, status: 'Employed', name: 'Samuel Roberts' },
  { _id: 12, status: 'Employed', name: 'Steve Brown' },
  { _id: 13, status: 'Employed', name: 'Stephanie Sanders' },
  { _id: 14, status: 'Employed', name: 'Adam Moooore' },
  { _id: 15, status: 'Unemployed', name: 'Randal White' },
  { _id: 16, status: 'Employed', name: 'Samuel Roberts' },
  { _id: 17, status: 'Employed', name: 'Steve Brown' },
  { _id: 18, status: 'Employed', name: 'Stephanie Sanders' },
  { _id: 19, status: 'Employed', name: 'Adam Moore' }
];
<div>
  <Table
    displayRowCheckbox
    multiSelectable
    onChange={console.log}
    filtering="name"
    paginate={3}
  >
    <Header>
      <Row>
        <RowColumn sort={['_id']}>ID</RowColumn>
        <RowColumn sort={['name']} order="desc">Name</RowColumn>
        <RowColumn sort={['status']}>Status</RowColumn>
      </Row>
    </Header>
    <Body>
      <Row
        value={{ _id: 1, status: 'Employed', name: 'Samuel Roberts' }}
        onRowClick={(e, row) => console.log('onRowClick', row)}
        onCellClick={(e, row, cell) => console.log('onCellClick', row, cell)}
        selected
      >
        <RowColumn>ID 1</RowColumn>
        <RowColumn>Samuel Roberts</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row
        value={{ _id: 2, status: 'Employed', name: 'Steve Brown' }}
        selected
      >
        <RowColumn>ID 2</RowColumn>
        <RowColumn>Steve Brown</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 3, status: 'Employed', name: 'Stephanie Sanders' }} selected>
        <RowColumn>ID 3</RowColumn>
        <RowColumn>Stephanie Sanders</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 4, status: 'Employed', name: 'Adam Moooore' }}>
        <RowColumn>ID 4</RowColumn>
        <RowColumn>Adam Moore</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 5, status: 'Unemployed', name: 'Randal White' }}>
        <RowColumn>ID 5</RowColumn>
        <RowColumn>Randal White</RowColumn>
        <RowColumn>Unemployed</RowColumn>
      </Row>
      <Row value={{ _id: 6, status: 'Employed', name: 'Samuel Roberts' }}>
        <RowColumn>ID 6</RowColumn>
        <RowColumn>Samuel Roberts</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 7, status: 'Employed', name: 'Steve Brown' }}>
        <RowColumn>ID 7</RowColumn>
        <RowColumn>Steve Brown</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 8, status: 'Employed', name: 'Stephanie Sanders' }}>
        <RowColumn>ID 8</RowColumn>
        <RowColumn>Stephanie Sanders</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 9, status: 'Employed', name: 'Adam Moore' }}>
        <RowColumn>ID 9</RowColumn>
        <RowColumn>Adam Moore</RowColumn>
        <RowColumn>Employed</RowColumn>
      </Row>
      <Row value={{ _id: 10, status: 'Unemployed', name: 'Randal White' }}>
        <RowColumn>ID 10</RowColumn>
        <RowColumn>Randal White</RowColumn>
        <RowColumn>Unemployed</RowColumn>
      </Row>
    </Body>
    <Footer>
      <Row>
        <RowColumn>footer ID</RowColumn>
        <RowColumn>footer Name</RowColumn>
        <RowColumn>footer Status</RowColumn>
      </Row>
    </Footer>
  </Table>
  <Table
    style={{minHeight: '300px'}}
    displayRowCheckbox
    multiSelectable
    fixedFooter
    fixedHeader
    onChange={console.log}
  >
    <Header>
      <Row>
        <RowColumn sort={['_id']}>ID</RowColumn>
        <RowColumn sort={['name']} order="desc">Name</RowColumn>
        <RowColumn sort={['status']}>Status</RowColumn>
      </Row>
    </Header>
    <Body>
      {rows.map(({ _id, status, name }) => (
        <Row
          value={{ _id, status, name }}
          onRowClick={(e, row) => console.log('onRowClick', row)}
          onCellClick={(e, row, cell) => console.log('onCellClick', row, cell)}
          key={`${_id}`}
        >
          <RowColumn>ID {_id}</RowColumn>
          <RowColumn>{name}</RowColumn>
          <RowColumn>{status}</RowColumn>
      </Row>
      ))}
      <Row value={{ _id: 20, status: 'Unemployed', name: 'Randal White' }}>
        <RowColumn>ID 20</RowColumn>
        <RowColumn>Randal White</RowColumn>
        <RowColumn>Unemployed</RowColumn>
      </Row>
    </Body>
    <Footer>
      <Row>
        <RowColumn>footer ID</RowColumn>
        <RowColumn>footer Name</RowColumn>
        <RowColumn>footer Status</RowColumn>
      </Row>
    </Footer>
  </Table>
</div>
```
