Tables

Toggle Checkboxes

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

Toggle all	Employee	Status	Activity	Earnings
Check	Michael Smith lorna_kirlin@nora.biz	Admin	3 days ago	$12,402
Check	CS Connie Smith paolo.zieme@gmail.com	User	1 week ago	$1,943
Check	John Connor vida_glover@gmail.com	Manager	2 weeks ago	$1,401
Check	LB Laza Bogdan annabell.kris@yahoo.com	Admin	3 weeks ago	$22,402

<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	Status	Activity	Earnings
Michael Smith lorna_kirlin@nora.biz	Admin	3 days ago	$12,402
Connie Smith paolo.zieme@gmail.com	User	1 week ago	$1,943
John Connor vida_glover@gmail.com	Manager	2 weeks ago	$1,401
Laza Bogdan annabell.kris@yahoo.com	Admin	3 weeks ago	$22,402

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

Huma

Huma is a beautifully crafted user interface for modern Business Admin Web Applications, with examples for many pages needed for Customer Relationship Management, Enterprise Resource Planning, Human Resources, Content Management System, Project Management, Tasks, eCommerce, Messaging and Account Management.

Follow us

English arrow_drop_down

Terms Privacy policy

Toggle Checkboxes

Search

Sort Columns

Dashboards

Enterprise

HR

Productivity

eCommerce

Messaging

Content