Elite Admin

Footable

Footable

ID First Name Last Name Mobile No Job Title Date of Birth
1 user Genelia Deshmukh genelia@gmail.com +123 112 789 Designer February 26th 1966
2 user Shraddha Kapoor gov12inda@gmail.com +345 456 125 Accountant February 26th 1966
3 user Akshay Kumar g12enelia@gmail.com +154 456 789 Developer February 26th 1966
4 user Genelia Deshmukh abc@gmail.com +123 456 163 Designer March 29th 1966
5 user Steve Jobs shraddha@gmail.com +123 420 789 Theme Developer September 22nd 1964
6 user Anil Kapoor gamw12@gmail.com +123 960 789 Designer August 4th 1991
7 user Priyank Deshmukh shr123@gmail.com +123 456 700 Hacker November 20th 1979
8 user 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-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>