2017-10-31 12:29:15 +02:00
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-12-06 12:34:15 +02:00
|
|
|
const remcalc = require('remcalc');
|
|
|
|
const { FormGroup, Checkbox } = require('../form');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
|
2017-12-06 12:34:15 +02:00
|
|
|
const { Dot, Actions } = require('../icons');
|
2017-10-31 12:29:15 +02:00
|
|
|
|
|
|
|
<Table>
|
|
|
|
<Thead>
|
|
|
|
<Tr>
|
2017-12-06 12:34:15 +02:00
|
|
|
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
|
|
|
<FormGroup paddingTop={remcalc(4)}>
|
|
|
|
<Checkbox />
|
|
|
|
</FormGroup>
|
|
|
|
</Th>
|
|
|
|
<Th sortOrder="asc" showSort left middle actionable>
|
|
|
|
<span>Name </span>
|
|
|
|
</Th>
|
|
|
|
<Th xs="150" left middle actionable>
|
|
|
|
<span>Status </span>
|
|
|
|
</Th>
|
|
|
|
<Th xs="0" sm="160" left middle actionable>
|
|
|
|
<span>Created </span>
|
|
|
|
</Th>
|
|
|
|
<Th xs="0" sm="130" left middle actionable>
|
|
|
|
<span>Short ID </span>
|
|
|
|
</Th>
|
|
|
|
<Th xs="60" padding="0" />
|
2017-10-31 12:29:15 +02:00
|
|
|
</Tr>
|
|
|
|
</Thead>
|
|
|
|
<Tbody>
|
2017-12-06 12:34:15 +02:00
|
|
|
<Tr>
|
|
|
|
<Td padding="0" paddingLeft={remcalc(12)} middle left>
|
|
|
|
<FormGroup paddingTop={remcalc(4)}>
|
|
|
|
<Checkbox />
|
|
|
|
</FormGroup>
|
2017-11-02 15:33:43 +02:00
|
|
|
</Td>
|
2017-12-06 12:34:15 +02:00
|
|
|
<Td middle left>
|
|
|
|
<a href="/instances/hello">hello</a>
|
|
|
|
</Td>
|
|
|
|
<Td middle left>
|
|
|
|
<span>
|
|
|
|
<Dot
|
|
|
|
width={remcalc(11)}
|
|
|
|
height={remcalc(11)}
|
|
|
|
borderRadius={remcalc(11)}
|
|
|
|
color="primary"
|
|
|
|
/>{' '}
|
|
|
|
Provisioning
|
|
|
|
</span>
|
|
|
|
</Td>
|
|
|
|
<Td xs="0" sm="160" middle left>
|
|
|
|
about 2 months
|
|
|
|
</Td>
|
|
|
|
<Td xs="0" sm="130" middle left>
|
|
|
|
<code>2252839</code>
|
|
|
|
</Td>
|
|
|
|
<Td padding="0" center hasBorder="left">
|
|
|
|
<Actions />
|
2017-11-02 15:33:43 +02:00
|
|
|
</Td>
|
2017-10-31 12:29:15 +02:00
|
|
|
</Tr>
|
|
|
|
<Tr>
|
2017-12-06 12:34:15 +02:00
|
|
|
<Td padding="0" paddingLeft={remcalc(12)} middle left>
|
|
|
|
<FormGroup paddingTop={remcalc(4)}>
|
|
|
|
<Checkbox />
|
|
|
|
</FormGroup>
|
|
|
|
</Td>
|
|
|
|
<Td middle left>
|
|
|
|
<a href="/instances/world">world</a>
|
|
|
|
</Td>
|
|
|
|
<Td middle left>
|
|
|
|
<span>
|
|
|
|
<Dot
|
|
|
|
width={remcalc(11)}
|
|
|
|
height={remcalc(11)}
|
|
|
|
borderRadius={remcalc(11)}
|
|
|
|
color="green"
|
|
|
|
/>{' '}
|
|
|
|
Running
|
|
|
|
</span>
|
|
|
|
</Td>
|
|
|
|
<Td xs="0" sm="160" middle left>
|
|
|
|
about 1 hour
|
|
|
|
</Td>
|
|
|
|
<Td xs="0" sm="130" middle left>
|
|
|
|
<code>6739567</code>
|
|
|
|
</Td>
|
|
|
|
<Td padding="0" center hasBorder="left">
|
|
|
|
<Actions />
|
|
|
|
</Td>
|
2017-10-31 12:29:15 +02:00
|
|
|
</Tr>
|
|
|
|
</Tbody>
|
2017-11-02 15:33:43 +02:00
|
|
|
</Table>;
|
2017-10-31 12:29:15 +02:00
|
|
|
```
|