Skip to main content

Tables v0.1.7+ HelixUI v0.1.7 or later required

Basic Table

Data Density
Options
Most popular Twitter accounts
Rank Name Handle Followers
1 Katy Perry @katyperry 100,381,853
2 Justin Beiber @justinbeiber 97,350,145
3 Barack Obama @BarackObama 91,387,642
Total 289,119,640 
<table class="{{cssClasses}}">...</table>

Selection Table

Use the .hxControl CSS class on table cells that contain a checkbox.

Most popular Twitter accounts
Rank Name Handle Followers
1 Katy Perry @katyperry 100,381,853
2 Justin Beiber @justinbeiber 97,350,145
3 Barack Obama @BarackObama 91,387,642
Total 289,119,640 
<table class="hxTable">
  <caption>Most popular Twitter accounts</caption>
  <thead>
    <tr>
      <th class="hxControl">
        <hx-checkbox></hx-checkbox>
      </th>
      <th>Rank</th>
      <th>Name</th>
      <th>Handle</th>
      <th class="hxRight">Followers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="hxControl">
        <hx-checkbox></hx-checkbox>
      </th>
      <td>1</td>
      <td>Katy Perry</td>
      <td>
        <a href="https://twitter.com/katyperry" target="_blank">@katyperry</a>
      </td>
      <td class="hxRight">100,381,853</td>
    </tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tfoot>...</tfoot>
</table>

Action Table

Use the .hxControl CSS class on table cells that contain a cog menu.

Most popular Twitter accounts
Rank Name Handle Followers
Action 1 Action 2 Action 3 1 Katy Perry @katyperry 100,381,853
Action 1 Action 2 Action 3 2 Justin Beiber @justinbeiber 97,350,145
Action 1 Action 2 Action 3 3 Barack Obama @BarackObama 91,387,642
Total 289,119,640 
<table class="hxTable">
  <caption>Most popular Twitter accounts</caption>
  <thead>
    <tr>
      <th class="hxControl"></th>
      <th>Rank</th>
      <th>Name</th>
      <th>Handle</th>
      <th class="hxRight">Followers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="hxControl">
        <hx-disclosure aria-controls="menu-1">
          <hx-icon type="cog"></hx-icon>
        </hx-disclosure>
        <hx-menu id="menu-1">
          <hx-menuitem>Action 1</hx-menuitem>
          <hx-menuitem>Action 2</hx-menuitem>
          <hx-menuitem>Action 3</hx-menuitem>
        </hx-menu>
      </td>
      <td>1</td>
      <td>Katy Perry</td>
      <td>
        <a href="https://twitter.com/katyperry" target="_blank">@katyperry</a>
      </td>
      <td class="hxRight">100,381,853</td>
    </tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" class="hxRight">Total</td>
      <td class="hxRight">289,119,640</td>
    </tr>
  </tfoot>
</table>