Skip to content
MENU

Soracom

Design System

Datatable

Options 

Basic usage 

<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Row striping 

Row striping requires the table to have a class of ds-datatable--striped, and for the table rows to be contained in a <tbody> element.

<table class="ds-datatable--striped">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
Content Content Content
<table class="ds-datatable--striped">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Column alignment 

Adding ds-datatable__col--center or ds-datatable__col--right to all of the th and td elements within a column will align the contents.

Due to limitations in html/css, you must apply this class to each corresponding td and th - you can’t just set the th only.
Example showing right and center alignment
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--right">Heading two</th>
      <th class="ds-datatable__col--center">Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td class="ds-datatable__col--right">Content</td>
      <td class="ds-datatable__col--center">Content longer</td>
    </tr>
    <tr>
      <td>Content</td>
      <td class="ds-datatable__col--right">Content longer</td>
      <td class="ds-datatable__col--center">Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content longer
Content Content longer Content
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--right">Heading two</th>
      <th class="ds-datatable__col--center">Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td class="ds-datatable__col--right">Content</td>
      <td class="ds-datatable__col--center">Content longer</td>
    </tr>
    <tr>
      <td>Content</td>
      <td class="ds-datatable__col--right">Content longer</td>
      <td class="ds-datatable__col--center">Content</td>
    </tr>
  </tbody>
</table>

Column widths 

By default the columns will be sized using html tables automatic sizing. There are two options which can be applie to the columns th to control this (min and max):

th.ds-datatable__col--min

All columns with this class will be reduced to the minimum width based on th content (without wrapping the th), or the narrowest the columns td will allow (with wrapping), the other columns will be sized according to standard html table sizing.

<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--min">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--min">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

th.ds-datatable__col--max

All columns with this class will be expanded to the maximum width, while all other columns will be reduced to the minimum based on the same rules as th.ds-datatable__col--min.

<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--max">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="ds-datatable__col--max">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Spacing 

Compact 

<table class="ds-datatable--compact">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable--compact">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Condensed 

Condensed spacing should only be used in limited scenarios, it is preferable to use the default spacing or compact.

<table class="ds-datatable--condensed">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable--condensed">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Loading state 

Available from v1.7.9+

When a datatable has the the class ds-datatable--loading any content inside the datatable is not visible and the loading state animation is shown.

Loading state using --loading icon
<table class="ds-datatable--loading">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable--loading">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Loading state using --loading-refresh icon
<table class="ds-datatable--loading-refresh">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable--loading-refresh">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

The table header thead can be made sticky by adding the class ds-datatable__header--sticky. The effect is only apparent if the parent container (containing the ds-datatable element) has a set height, with the contents set to overflow.

The class ds-layout--height-200-px in the example below to limit the height of the container is experimental and will most likely be removed in future.
Datatable with a sticky header and it's parent container set to 200px in height
<div class="ds-layout--height-200-px">
  <table class="ds-datatable">
    <thead class="ds-datatable__header--sticky">
      <tr>
        <th>Heading one</th>
        <th>Heading two</th>
        <th>Heading three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</div>
Heading one Heading two Heading three
Content Content Content
Content Content Content
Content Content Content
Content Content Content
<div class="ds-layout--height-200-px">
  <table class="ds-datatable">
    <thead class="ds-datatable__header--sticky">
      <tr>
        <th>Heading one</th>
        <th>Heading two</th>
        <th>Heading three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive support 

To enable support for responsive datatables on mobile devices, add:

  • An empty data-label attribute to the thead element to trigger hiding the standard column headers. This will be used in future to allow setting of a mobile specific header.

  • An empty data-label attribute to each tr inside the tbody element, this will trigger responsive columns layout. This will be used in future to allow setting of a mobile specific per-row headings.

  • A data-label attribute to each td with the title of the appropriate column.

<table class="ds-datatable">
  <thead data-label>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr data-label>
      <td data-label="Heading one">Content</td>
      <td data-label="Heading two">Content</td>
      <td data-label="Heading three">Content</td>
    </tr>
    <tr data-label>
      <td data-label="Heading one">Content</td>
      <td data-label="Heading two">Content</td>
      <td data-label="Heading three">Content</td>
    </tr>
  </tbody>
</table>
Resize the example below to see responsive support

Styles 

Custom styles exist for specific use cases.

Embedded style 

This style includes a border around the datatable, row striping and drop-shadow on the header and is useful when a datatable is displayed inline next to other field elements.

<table class="ds-datatable--embedded">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Content Content Content
<table class="ds-datatable--embedded">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Tests 

Mixed form content 

Open in new window

Mixed text/image content 

Mixed content with default display
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td><div class="ds-tag">Tag Value</div></td>
    </tr>
    <tr>
      <td>Content</td>
      <td><input class="ds-text-input" placeholder="Person 1"></td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/YLZQbAw-L/p?bg=34cdd7"/>
      <td>
        <div class="ds-tag">Tag Value</div>
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/FvaJSjTTD/p?bg=34cdd7"/>
      <td>
        <input class="ds-text-input" placeholder="Person 1">
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Content Content
Content Content
Tag Value
Content Content
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Tag Value
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td><div class="ds-tag">Tag Value</div></td>
    </tr>
    <tr>
      <td>Content</td>
      <td><input class="ds-text-input" placeholder="Person 1"></td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/YLZQbAw-L/p?bg=34cdd7"/>
      <td>
        <div class="ds-tag">Tag Value</div>
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/FvaJSjTTD/p?bg=34cdd7"/>
      <td>
        <input class="ds-text-input" placeholder="Person 1">
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
    </tr>
  </tbody>
</table>
Mixed content with condensed display
<table class="ds-datatable--condensed">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td><div class="ds-tag">Tag Value</div></td>
    </tr>
    <tr>
      <td>Content</td>
      <td><input class="ds-text-input" placeholder="Person 1"></td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/YLZQbAw-L/p?bg=34cdd7"/>
      <td>
        <div class="ds-tag">Tag Value</div>
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/FvaJSjTTD/p?bg=34cdd7"/>
      <td>
        <input class="ds-text-input" placeholder="Person 1">
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content Content Content
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Content Content
Content Content
Tag Value
Content Content
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Tag Value
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
<table class="ds-datatable--condensed">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td><div class="ds-tag">Tag Value</div></td>
    </tr>
    <tr>
      <td>Content</td>
      <td><input class="ds-text-input" placeholder="Person 1"></td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/YLZQbAw-L/p?bg=34cdd7"/>
      <td>
        <div class="ds-tag">Tag Value</div>
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>
        <img width="80" height="120" src="https://blush.ly/FvaJSjTTD/p?bg=34cdd7"/>
      <td>
        <input class="ds-text-input" placeholder="Person 1">
      </td>
    </tr>
    <tr>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
    </tr>
  </tbody>
</table>

Text only content 

Text only content with default display
<table class="ds-datatable--striped">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>s1.standard</td>
			<td>512kbps</td>
			<td>512kbps</td>
		</tr>
		<tr>
			<td>s1.fast</td>
			<td>2Mbps</td>
			<td>2Mbps</td>
		</tr>
		<tr>
			<td>s1.4xfast</td>
			<td>8Mbps</td>
			<td>8Mbps</td>
		</tr>
		<tr>
			<td>u1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>u1.standard</td>
			<td>no limit</td>
			<td>4Mbps</td>
		</tr>
	</tbody>
</table>
Speed class Upload Download
s1.minimum 32kbps 32kbps
s1.slow 128kbps 128kbps
s1.standard 512kbps 512kbps
s1.fast 2Mbps 2Mbps
s1.4xfast 8Mbps 8Mbps
u1.slow 128kbps 128kbps
u1.standard no limit 4Mbps
<table class="ds-datatable--striped">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>s1.standard</td>
			<td>512kbps</td>
			<td>512kbps</td>
		</tr>
		<tr>
			<td>s1.fast</td>
			<td>2Mbps</td>
			<td>2Mbps</td>
		</tr>
		<tr>
			<td>s1.4xfast</td>
			<td>8Mbps</td>
			<td>8Mbps</td>
		</tr>
		<tr>
			<td>u1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>u1.standard</td>
			<td>no limit</td>
			<td>4Mbps</td>
		</tr>
	</tbody>
</table>
Text only content with condensed display
<table class="ds-datatable--striped ds-datatable--condensed">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>s1.standard</td>
			<td>512kbps</td>
			<td>512kbps</td>
		</tr>
		<tr>
			<td>s1.fast</td>
			<td>2Mbps</td>
			<td>2Mbps</td>
		</tr>
		<tr>
			<td>s1.4xfast</td>
			<td>8Mbps</td>
			<td>8Mbps</td>
		</tr>
		<tr>
			<td>u1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>u1.standard</td>
			<td>no limit</td>
			<td>4Mbps</td>
		</tr>
	</tbody>
</table>
Speed class Upload Download
s1.minimum 32kbps 32kbps
s1.slow 128kbps 128kbps
s1.standard 512kbps 512kbps
s1.fast 2Mbps 2Mbps
s1.4xfast 8Mbps 8Mbps
u1.slow 128kbps 128kbps
u1.standard no limit 4Mbps
<table class="ds-datatable--striped ds-datatable--condensed">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>s1.standard</td>
			<td>512kbps</td>
			<td>512kbps</td>
		</tr>
		<tr>
			<td>s1.fast</td>
			<td>2Mbps</td>
			<td>2Mbps</td>
		</tr>
		<tr>
			<td>s1.4xfast</td>
			<td>8Mbps</td>
			<td>8Mbps</td>
		</tr>
		<tr>
			<td>u1.slow</td>
			<td>128kbps</td>
			<td>128kbps</td>
		</tr>
		<tr>
			<td>u1.standard</td>
			<td>no limit</td>
			<td>4Mbps</td>
		</tr>
	</tbody>
</table>
Mixed content with buttons in different visual states
<table class="ds-datatable--striped ds-datatable--condensed">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>
        <button class="ds-button">
          <span>Button label</span>
        </button>
      </td>
			<td>
        <button class="ds-button--primary">
          <span>Button label</span>
        </button>
      </td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>
        <button class="ds-button--warning">
          <span>Button label</span>
        </button>
      </td>
			<td>
        <button class="ds-button--primary ds-button--alert ds-button--icon-online">
          <span>Button label</span>
        </button>
      </td>
		</tr>
	</tbody>
</table>
Speed class Upload Download
s1.minimum 32kbps 32kbps
s1.slow
s1.slow
<table class="ds-datatable--striped ds-datatable--condensed">
	<thead>
		<tr>
			<th>Speed class</th>
			<th>Upload</th>
			<th>Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>s1.minimum</td>
			<td>32kbps</td>
			<td>32kbps</td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>
        <button class="ds-button">
          <span>Button label</span>
        </button>
      </td>
			<td>
        <button class="ds-button--primary">
          <span>Button label</span>
        </button>
      </td>
		</tr>
		<tr>
			<td>s1.slow</td>
			<td>
        <button class="ds-button--warning">
          <span>Button label</span>
        </button>
      </td>
			<td>
        <button class="ds-button--primary ds-button--alert ds-button--icon-online">
          <span>Button label</span>
        </button>
      </td>
		</tr>
	</tbody>
</table>