---
name: Table
menu: Patterns
parent: Modules
route: /patterns/table
---

# Table

Table arranges a collection of items with multiple attributes in rows and columns, to make the data easy to scan and analyze. Table is scrollable horizontally by mouse and keyboard.

## Basic Table with `row` and `header` data props

The data-based version of the table uses `header` and `row` arrays. These are converted into accessible `<th>` and `<td>` elements. If the data includes a negative number/integer, the style automatically adopts a red color. This only works where simple integer strings are provided. Where more complex HTML is provided, styling will have to be provided to that HTML manually.

```specimen-react
const headers = ['Region', 'Electricity', 'Gas'];

const rows = [
  ['East England', '10.40', '2.31'],
  ['East Midlands', '-10.55', '2.77'],
  ['London', '10.10', '2.48']
];

<Table headers={headers} rows={rows} />
```

**Note:** You can add basic markup (but not components; see **Custom headers** below) to the headers or rows and it will be parsed. For example, you could make one of the row values italic:

```specimen-react
const headers = ['Region', 'Electricity', 'Gas'];

const rows = [
  ['East England', '10.40', '<em>2.31</em>'],
  ['East Midlands', '10.55', '2.77'],
  ['London', '10.10', '2.48']
];

<Table headers={headers} rows={rows} />
```

### Row headers

Sometimes, you'll want the first cell of each row to be used as a row header. This is done automatically where the `rowHeaders` prop is provided. Accessible `<th>` elements with `scope="row"` are inserted.

```specimen-react
const headers = ['Region', 'Electricity', 'Gas'];

const rows = [
  ['East England', '10.40', '2.31'],
  ['East Midlands', '10.55', '2.77'],
  ['London', '10.10', '2.48']
];

<Table headers={headers} rows={rows} rowHeaders />
```

### Captions

You can include a `<caption>` to name your table. It is recommended you _either_ include a caption or precede the table with a heading of the correct level.

```specimen-react
const headers = ['Region', 'Electricity', 'Gas'];

const rows = [
  ['East England', '10.40', '2.31'],
  ['East Midlands', '10.55', '2.77'],
  ['London', '10.10', '2.48']
];

<Table headers={headers} rows={rows} rowHeaders caption="Simple rates" />
```

### Custom headers

You can also customise the table headers. For instance, you can use [Text](/patterns/text) component for rendering bold text in the table headers.

```specimen-react
const rows = [
  ['East England', '10.40', '2.31'],
  ['East Midlands', '10.55', '2.77'],
  ['London', '10.10', '2.48']
];

<Table rows={rows} caption="Simple rates">
  <thead>
    <tr>
      <th scope="col">
        <Text size="otter" bold>Region</Text>
      </th>
      <th scope="col">
        <Text size="otter" bold>Electricity</Text>
      </th>
      <th scope="col">
        <Text size="otter" bold>Gas</Text>
      </th>
    </tr>
  </thead>
</Table>
```

## Manual table

If, for added control, you wish to create the table markup completely manually, you can do that instead. The table will be styled in the same fashion as a data-based one. **Note:** You cannot use custom headers (see above) and manual markup. Custom headers must be used with data from the `rows` prop.

```specimen-react
<Table>
  <caption>Simple rates</caption>
  <tbody>
    <tr>
        <th scope="col">Region</th>
        <th scope="col">Electricity</th>
        <th scope="col">Gas</th>
    </tr>
    <tr>
        <th scope="row">East England</th>
        <td>10.40</td>
        <td>2.31</td>
    </tr>
    <tr>
        <th scope="row">East Midlands</th>
        <td>10.55</td>
        <td>2.77</td>
    </tr>
    <tr>
        <th scope="row">London</th>
        <td>10.10</td>
        <td>2.48</td>
    </tr>
  </tbody>
</Table>
```
