Datatable

Datatable example with datatable.js
with search, sort, pagination

This tailwind example is contributed by R.P Ketan, on 29-Jan-2023. Component is made with Tailwind v3.4.

Tailwind v3.4 26k 17

<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h2 class="text-2xl font-bold mb-4">Example Datatable</h2>
    <table id="example" class="table-auto w-full">
        <thead>
            <tr>
                <th class="px-4 py-2">Name</th>
                <th class="px-4 py-2">Position</th>
                <th class="px-4 py-2">Office</th>
                <th class="px-4 py-2">Age</th>
                <th class="px-4 py-2">Start date</th>
                <th class="px-4 py-2">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border px-4 py-2">Tiger Nixon</td>
                <td class="border px-4 py-2">System Architect</td>
                <td class="border px-4 py-2">Edinburgh</td>
                <td class="border px-4 py-2">61</td>
                <td class="border px-4 py-2">2011/04/25</td>
                <td class="border px-4 py-2">$320,800</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Garrett Winters</td>
                <td class="border px-4 py-2">Accountant</td>
                <td class="border px-4 py-2">Tokyo</td>
                <td class="border px-4 py-2">63</td>
                <td class="border px-4 py-2">2011/07/25</td>
                <td class="border px-4 py-2">$170,750</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Ashton Cox</td>
                <td class="border px-4 py-2">Junior Technical Author</td>
                <td class="border px-4 py-2">San Francisco</td>
                <td class="border px-4 py-2">66</td>
                <td class="border px-4 py-2">2009/01/12</td>
                <td class="border px-4 py-2">$86,000</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Cedric Kelly</td>
                <td class="border px-4 py-2">Senior Javascript Developer</td>
                <td class="border px-4 py-2">Edinburgh</td>
                <td class="border px-4 py-2">22</td>
                <td class="border px-4 py-2">2012/03/29</td>
                <td class="border px-4 py-2">$433,060</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Airi Satou</td>
                <td class="border px-4 py-2">Accountant</td>
                <td class="border px-4 py-2">Tokyo</td>
                <td class="border px-4 py-2">33</td>
                <td class="border px-4 py-2">2008/11/28</td>
                <td class="border px-4 py-2">$162,700</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Brielle Williamson</td>
                <td class="border px-4 py-2">Integration Specialist</td>
                <td class="border px-4 py-2">New York</td>
                <td class="border px-4 py-2">61</td>
                <td class="border px-4 py-2">2012/12/02</td>
                <td class="border px-4 py-2">$372,000</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Herrod Chandler</td>
                <td class="border px-4 py-2">Sales Assistant</td>
                <td class="border px-4 py-2">San Francisco</td>
                <td class="border px-4 py-2">59</td>
                <td class="border px-4 py-2">2012/08/06</td>
                <td class="border px-4 py-2">$137,500</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Herrod Chandler</td>
                <td class="border px-4 py-2">Sales Assistant</td>
                <td class="border px-4 py-2">San Francisco</td>
                <td class="border px-4 py-2">59</td>
                <td class="border px-4 py-2">2012/08/06</td>
                <td class="border px-4 py-2">$137,500</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Ashton Cox</td>
                <td class="border px-4 py-2">Junior Technical Author</td>
                <td class="border px-4 py-2">San Francisco</td>
                <td class="border px-4 py-2">66</td>
                <td class="border px-4 py-2">2009/01/12</td>
                <td class="border px-4 py-2">$86,000</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Cedric Kelly</td>
                <td class="border px-4 py-2">Senior Javascript Developer</td>
                <td class="border px-4 py-2">Edinburgh</td>
                <td class="border px-4 py-2">22</td>
                <td class="border px-4 py-2">2012/03/29</td>
                <td class="border px-4 py-2">$433,060</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Airi Satou</td>
                <td class="border px-4 py-2">Accountant</td>
                <td class="border px-4 py-2">Tokyo</td>
                <td class="border px-4 py-2">33</td>
                <td class="border px-4 py-2">2008/11/28</td>
                <td class="border px-4 py-2">$162,700</td>
            </tr>
            <tr>
                <td class="border px-4 py-2">Brielle Williamson</td>
                <td class="border px-4 py-2">Integration Specialist</td>
                <td class="border px-4 py-2">New York</td>
                <td class="border px-4 py-2">61</td>
                <td class="border px-4 py-2">2012/12/02</td>
                <td class="border px-4 py-2">$372,000</td>
            </tr>

</tbody>
    </table>
</div>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

Related Examples

Advanced table

Noob

3 years ago

24k
Table for user management
It shows a table of users with their names, email, and role. The table also has two buttons for each row: one to save changes made to the user's details and another to delete the user.

I.P. Leroy

3 years ago

20.1k
Table template

Oliver Hansen

3 years ago

17.3k
Table template

Lukas Müller

3 years ago

17k
Table

Anonymous

2 years ago

7.7k
Tailwind CSS Responsive Table

Prashant

4 years ago

12.7k
Table with progress column

Sophia Baker

3 years ago

13.3k
Stripped table with tailwind css

Task Master

3 years ago

16.9k
Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14k
Simple table with border

Kairi Greene

3 years ago

13.3k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
Simple responsive table

Lukas Müller

3 years ago

12.1k