Table

The standard table is unstyled. Use .styled to apply the Gravity styling. Tables can be sorted, paged or searched.

You can also place a table inside a .card element.

Interactive table features utilise DataTables. Please include the source file on any pages that require interactive tables.

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Click the headings on the table below to sort the table.

First Name Last Name Email Actions
David Bowman david@usegravity.app Delete Edit
Hal hal@usegravity.app Delete Edit
<table class="styled">
  <thead>
    <tr>
      <td class="sort asc">First Name</td>
      <td class="sort dsc">Last Name</td>
      <td>Email</td>
      <td>Actions</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Bowman</td>
      <td>david@usegravity.app</td>
      <td class="actions">
        <a href="#" class="btn-delete ico ico-dark ico-delete" title="Delete">Delete</a>
        <a href="#" class="btn-edit ico ico-dark ico-pencil" title="Edit">Edit</a>
      </td>
    </tr>
    <tr>
      <td>Hal</td>
      <td></td>
      <td>hal@usegravity.app</td>
      <td class="actions">
        <a href="#" class="btn-delete ico ico-dark ico-delete" title="Delete">Delete</a>
        <a href="#" class="btn-edit ico ico-dark ico-pencil" title="Edit">Edit</a>
      </td>
    </tr>
 </tbody>
 </table>

Filtering, Paging & Searching Tables

Use the table initializer method to active interactive features.

// table: class name of the table
// paging: true or false – toggles paging for large tables
// search: true or false - enables table searching
// sort: true or false – enables table row sorting

initTable(table, paging, search, sort)

Dynamic Table Editing

You can dynamically modify your tables on the fly using Javascript.

Adding Table Rows

// table: class name of the table
// templateID: id of the javascript template containing the row markup to be added

addTableRow(table, templateID)

Updating Table Rows

// trId: data-id of the table row to be updated
// values: array of values to be added to the table row cells
updateTableRow(trId, values)

Delete Table Row

// trId: data-id of the table row to be deleted
deleteTableRow(trId)