<table is="coral-table">
  <tbody is="coral-table-body">
    <tr is="coral-table-row">
      <td is="coral-table-cell" style="text-align:center">
        <p>There are no saved activities in your account yet.</p>
        <p>Get started now.</p>
      </td>
    </tr>
  </tbody>
</table>

<table is="coral-table">
  <thead is="coral-table-head">
    <tr is="coral-table-row">
      <th is="coral-table-headercell"></th>
      <th is="coral-table-headercell">Activities</th>
      <th is="coral-table-headercell">Numbers</th>
      <th is="coral-table-headercell">Date</th>
      <th is="coral-table-headercell"></th>
    </tr>
  </thead>
  <tbody is="coral-table-body" divider="cell">
    <tr is="coral-table-row">
      <th is="coral-table-headercell">Left Label</th>
      <td is="coral-table-cell">Alpha</td>
      <td is="coral-table-cell">23,857</td>
      <td is="coral-table-cell">January 28, 2012</td>
      <th is="coral-table-headercell">Right Label</th>
    </tr>
    <tr is="coral-table-row">
      <th is="coral-table-headercell">Left Label</th>
      <td is="coral-table-cell">Beta</td>
      <td is="coral-table-cell">20,398</td>
      <td is="coral-table-cell">December 1, 2011</td>
      <th is="coral-table-headercell">Right Label</th>
    </tr>
    <tr is="coral-table-row">
      <th is="coral-table-headercell">Left Label</th>
      <td is="coral-table-cell">Charlie</td>
      <td is="coral-table-cell">3,498</td>
      <td is="coral-table-cell">February 15, 2012</td>
      <th is="coral-table-headercell">Right Label</th>
    </tr>
  </tbody>
</table>

<table is="coral-table" style="height:200px">
  <thead is="coral-table-head" sticky>
    <tr is="coral-table-row">
      <th is="coral-table-headercell">Activities</th>
      <th is="coral-table-headercell">Numbers</th>
      <th is="coral-table-headercell">Date</th>
    </tr>
  </thead>
  <tbody is="coral-table-body">
    <tr is="coral-table-row">
      <td is="coral-table-cell">Alpha</td>
      <td is="coral-table-cell">23,857</td>
      <td is="coral-table-cell">January 28, 2012</td>
    </tr>
    <tr is="coral-table-row">
      <td is="coral-table-cell">Beta</td>
      <td is="coral-table-cell">20,398</td>
      <td is="coral-table-cell">December 1, 2011</td>
    </tr>
    <tr is="coral-table-row">
      <td is="coral-table-cell">Charlie</td>
      <td is="coral-table-cell">3,498</td>
      <td is="coral-table-cell">February 15, 2012</td>
    </tr>
    <tr is="coral-table-row">
      <td is="coral-table-cell">Delta</td>
      <td is="coral-table-cell">20,398</td>
      <td is="coral-table-cell">May 16, 2014</td>
    </tr>
    <tr is="coral-table-row">
      <td is="coral-table-cell">Echo</td>
      <td is="coral-table-cell">1,247</td>
      <td is="coral-table-cell">August 12, 2010</td>
    </tr>
    <tr is="coral-table-row">
      <td is="coral-table-cell">Foxtrot</td>
      <td is="coral-table-cell">90,034</td>
      <td is="coral-table-cell">September 15, 2000</td>
    </tr>
  </tbody>
</table>

Table exposes the coral-table-scroll attribute that allows in sticky mode to define the table scrolling container max-height. This is particularly useful if the table contains dynamic content.

Sortable table columns

In this example, the cell value property is used to compare cells during a column sort. If not set, the sorting will be performed on the cell content. The content will be parse accordingly based on the column's sortabletype property.

Sorting columns triggers the coral-table:beforecolumnsort and coral-table:columnsort events.