Table component

We do not use foundation tables, which heavily overrides table tag.
Instead we implemented a lightweight table, which has to be extended
using classes

You can implement a simple “string contain” search using data-table,
data-search-table and data-searchable tags

Use data-highlight to highlight columns which contain query

Examples

html

<input type="text" data-search-table="example-table" placeholder="search..." />
<table data-table="example-table" data-highlight>
  <thead>
    <tr>
      <th data-searchable>Example Column 1</th>
      <th data-searchable>Column two</th>
      <th>Not searchable</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>You may try</td>
      <td>to search this table</td>
      <td>no search</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>dolor blabla</td>
      <td>still no search</td>
    </tr>
    <tr>
      <td>Polynorm</td>
      <td>Software AG</td>
      <td>you shall not search</td>
    </tr>
  </tbody>
</table>

html

<table class="rows">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td class="has-buttons">
        <a href="#" class="button clear"><i class="icon icon-edit"></i></a>
        <a href="#" class="button clear"><i class="icon icon-delete"></i></a>
      </td>
    </tr>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td class="has-buttons">
        <a href="#" class="button clear"><i class="icon icon-edit"></i></a>
        <a href="#" class="button clear"><i class="icon icon-delete"></i></a>
      </td>
    </tr>
  </tbody>
</table>

html

<table class="rows">
  <tbody>
    <tr>
      <th>Col 1</th>
      <td>Col 2</td>
    </tr>
    <tr>
      <th>Col 1</th>
      <td>Col 2</td>
    </tr>
  </tbody>
</table>