Section 10 #Tables
Tables

Default table. Use the pui-table class to get the table styles applied.

Attach any click event directly to the <th> for a larger click target.

These tables are responsive. They get the mobile view below the mobile breakpoint. You need to add the data-label="{th - name}" to the corresponding <td>. See the markup below.

Turn row hover off by adding pui-table--no-hover

Sometimes you don't want a resposive table? just add unresponsive to pui-table

option one option two
Desc Pork Buns Pork Buns
price $5.00 $9.00
qty 5 2

Example:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Markup: 

<table class="pui-table">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Alfreds Futterkiste</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Maria Anders</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">Germany</span>
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Centro comercial Moctezuma</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Francisco Chang</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">Mexico</span>
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Ernst Handel</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Roland Mendel</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">Austria</span>
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Island Trading</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Helen Bennett</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">UK</span>
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Laughing Bacchus Winecellars</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Yoshi Tannamuri</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">Canada</span>
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        <span class="td-inner">Magazzini Alimentari Riuniti</span>
      </td>
      <td data-label="Contact">
        <span class="td-inner">Giovanni Rovelli</span>
      </td>
      <td data-label="Country">
        <span class="td-inner">Italy</span>
      </td>
    </tr>
  </tbody>
</table>
Source: sass/_tables.scss, line 8