Playground

Table

A table element for displaying tabular data.

Tailwind Only
Copied!
Name Age Address Action
Richard Hendricks 30 Pied Piper HQ, Palo Alto Edit
Erlich Bachman 40 5230 Penfield Ave, Woodland Hills Edit
Monica Hall 35 2030 Stewart Drive, Sunnyvale Edit
Dinesh Chugtai 28 Pied Piper HQ, Palo Alto Edit
Gilfoyle 32 Pied Piper HQ, Palo Alto Edit 
<div class="flex flex-col">
    <div class="overflow-x-auto">
        <div class="inline-block min-w-full">
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-neutral-200">
                    <thead>
                        <tr class="text-neutral-500">
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
                            <th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-neutral-200">
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.

This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.

More Examples

Below you will find more Table examples you may wish to use in your projects.

Copied!
Name Age Address Action
Richard Hendricks 30 Pied Piper HQ, Palo Alto Edit
Erlich Bachman 40 5230 Penfield Ave, Woodland Hills Edit
Monica Hall 35 2030 Stewart Drive, Sunnyvale Edit
Dinesh Chugtai 28 Pied Piper HQ, Palo Alto Edit
Gilfoyle 32 Pied Piper HQ, Palo Alto Edit 
<div class="flex flex-col">
    <div class="overflow-x-auto">
        <div class="inline-block min-w-full">
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-neutral-200/70">
                    <thead>
                        <tr class="text-neutral-800">
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
                            <th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
                            <th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-neutral-200/70">
                        <tr class="text-neutral-600 bg-neutral-50">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800 bg-neutral-50">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                        <tr class="text-neutral-800 bg-neutral-50">
                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
                            <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                            <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
Copied!
Name Age Address Action
Richard Hendricks 30 Pied Piper HQ, Palo Alto Edit
Erlich Bachman 40 5230 Penfield Ave, Woodland Hills Edit
Monica Hall 35 2030 Stewart Drive, Sunnyvale Edit
Dinesh Chugtai 28 Pied Piper HQ, Palo Alto Edit
Gilfoyle 32 Pied Piper HQ, Palo Alto Edit 
<div class="p-10">
    <div class="flex flex-col">
        <div class="overflow-x-auto">
            <div class="inline-block min-w-full">
                <div class="overflow-hidden border rounded-lg">
                    <table class="min-w-full divide-y divide-neutral-200">
                        <thead class="bg-neutral-50">
                            <tr class="text-neutral-500">
                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
                                <th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-neutral-200">
                            <tr class="text-neutral-800">
                                <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                                <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                    <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                                </td>
                            </tr>
                            <tr class="text-neutral-800">
                                <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
                                <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                    <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                                </td>
                            </tr>
                            <tr class="text-neutral-800">
                                <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
                                <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                    <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                                </td>
                            </tr>
                            <tr class="text-neutral-800">
                                <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                                <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                    <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                                </td>
                            </tr>
                            <tr class="text-neutral-800">
                                <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
                                <td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
                                <td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
                                    <a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
Switch Tabs
A project by DevDojo