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	&dollar;12,402
Check	Helen Mcdaniel	2 days ago	&dollar;48,108
Check	Karim Hicks	1 hour ago	&dollar;11,802
Check	Clifford Burgess	2 hours ago	&dollar;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 documentationfor a full list of options.

Employee	Active	Earnings
Kalum Atherton	3 days ago	&dollar;12,402
Helen Mcdaniel	2 days ago	&dollar;48,108
Karim Hicks	1 hour ago	&dollar;11,802
Clifford Burgess	2 hours ago	&dollar;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 documentationfor 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>