Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

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