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>