---
name: Table
route: /components/common/tables/table
menu: Tables
edit: false
---

import { Playground, Props } from 'docz'
import Table from './table'

# Table
**SUBCATEGORY:** Tables

<hr />

## Table
### Description
For presenting data sets in a structured layout. Headers are styled differently to data;
both use lining figures (Econ Sans).
<Playground>
    <Table>
        <thead>
            <tr>
              <th scope='col'>Heading</th>
              <th scope='col'>Heading</th>
              <th scope='col'>Heading</th>
              <th scope='col'>Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1 Cell1</td>
                <td>Row1 Cell2</td>
                <td>Row1 Cell3</td>
                <td>Row1 Cell4</td>
            </tr>
            <tr>
                <td>Row2 Cell1</td>
                <td>Row2 Cell2</td>
                <td>Row2 Cell3</td>
                <td>Row2 Cell4</td>
            </tr>
            <tr>
                <td>Row3 Cell1</td>
                <td>Row3 Cell2</td>
                <td>Row3 Cell3</td>
                <td>Row3 Cell4</td>
            </tr>
            <tr>
                <td>Row4 Cell1</td>
                <td>Row4 Cell2</td>
                <td>Row4 Cell3</td>
                <td>Row4 Cell4</td>
            </tr>
        </tbody>
    </Table>
</Playground>

<hr />

## Table (scroll)
### Description
For presenting data sets in a structured layout. Headers are styled differently to data;
both use lining figures (Econ Sans).

<Playground>
    <Table scroll>
    <thead>
        <tr>
          <th scope='col'>Heading</th>
          <th scope='col'>Heading</th>
          <th scope='col'>Heading</th>
          <th scope='col'>Heading</th>
          <th scope='col'>Heading</th>
            <th scope='col'>Heading</th>
            <th scope='col'>Heading</th>
            <th scope='col'>Heading</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>Row1 Cell1</td>
            <td>Row1 Cell2</td>
            <td>Row1 Cell3</td>
            <td>Row1 Cell4</td>
            <td>Row1 Cell5</td>
            <td>Row1 Cell6</td>
            <td>Row1 Cell7</td>
            <td>Row1 Cell8</td>
          </tr>
          <tr>
            <td>Row2 Cell1</td>
            <td>Row2 Cell2</td>
            <td>Row2 Cell3</td>
            <td>Row2 Cell4</td>
            <td>Row2 Cell5</td>
            <td>Row2 Cell6</td>
            <td>Row2 Cell7</td>
            <td>Row2 Cell8</td>
          </tr>
          <tr>
            <td>Row3 Cell1</td>
            <td>Row3 Cell2</td>
            <td>Row3 Cell3</td>
            <td>Row3 Cell4</td>
            <td>Row3 Cell5</td>
            <td>Row3 Cell6</td>
            <td>Row3 Cell7</td>
            <td>Row3 Cell8</td>
          </tr>
          <tr>
            <td>Row4 Cell1</td>
            <td>Row4 Cell2</td>
            <td>Row4 Cell3</td>
            <td>Row4 Cell4</td>
            <td>Row4 Cell5</td>
            <td>Row4 Cell6</td>
            <td>Row4 Cell7</td>
            <td>Row4 Cell8</td>
          </tr>
        </tbody>
    </Table>
</Playground>

<hr />

## Properties
<Props of={Table} />