1. Home
  2. Components
  3. Tables

Tables

Toggle Checkboxes

A tiny plugin which adds the ability to toggle all checkboxes within a table.

Employee Active Earnings
Avatar
Kalum Atherton
3 days ago $12,402 more_vert
Avatar
Helen Mcdaniel
2 days ago $48,108 more_vert
Avatar
Karim Hicks
1 hour ago $11,802 more_vert
Avatar
Clifford Burgess
2 hours ago $84,401 more_vert
<table class="table">
  <thead>
    <tr>
      <th>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input js-toggle-check-all" data-target="#table01" id="customCheckAll">
          <label class="custom-control-label" for="customCheckAll">
            <span class="text-hide">Toggle all</span>
          </label>
        </div>
      </th>
    </tr>
  </thead>
  <tbody id="table01">
    <tr class="selected">
      <td>
        <div class="custom-control custom-checkbox">
          <input id="customCheck1" type="checkbox" class="custom-control-input js-check-selected-row" checked="">
          <label class="custom-control-label" for="customCheck1">
            <span class="text-hide">Check</span>
          </label>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Search

Add search functionality to your tables with List.js. Please read the official plugin documentationfor a full list of options.

Employee Active Earnings
Kalum Atherton 3 days ago &dollar;12,402 more_vert
Helen Mcdaniel 2 days ago &dollar;48,108 more_vert
Karim Hicks 1 hour ago &dollar;11,802 more_vert
Clifford Burgess 2 hours ago &dollar;84,401 more_vert
<!-- Wrapper -->
<div class="table-responsive" data-toggle="lists" data-lists-values='["name"]'>

  <!-- Search -->
  <div class="search-form search-form--light mb-3">
    <input type="text" class="form-control search" placeholder="Search">
    <button class="btn" type="button" role="button"><i class="material-icons">search</i></button>
  </div>

  <!-- Table -->
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">John Doe</td>
        <td>31</td>
      </tr>
    </tbody>
  </table>
</div>

Sort Columns

Add sorting functionality to your tables with by List.js. Please read the official plugin documentationfor a full list of options.

Employee nameEmployee title
Avatar
Jenell D. Matney
Founder and CEO
more_vert
Avatar
Sherri J. Cardenas
Software Engineer
more_vert
Avatar
Joseph S. Ferland
Web Designer
more_vert
Avatar
Bryan K. Davis
Web Developer
more_vert
<div class="table-responsive" data-toggle="lists" data-lists-values='["name", "age"]'>
  <table class="table">
    <thead>
      <tr>
        <th>
          <a href="javascript:void(0)" class="sort" data-sort="name">Name</a>
        </th>
        <th>
          <a href="javascript:void(0)" class="sort" data-sort="name">Age</a>
        </th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">John Doe</td>
        <td class="age">31</td>
      </tr>
    </tbody>
  </table>
</div>