Pixelstrap - Admin Document

Tables

Bootstrap basic table Preview link

#	First Name	Last Name	Username	Role	Country
1	Alexander	Orton	@mdorton	Admin	USA
2	John Deo	Deo	@johndeo	User	USA
3	Randy Orton	the Bird	@twitter	admin	UK
4	Randy Mark	Ottandy	@mdothe	user	AUS
5	Ram Jacob	Thornton	@twitter	admin	IND

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Country</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alexander</td>
<td>Orton</td>
<td>@mdorton</td>
<td>Admin</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">2</th>
<td>John Deo</td>
<td>Deo</td>
<td>@johndeo</td>
<td>User</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Randy Orton</td>
<td>the Bird</td>
<td>@twitter</td>
<td>admin</td>
<td>UK</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Randy Mark</td>
<td>Ottandy</td>
<td>@mdothe</td>
<td>user</td>
<td>AUS</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Ram Jacob</td>
<td>Thornton</td>
<td>@twitter</td>
<td>admin</td>
<td>IND</td>
</tr>
</tbody>
</table>
</div>

Sizing table Preview link

You have to change only table sizing class.you can use table-*(sm,lg,xl,xs) class

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<div class="table-responsive">
 <table class="table table-sm">
  <thead>
   <tr>
    <th scope="col">#</th>
    <th scope="col">First</th>
    <th scope="col">Last</th>
    <th scope="col">Handle</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
   </tr>
   <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </table>
</div>

Border tables Preview link

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<div class="table-responsive">
 <table class="table table-border-vertical">
  <thead>
   <tr>
    <th scope="col">#</th>
    <th scope="col">First</th>
    <th scope="col">Last</th>
    <th scope="col">Handle</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
   </tr>
   <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </table>
</div>

Styling table Preview link

You can change only table color class for particular tr, tbody, thead, table.you can use table-* (primary, secondary,success,info,warning,danger,light)or bg-*(template colors) class

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Bird	@twitter

<div class="table-responsive">
 <table class="table table-primary">
  <thead>
   <tr>
    <th scope="col">#</th>
    <th scope="col">First</th>
    <th scope="col">Last</th>
    <th scope="col">Handle</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
   </tr>
   <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td>Larry the Bird</td>
    <td>Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </table>
</div>

Datatable Offical link Preview link

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750

<table class="display" id="basic-2">
<thead>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
  </tr>
  <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
  </tr>
</tbody>
</table>

To use datatable you have to add the following script tag

<script src="../assets/datatable/datatables/jquery.dataTables.min.js" ></script>
<script src="../assets/datatable/datatable/datatables/datatable.custom.js" ></script>

You have to add the following style css file for the datatable design

<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/datatables.css">

Extension datatables Offical link Preview link

To use extension datatable you have to add the following script files

<!--Datatable extension js-->
<script src="../assets/js/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.buttons.min.js"></script>
<script src="../assets/js/datatable-extension/jszip.min.js"></script>
<script src="../assets/js/datatable-extension/pdfmake.min.js"></script>
<script src="../assets/js/datatable-extension/vfs_fonts.js"></script>
<script src="../assets/js/datatable-extension/dataTables.autoFill.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.select.min.js"></script>
<script src="../assets/js/datatable-extension/buttons.print.min.js"></script>
<script src="../assets/js/datatable-extension/buttons.html5.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.bootstrap4.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.responsive.min.js"></script>
<script src="../assets/js/datatable-extension/responsive.bootstrap4.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.keyTable.min.js"></script>
<script src="../assets/js/datatable-extension/custom.js"></script>

You have to add the following style css file for the datatable design

<!--JSGrid css-->
<link rel="stylesheet" type="text/css" href="../assets/css/datatables.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/datatable-extension.css">