Tables

Toggle Checkboxes

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

Toggle all	Employee	Active	Earnings
Check	Kalum Atherton	3 days ago	$12,402
Check	Helen Mcdaniel	2 days ago	$48,108
Check	Karim Hicks	1 hour ago	$11,802
Check	Clifford Burgess	2 hours ago	$84,401

<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 documentation for a full list of options.

Employee	Active	Earnings
Kalum Atherton	3 days ago	$12,402
Helen Mcdaniel	2 days ago	$48,108
Karim Hicks	1 hour ago	$11,802
Clifford Burgess	2 hours ago	$84,401

<!-- 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 documentation for a full list of options.

Employee name Employee title
Jenell D. Matney Founder and CEO
Sherri J. Cardenas Software Engineer
Joseph S. Ferland Web Designer
Bryan K. Davis Web Developer

<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>