Skip to main content
MybringDesign System

Select and click

Row level indication

Selected rows

Rows containing a checked checkbox will automatically get a bakground colour. The shipment cells in the example contain the label. If you have a select all box, look at implementing the indeterminate state.

Select shipment Shipment Recipient Sent
Acme Industries 14.07.2016 12.56
Burgers and Beauty as 26.06.2016 14.12
Rent-A-Cat Co. 02.05.2016 11.38
HTML 
<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="selected" value="987654321" />
      </td>
      <td>
        <label for="row1">987654321</label>
      </td>
      <td>Acme Industries</td>
      <td>14.07.2016 12.56</td>
    </tr>
    <tr>
      <td>
        <input checked type="checkbox" id="row2" name="selected" value="123456789" />
      </td>
      <td>
        <label for="row2">123456789</label>
      </td>
      <td>Burgers and Beauty as</td>
      <td>26.06.2016 14.12</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="row3" name="selected" value="456789123" />
      </td>
      <td>
        <label for="row3">456789123</label>
      </td>
      <td>Rent-A-Cat Co.</td>
      <td>02.05.2016 11.38</td>
    </tr>
  </tbody>
</table>

Clickable rows

Making entire rows clickable should generally be avoided because it’s unclear that the rows can be clicked and what will happen. Is it a link somewhere or is the row selected? It also requires extra code and work to be accessible. Always avoid nested interactions and creating patterns that are unclear about where clickable areas begin and end. If all those concerns are out of the way and there is only one obvious action on it, use mb-table__row--clickable on the row element to get a hover style. And if the row is meant to be a link, and not a selection function, 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
HTML 
<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>