Playground
PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE

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