Footable
Footable
| ID | First Name | Last Name | Mobile No | Job Title | Date of Birth |
|---|---|---|---|---|---|
| 1 |
 Genelia Deshmukh
|
genelia@gmail.com | +123 112 789 | Designer | February 26th 1966 |
| 2 |
 Shraddha Kapoor
|
gov12inda@gmail.com | +345 456 125 | Accountant | February 26th 1966 |
| 3 |
 Akshay Kumar
|
g12enelia@gmail.com | +154 456 789 | Developer | February 26th 1966 |
| 4 |
 Genelia Deshmukh
|
abc@gmail.com | +123 456 163 | Designer | March 29th 1966 |
| 5 |
 Steve Jobs
|
shraddha@gmail.com | +123 420 789 | Theme Developer | September 22nd 1964 |
| 6 |
Anil Kapoor
|
gamw12@gmail.com | +123 960 789 | Designer | August 4th 1991 |
| 7 |
 Priyank Deshmukh
|
shr123@gmail.com | +123 456 700 | Hacker | November 20th 1979 |
| 8 |
 Genelia Deshmukh
|
developer@gmail.com | +123 700 789 | Designer | April 7th 1969 |
Code Here:
<div class="table-responsive">
<table id="demo-foo-row-toggler" class="table table-bordered" data-bs-toggle-column="first">
<thead>
<tr>
<th data-breakpoints="xs">ID</th>
<th>First Name</th>
<th>Last Name</th>
<th data-breakpoints="xs sm">Mobile No</th>
<th data-breakpoints="xs">Job Title</th>
<th data-breakpoints="all" data-title="DOB">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td>1</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user" width="40" class="img-circle" /> Genelia Deshmukh</a>
</td>
<td>genelia@gmail.com</td>
<td>+123 112 789</td>
<td><span class="label label-danger">Designer</span> </td>
<td>February 26th 1966</td>
</tr>
<tr>
<td>2</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user" width="40" class="img-circle" /> Shraddha Kapoor</a>
</td>
<td>gov12inda@gmail.com</td>
<td>+345 456 125</td>
<td><span class="label label-success">Accountant</span></td>
<td>February 26th 1966</td>
</tr>
<tr>
<td>3</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user" width="40" class="img-circle" /> Akshay Kumar</a>
</td>
<td>g12enelia@gmail.com</td>
<td>+154 456 789</td>
<td><span class="label label-warning">Developer</span> </td>
<td>February 26th 1966</td>
</tr>
<tr>
<td>4</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user" width="40" class="img-circle" /> Genelia Deshmukh</a>
</td>
<td>abc@gmail.com</td>
<td>+123 456 163</td>
<td><span class="label label-danger">Designer</span> </td>
<td>March 29th 1966</td>
</tr>
<tr>
<td>5</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user" width="40" class="img-circle" /> Steve Jobs</a>
</td>
<td>shraddha@gmail.com</td>
<td>+123 420 789</td>
<td><span class="label label-success">Theme Developer</span> </td>
<td>September 22nd 1964</td>
</tr>
<tr>
<td>6</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user" width="40" class="img-circle" /> Anil Kapoor</a>
</td>
<td>gamw12@gmail.com</td>
<td>+123 960 789</td>
<td><span class="label label-inverse">Designer</span> </td>
<td>August 4th 1991</td>
</tr>
<tr>
<td>7</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user" width="40" class="img-circle" /> Priyank Deshmukh</a>
</td>
<td>shr123@gmail.com</td>
<td>+123 456 700</td>
<td><span class="label label-danger">Hacker</span> </td>
<td>November 20th 1979</td>
</tr>
<tr>
<td>8</td>
<td>
<a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user" width="40" class="img-circle" /> Genelia Deshmukh</a>
</td>
<td>developer@gmail.com</td>
<td>+123 700 789</td>
<td><span class="label label-success">Designer</span> </td>
<td>April 7th 1969</td>
</tr>
</tbody>
</table>
</div>
Required Files For Footable Here
<!-- CSS Here -->
<link href="../assets/node_modules/footable/css/footable.bootstrap.min.css" rel="stylesheet">
<!-- Javascript Here -->
<script src="../assets/node_modules/moment/moment.js" type="text/javascript"></script>
<script src="../assets/node_modules/footable/js/footable.min.js"></script>