---
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} />