Row state and action

Indication on row level

Clickable rows

Using the entire row as a clickable area is OK if there is only one obvious action on it. This is to avoid nested interactions and confusion about where clickable areas begin and end. In the rare case of clickable rows, you set mb-table__row--clickable on the table row element. Only if the row is a link, and not a selection function, should you also use the cpointer class as well.

Reference

mb-table__row--clickable
cpointer

Shipment	Recipient	Sent
987654321	Acme Industries	14.07.2016 12.56
123456789	Burgers and Beauty as	26.06.2016 14.12
456789123	Rent-A-Cat Co.	02.05.2016 11.38

<table class="mb-table">
<thead>
  <tr>
    <th scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
  </tr>
</thead>
<tbody>
  <tr class="mb-table__row--clickable">
    <td>987654321</td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
  </tr>
  <tr class="mb-table__row--clickable">
    <td>123456789</td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
  </tr>
  <tr class="mb-table__row--clickable">
    <td>456789123</td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
  </tr>
</tbody>
</table>

Selected and inactive rows

Use the relevant classes on rows that are either selected or inactive/disabled.

Reference

mb-table__row--selected
mb-table__row--inactive

Select shipment	Shipment	Recipient	Sent
987654321	987654321	Acme Industries	14.07.2016 12.56
123456789	123456789	Burgers and Beauty as	26.06.2016 14.12
456789123	456789123	Rent-A-Cat Co.	02.05.2016 11.38

<table class="mb-table">
<thead>
  <tr>
    <th class="screen-reader-text" scope="col">Select shipment</th>
    <th scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <input type="checkbox" id="row1" name="row1" /><label
        for="row1"
        class="dn"
        >987654321</label
      >
    </td>
    <td>987654321</td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
  </tr>
  <tr class="mb-table__row--selected">
    <td>
      <input checked type="checkbox" id="row2" name="row2" /><label
        for="row2"
        class="dn"
        >123456789</label
      >
    </td>
    <td>123456789</td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
  </tr>
  <tr class="mb-table__row--inactive">
    <td>
      <input disabled type="checkbox" id="row3" name="row3" /><label
        for="row3"
        class="dn"
        >456789123</label
      >
    </td>
    <td>456789123</td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
  </tr>
</tbody>
</table>