7.3 KiB
7.3 KiB
Table Header
// Name: Active
const React = require('react');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody } = require('./');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft="12" middle left>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
</Th>
<Th sortOrder="asc" showSort left middle selected 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="60" padding="0" />
</Tr>
</Thead>
<Tbody />
</Table>;
Table Footer
// Name: Active
const React = require('react');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Tfoot, Tr, Th } = require('./');
<Table>
<Tfoot>
<Tr>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="32"
padding="0"
paddingLeft="12"
middle
left
>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
sortOrder="asc"
showSort
left
middle
selected
actionable
>
<span>Name </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="150"
left
middle
actionable
>
<span>Status </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="0"
sm="160"
left
middle
actionable
>
<span>Created </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="60"
padding="0"
/>
</Tr>
</Tfoot>
</Table>;
Empty Table
// Name: Active
const React = require('react');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th } = require('./');
const { Card, H3, Button, P } = require('../');
const { Padding, Margin } = require('styled-components-spacing');
const { default: Flex } = require('styled-flex-component');
<div>
<Table>
<Thead>
<Tr>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="32"
padding="0"
paddingLeft="12"
middle
left
>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
sortOrder="asc"
showSort
left
middle
selected
actionable
>
<span>Name </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="150"
left
middle
actionable
>
<span>Status </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="0"
sm="160"
left
middle
actionable
>
<span>Created </span>
</Th>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="60"
padding="0"
/>
</Tr>
</Thead>
</Table>
<Card>
<Padding all={5}>
<Flex alignCenter justifyCenter column>
<H3>No instances yet?</H3>
<P center>
You haven’t commissioned any instances yet, but they’re really easy to
set up. Click below to get going.
</P>
<Margin top={2}>
<Button>Create Instance</Button>
</Margin>
</Flex>
</Padding>
</Card>
</div>;
Multiple Selection List
// Name: Active
const React = require('react');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot, Actions } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft="12" middle left>
<FormGroup>
<Checkbox noMargin />
</FormGroup>
</Th>
<Th sortOrder="asc" showSort left middle selected 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="60" padding="0" />
</Tr>
</Thead>
<Tbody>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={4}>
<Checkbox noMargin checked />
</FormGroup>
</Td>
<Td middle left bold>
percona-ram-32
</Td>
<Td middle left>
<span>
<Dot size="11px" borderRadius={11} color="primary" /> Provisioning
</span>
</Td>
<Td xs="0" sm="160" middle left>
about 2 months
</Td>
<Td padding="0" center hasBorder="left">
<Actions />
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={4}>
<Checkbox noMargin />
</FormGroup>
</Td>
<Td middle left bold>
percona-ram-32
</Td>
<Td middle left>
<span>
<Dot size="11px" borderRadius={11} color="green" /> Running
</span>
</Td>
<Td xs="0" sm="160" middle left>
about 1 hour
</Td>
<Td padding="0" center hasBorder="left">
<Actions />
</Td>
</Tr>
</Tbody>
</Table>;
Single Selection List
// Name: Active
const React = require('react');
const { FormGroup, Radio } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft="12" middle left />
<Th sortOrder="asc" showSort left middle selected 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>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td padding="0" paddingLeft="12" middle left selected>
<FormGroup paddingTop={4}>
<Radio noMargin checked />
</FormGroup>
</Td>
<Td middle left bold selected>
percona-ram-32
</Td>
<Td middle left selected>
<span>
<Dot size="11px" borderRadius={11} color="primary" /> Provisioning
</span>
</Td>
<Td xs="0" sm="160" middle left selected>
about 2 months
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={4}>
<Radio noMargin />
</FormGroup>
</Td>
<Td middle left bold>
percona-ram-32
</Td>
<Td middle left>
<span>
<Dot size="11px" borderRadius={11} color="green" /> Running
</span>
</Td>
<Td xs="0" sm="160" middle left>
about 1 hour
</Td>
</Tr>
</Tbody>
</Table>;