Table

Default Table
1 John Doe Male
2 Jane Doe Female
3 Alice Smith Female
4 Bob Johnson Male
5 Charlie Brown Male
of 7
Showing 1 → 5 of 35
<table class="c-table">
  <thead>
    <tr>
      <th style="width: 160px">
        <button
          type="button"
          class="c-table-heading c-table-heading--sorted"
        >
          <span class="c-table-heading__label">Number</span>
          <span class="c-table-heading__icon">
            <!-- SVG element -->
          </span>
        </button>
      </th>
      <th>
        <button
          type="button"
          class="c-table-heading"
        >
          <span class="c-table-heading__label">
            First name
          </span>
        </button>
      </th>
      <th>
        <button
          type="button"
          class="c-table-heading"
        >
          <span class="c-table-heading__label">
            Last name
          </span>
        </button>
      </th>
      <th>
        <button
          type="button"
          class="c-table-heading c-table-heading--sorted"
        >
          <span class="c-table-heading__label">Sex</span>
          <span class="c-table-heading__icon">
            <!-- SVG element -->
          </span>
        </button>
      </th>
      <th style="width: 100px"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>Male</td>
      <td class="u-right">
        <button
          type="link"
          class="c-button c-button--link"
        >
          <span class="c-button__label">Choose…</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>Female</td>
      <td class="u-right">
        <button
          type="link"
          class="c-button c-button--link"
        >
          <span class="c-button__label">Choose…</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Alice</td>
      <td>Smith</td>
      <td>Female</td>
      <td class="u-right">
        <button
          type="link"
          class="c-button c-button--link"
        >
          <span class="c-button__label">Choose…</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Bob</td>
      <td>Johnson</td>
      <td>Male</td>
      <td class="u-right">
        <button
          type="link"
          class="c-button c-button--link"
        >
          <span class="c-button__label">Choose…</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>Charlie</td>
      <td>Brown</td>
      <td>Male</td>
      <td class="u-right">
        <button
          type="link"
          class="c-button c-button--link"
        >
          <span class="c-button__label">Choose…</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>
<div class="c-table-pagination">
  <div class="c-pagination">
    <div class="c-field-group">
      <div class="c-field-group c-field-group--merged">
        <button class="c-button c-button--icon-only">
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
        <button class="c-button c-button--icon-only">
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
      </div>
      <div class="c-field-group">
        <div
          class="c-textfield u-center c-textfield--width-tiny"
        >
          <input
            class="c-textfield__input"
            type="number"
            type="number"
            value="1"
          />
        </div>
        <div class="u-mx-4">of 7</div>
      </div>
      <div class="c-field-group c-field-group--merged">
        <button class="c-button c-button--icon-only">
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
        <button class="c-button c-button--icon-only">
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="c-table-pagination__records">
    Showing 1 &srarr; 5 of 35
  </div>
</div>

Compact Table

Number First name Last name Sex
1 John Doe Male
2 Jane Doe Female
3 Alice Smith Female 
<table class="c-table c-table--compact c-table--small-text">
  <thead>
    <tr>
      <th>Number</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Alice</td>
      <td>Smith</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Striped Table

Number First name Last name Sex
1 John Doe Male
2 Jane Doe Female
3 Alice Smith Female 
<table class="c-table c-table--striped">
  <thead>
    <tr>
      <th>Number</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Alice</td>
      <td>Smith</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Bordered Table

Number First name Last name Sex
1 John Doe Male
2 Jane Doe Female
3 Alice Smith Female 
<table class="c-table c-table--bordered">
  <thead>
    <tr>
      <th>Number</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Alice</td>
      <td>Smith</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Bordered Cells

Column Title Column Title Column Title Column Title
Item description 3 7 1 2
Item description 5 14 8
Item description 12 4 
<table class="c-table">
  <thead>
    <tr>
      <th></th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item description</td>
      <td class="c-table__cell--border-left">3</td>
      <td class="c-table__cell--border-left">7</td>
      <td class="c-table__cell--border-left">1</td>
      <td class="c-table__cell--border-left">2</td>
    </tr>
    <tr>
      <td>Item description</td>
      <td class="c-table__cell--border-left">5</td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left">14</td>
      <td class="c-table__cell--border-left">8</td>
    </tr>
    <tr>
      <td>Item description</td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left">12</td>
      <td class="c-table__cell--border-left">4</td>
      <td class="c-table__cell--border-left"></td>
    </tr>
  </tbody>
</table>

Horizontal Scrolling

Number First name Last name Sex First name Last name Sex First name Last name Sex First name Last name Sex First name Last name Sex First name Last name Sex
1 John Doe Male John Doe Male John Doe Male John Doe Male John Doe Male John Doe Male
2 Jane Doe Female Jane Doe Female Jane Doe Female Jane Doe Female Jane Doe Female Jane Doe Female
3 Alice Smith Female Alice Smith Female Alice Smith Female Alice Smith Female Alice Smith Female Alice Smith Female
4 Bob Johnson Male Bob Johnson Male Bob Johnson Male Bob Johnson Male Bob Johnson Male Bob Johnson Male
5 Charlie Brown Male Charlie Brown Male Charlie Brown Male Charlie Brown Male Charlie Brown Male Charlie Brown Male 
<div class="c-table-wrapper">
  <table class="c-table c-table--sticky-horizontal">
    <thead>
      <tr>
        <th>Number</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Sex</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
        <td>Jane</td>
        <td>Doe</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
        <td>Charlie</td>
        <td>Brown</td>
        <td>Male</td>
      </tr>
    </tbody>
  </table>
</div>

Clickable Table Rows

1 John Doe Male
2 Jane Doe Female
3 Alice Smith Female 
<table class="c-table">
  <tbody>
    <tr class="c-table__row--clickable">
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>Male</td>
    </tr>
    <tr class="c-table__row--clickable">
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>Female</td>
    </tr>
    <tr class="c-table__row--clickable">
      <td>3</td>
      <td>Alice</td>
      <td>Smith</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Table Sections

Column Title Column Title Column Title Column Title
Section Title
Item description 3 5 1 7
Item description 13 5 14 0
Section Title
Item description 2 6 2 9
Section Title
Item description 12 13 3 8 
<table class="c-table">
  <thead>
    <tr>
      <th></th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
      <th
        class="c-table__cell--border-left"
        style="width: 10rem;"
      >
        Column Title
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="c-table__row--section">
      <td>Section Title</td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
    </tr>
    <tr>
      <td>
        <a
          href="#"
          class="u-link"
        >
          Item description
        </a>
      </td>
      <td class="c-table__cell--border-left">3</td>
      <td class="c-table__cell--border-left">5</td>
      <td class="c-table__cell--border-left">1</td>
      <td class="c-table__cell--border-left">7</td>
    </tr>
    <tr>
      <td>
        <a
          href="#"
          class="u-link"
        >
          Item description
        </a>
      </td>
      <td class="c-table__cell--border-left">13</td>
      <td class="c-table__cell--border-left">5</td>
      <td class="c-table__cell--border-left">14</td>
      <td class="c-table__cell--border-left">0</td>
    </tr>
    <tr class="c-table__row--section">
      <td>Section Title</td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
    </tr>
    <tr>
      <td>
        <a
          href="#"
          class="u-link"
        >
          Item description
        </a>
      </td>
      <td class="c-table__cell--border-left">2</td>
      <td class="c-table__cell--border-left">6</td>
      <td class="c-table__cell--border-left">2</td>
      <td class="c-table__cell--border-left">9</td>
    </tr>
    <tr class="c-table__row--section">
      <td>Section Title</td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
      <td class="c-table__cell--border-left"></td>
    </tr>
    <tr>
      <td>
        <a
          href="#"
          class="u-link"
        >
          Item description
        </a>
      </td>
      <td class="c-table__cell--border-left">12</td>
      <td class="c-table__cell--border-left">13</td>
      <td class="c-table__cell--border-left">3</td>
      <td class="c-table__cell--border-left">8</td>
    </tr>
  </tbody>
</table>