112 lines
3.0 KiB
Plaintext
112 lines
3.0 KiB
Plaintext
---
|
|
name: Table
|
|
menu: Components
|
|
route: components/table
|
|
---
|
|
|
|
import { Playground, Props, Link } from 'docz';
|
|
import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
|
|
|
|
# Table
|
|
|
|
Tables display sets of data.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { Table } from '@ohif/ui';
|
|
```
|
|
|
|
## Basic usage
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Item 01</TableCell>
|
|
<TableCell>Item 02</TableCell>
|
|
<TableCell>Item 03</TableCell>
|
|
<TableCell>Item 04</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Content 01</TableCell>
|
|
<TableCell>Content 02</TableCell>
|
|
<TableCell>Content 03</TableCell>
|
|
<TableCell>Content 04</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Table width
|
|
|
|
Table has full width by default. If you want to change its width, you will have
|
|
to set the `fullWidth` prop to `false` and then define your own table width by
|
|
passing a `className` or `style`.
|
|
|
|
## Table components
|
|
|
|
<Link to="components/table-head">TableHead</Link>
|
|
<br />
|
|
<Link to="components/table-body">TableBody</Link>
|
|
<br />
|
|
<Link to="components/table-row">TableRow</Link>
|
|
<br />
|
|
<Link to="components/table-cell">TableCell</Link>
|
|
|
|
## Properties
|
|
|
|
<Props of={Table} />
|