Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Datatable

Datatable

Options

Basic usage

html
Copy 
<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>

Visual states

The 4x preset visual states - alert, warning, success and info, can be applied to table rows

html
Copy 
<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 class="--alert">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Highlight

Highlight a specific row.

html
Copy 
<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 class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Highlight a specific row with a visual state.

html
Copy 
<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 class="--highlight --alert">
      <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 --striped, and for the table rows to be contained in a <tbody> element.

html
Copy 
<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>

The datatable footer element uses the html tfoot element - it’s intended to be used for permanently displayed content, for example when you need to show a button to “Add a new row”.

For temporary messages such as “No items found” see No items

Footer with inline text content

html
Copy 
<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>
  <tfoot>
    <tr>
      <td colspan="999">Inline text</td>
    </tr>
  </tfoot>
</table>

Footer with ds-text content

html
Copy 
<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>
  <tfoot>
    <tr>
      <td colspan="999">
        <div class="ds-text">Text element</div>
      </td>
    </tr>
  </tfoot>
</table>

Footer with button element

html
Copy 
<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>
  <tfoot>
    <tr>
      <td colspan="999">
        <button type="button" class="ds-button --plain --icon-plus">
          <span>Button text</span>
        </button>
      </td>
    </tr>
  </tfoot>
</table>

No items

When a filter or the default state of a table has no rows, use a td with colspan="999" to display a temporary message.

For persistent messages such as “Add a row” see Footer

html
Copy 
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="999">No items found</td>
    </tr>
  </tbody>
</table>

Headers

Multiple rows

Table headers may contain multiple rows.

html
Copy 
<table class="ds-datatable --embedded">
  <thead>
    <tr>
      <th>A</th>
      <th>A</th>
      <th>A</th>
      <th>A</th>
    </tr>
    <tr>
      <th>B</th>
      <th>B</th>
      <th>B</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Multiple columns

Table headers may span multiple columns using the standard colspan attribute.

html
Copy 
<table class="ds-datatable --embedded">
  <thead>
    <tr>
      <th colspan="2">A</th>
      <th>A</th>
      <th>A</th>
    </tr>
    <tr>
      <th>B</th>
      <th>B</th>
      <th>B</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Header column styling

html
Copy 
<table class="ds-datatable --embedded">
  <thead class="--sticky">
    <tr>
      <th colspan="2">A</th>
      <th class="--column">A</th>
      <th class="--column">A</th>
    </tr>
    <tr>
      <th>B</th>
      <th>B</th>
      <th class="--column">B</th>
      <th class="--column">B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Columns

Column alignment

Adding --center or --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

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

Column styling

html
Copy 
<table class="ds-datatable --embedded">
  <thead>
    <tr>
      <th>B</th>
      <th>B</th>
      <th class="--column">B</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td class="--column">Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td class="--column">Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td class="--column">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Column sorting

For column sorting, in the th use a button with ds-button --label and the recommended icon modifiers shown below.

Sorting of the column data requires additional javascript

Button styled as column label

html
Copy 
...
<!-- Default/Unsorted: --icon-arrows-top-bottom -->
<!-- Sorted Ascending: --icon-arrows-bottom -->
<!-- Sorted Descending: --icon-arrows-top -->
<th>
  <button class="ds-button --label">
    <span>Label</span> <i class="ds-icon --tiny --icon-arrows-top-bottom"></i>
  </button>
</th>
...

Example showing the various column sorting buttons

html
Copy 
<table class="ds-datatable">
  <thead>
    <tr>
      <th>
        <button class="ds-button --label">
          <span>Default/Unsorted</span>
          <i class="ds-icon --tiny --icon-arrows-top-bottom"></i>
        </button>
      </th>
      <th>
        <button class="ds-button --label">
          <span>Sorted Ascending</span>
          <i class="ds-icon --tiny --icon-arrow-bottom"></i>
        </button>
      </th>
      <th>
        <button class="ds-button --label">
          <span>Sorted Descending</span>
          <i class="ds-icon --tiny --icon-arrow-top"></i>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content longer</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content longer</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Column widths

By default the columns will be sized using html tables automatic sizing. There are three options which can be applied to control this:

Min

All thead tr th with the class --min 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.

html
Copy 
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="--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>
Max

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

html
Copy 
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th class="--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>
First min

The contents of the first column will not wrap, and will be the minimum width of the content

html
Copy 
<table class="ds-datatable --first-min">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content one</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>
    <tr>
      <td>Content two</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>

Global width classes

ds-datatable supports global width classes.

To set the width of a column, add the width class to the appropriate thead > th.

The th content width will limit the minimum column width.

The total widths of the th elements will determine the minimum width of the table.

Some td content will limit the minimum column width (for example form elements)

-w width

Table column widths will be the set width, widths are not responsive, they will force the table to overflow if neccessary.

html
Copy 
<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
-wmin min width

Table column widths will be the minimum width or wider if space permits.

html
Copy 
<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis
        vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida
        justo condimentum et.
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
-wmax max width

-wmax is not supported for table column widths

Column overflow

ds-datatable supports global --overflow classes.

Set the width of each columns td using the global size classes and the --overflow class.

--overflow will limit the content to a single line, and display an ellipsis if the content is wider than the column.

--overflow should be limited to cells with text-like content only.

html
Copy 
<table class="ds-datatable">
  <thead>
    <tr>
      <th>One</th>
      <th class="--20-w">Two</th>
      <th class="--50-w-pc">Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content one</td>
      <td class="--20-w --overflow">
        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 class="--50-w-pc --overflow">
        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>
    <tr>
      <td>Content two</td>
      <td class="--20-w --overflow">
        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 class="--50-w-pc --overflow">
        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>

Row spacing

Compact

html
Copy 
<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.

html
Copy 
<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

A datatable can be triggered to display a loading state - where the datatable contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the datatable.

Additional options are available using Message state

Default

html
Copy 
<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>

Alternative loading-refresh icon

html
Copy 
<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>

Custom icon by adding any icon class

html
Copy 
<table class="ds-datatable --loading --icon-radar">
  <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>

Message state

Message state extends and can be used with Loading state. If a datatable has a data-attribute data-ds-message the datatable contents are hidden, and replaced by an icon and the text of the data-ds-message.

html
Copy 
<table class="ds-datatable" data-ds-message="Message text">
  <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 with a message

html
Copy 
<table class="ds-datatable --loading" data-ds-message="Message text">
  <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>

You can set a custom icon

html
Copy 
<table class="ds-datatable --icon-rocket" data-ds-message="Message text">
  <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>

You can set a custom icon, with the loading state animation

html
Copy 
<table
  class="ds-datatable --loading --icon-compass"
  data-ds-message="Message text"
>
  <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>

Sticky

The table header thead can be made sticky by adding the class --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 ds-datatable in the example below has a parent element with --20-h to limit the height of the container forcing the contents to overflow and scroll. Read more about the Sizing classes.

Datatable with a sticky header and its parent container set to 200px in height

html
Copy 
<div class="--20-h">
  <table class="ds-datatable ">
    <thead class="--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>

First column

The first column can be made sticky by adding the class --pin-first to the ds-datatable. The effect is only apparent if the datatable is wider than it’s parent container.

Datatable with a sticky header and its parent container set to 200px in height

html
Copy 
<div class="--20-h">
  <table class="ds-datatable --embedded --pin-first ">
    <thead class="--sticky">
      <tr>
        <th>Heading one</th>
        <th>Heading two</th>
        <th>Heading three</th>
        <th>Heading four</th>
        <th>Heading five</th>
        <th>Heading six</th>
        <th>Heading seven</th>
        <th>Heading eight</th>
        <th>Heading nine</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content Content Content Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content Content Content Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content Content Content Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content Content Content Content</td>
        <td>Content</td>
        <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.

Resize the example below to see responsive support

html
Copy 
<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>

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.

html
Copy 
<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>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Plain

html
Copy 
<table class="ds-datatable --plain">
  <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>

Tests

Mixed form content

Mixed text/image content

Mixed content with default display

html
Copy 
<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-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="assets/sample-pattern.png" />
      </td>

      <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="assets/sample-pattern.png" />
      </td>

      <td>
        <input class="ds-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

html
Copy 
<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-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="assets/sample-pattern.png" />
      </td>

      <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="assets/sample-pattern.png" />
      </td>

      <td>
        <input class="ds-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

html
Copy 
<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

html
Copy 
<table class="ds-datatable --striped --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

html
Copy 
<table class="ds-datatable --striped --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 --alert --icon-online">
          <span>Button label</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Highlight row in embedded datatable

html
Copy 
<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 class="--success">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="--highlight --alert">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Embedded style with responsive support

html
Copy 
<table class="ds-datatable --embedded">
  <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">
        <i class="ds-icon --xxsmall --color-green --icon-online-solid"></i>
        <span class="ds-text --success">Active</span>
        <span class="ds-tag --small --success">online</span>
      </td>
      <td data-label="Heading two">Content</td>
      <td data-label="Heading three">Content</td>
    </tr>
    <tr data-label>
      <td data-label="Heading one">
        <i class="ds-icon --xxsmall --color-green --icon-online-solid"></i>
        <span class="ds-text --success">Active</span>
        <span class="ds-tag --small --success">online</span>
      </td>
      <td data-label="Heading two">
        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 data-label="Heading three">Content</td>
    </tr>
  </tbody>
</table>

Multiple highlighted rows

html
Copy 
<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 class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Embedded style multiple highlighted rows

html
Copy 
<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 class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="--highlight">
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Multiple row header, colspan, sticky header

html
Copy 
<div class="--20-h">
  <table class="ds-datatable --embedded">
    <thead class="--sticky">
      <tr>
        <th colspan="2"></th>
        <th class="--column" colspan="2">A</th>
      </tr>
      <tr>
        <th>B</th>
        <th>B</th>
        <th class="--column">B</th>
        <th class="--column">B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td class="--column">Content</td>
        <td class="--column">Content</td>
      </tr>
    </tbody>
  </table>
</div>