Tailwind CSS Table Header

Default Table Header

Use the below tailwind header component to simply show the basic details of the table. Here, it shows the search bar control to search information within the table.

Preview
Code

Figma File

                                                <section class="py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="p-4 flex sm:flex-row flex-col gap-5 sm:items-center bg-white rounded-2xl">
            <h5 class="w-full text-gray-900 text-base font-semibold leading-7">Pagedone Employees Status</h5>
            <div class="w-[200px] flex-col justify-start items-start inline-flex">
                <div class="px-2.5 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 justify-start items-center gap-2 inline-flex">
                    <div class="pl-0.5 py-px justify-start items-center gap-1 flex">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                            <path d="M12.25 12.25L10.7917 10.7917M11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833C7.70036 11.0833 8.86299 10.565 9.7067 9.72627C10.557 8.88101 11.0833 7.71031 11.0833 6.41667Z" stroke="#111827" stroke-linecap="round"></path>
                        </svg>
                        <input type="text" class="placeholder-gray-400 text-gray-900 text-xs font-normal leading-4 focus:outline-none" placeholder="Search here">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

HTML Copy

Table Header with tabs

You can use this example to implement navigational tabs alongside your table component. When you click on tabs, it will switch between different tabs, dynamically altering the content displayed within the table based on your selection.

Preview
Code

Figma File

                                                <section class="py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 tabs">
        <div class="p-4 flex sm:flex-row flex-col gap-5 md:items-center justify-between bg-white rounded-2xl">
            <h5 class="text-gray-900 text-base font-semibold leading-7 flex items-center">Pagedone Employees</h5>
            <!--Switch-->
            <div class="flex gap-4">
                <div class="flex gap-[1px] justify-center items-center bg-gray-100 rounded-md p-1">
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md rounded-md border-none text-xs font-medium justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap active" data-tab="tabs-with-background-1" role="tab">
                Tab CTA
                </a>
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md border-none text-xs font-medium rounded-md justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap" data-tab="tabs-with-background-2" role="tab">
                Present
                </a>
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md border-none text-xs font-medium rounded-md justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap" data-tab="tabs-with-background-3" role="tab">
                    On Leave
                </a>
            </div>
            <div class="relative flex items-center w-[70px] h-8 cursor-pointer">
                <svg class="absolute top-1/2 -translate-y-1/2 left-2 z-50 mr-1.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M2 4.6665H14M4 7.99984H12M6.66667 11.3332H9.33333" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                </svg>
                <select id="Offer" class="text-gray-900 py-1.5 text-xs cursor-pointer font-medium leading-5 block w-full pr-1.5 pl-7 rounded-md shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 appearance-none relative focus:outline-none bg-white transition-all duration-500 hover:bg-gray-50 focus-within:border-gray-300">
                    <option selected="">Filter</option>
                    <option value="Designer">Designer</option>
                    <option value="Researcher">Researcher</option>
                    <option value="Developer">Developer</option>
                </select>
                <svg class="absolute top-1/2 -translate-y-1/2 right-4 z-50 hidden" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.0002 5.99845L8.00008 9.99862L3.99756 5.99609" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            </div>
        </div>
        <div id="tabs-with-background-1" role="tabpanel" aria-labelledby="tabs-with-background-item-1" class="tabcontent" style="display: block;">
        </div>
        <div id="tabs-with-background-2" role="tabpanel" aria-labelledby="tabs-with-background-item-2" class="tabcontent" style="display: none;">
        </div>
        <div id="tabs-with-background-3" role="tabpanel" aria-labelledby="tabs-with-background-item-3" class="tabcontent" style="display: none;">
            
        </div>
    </div>
</section>

HTML Copy

Tailwind Table Sort Header

Use this example to show drop-down filters, inline filters, search inputs, and sorting functionality.

Preview
Code

Figma File

                                                <section class="py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="p-4 flex md:flex-nowrap flex-wrap gap-4 md:items-center justify-between bg-white rounded-2xl">
            <div class="w-full flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M17.5 17.5L15.4167 15.4167M15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0005 15.8333 12.6614 15.0929 13.8667 13.8947C15.0814 12.6872 15.8333 11.0147 15.8333 9.16667Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                </svg>
                <input type="text" class="focus:outline-none placeholder-gray-400 text-gray-900 text-base font-normal leading-5" placeholder="Search here">
            </div>
            <div class="flex gap-4 items-center">
                <div class="relative flex items-center w-[116px] h-8 cursor-pointer">
                    <select id="Offer" class="text-gray-900 py-1.5 pr-1.5 pl-3 cursor-pointer text-xs font-medium leading-5 block w-full rounded-md shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 appearance-none relative focus:outline-none bg-white transition-all duration-500 hover:bg-gray-50 focus-within:border-gray-300">
                        <option selected="">Sort by Label</option>
                        <option value="Label 1">Label 1</option>
                        <option value="Label 2">Label 2</option>
                        <option value="Label 3">Label 3</option>
                    </select>
                    <svg class="absolute top-1/2 -translate-y-1/2 right-1.5 z-50 ml-1.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0002 5.99845L8.00008 9.99862L3.99756 5.99609" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
                <div class="relative flex items-center w-[62px] h-8 cursor-pointer">
                    <select id="Offer" class="text-gray-900 py-1.5 cursor-pointer pr-1.5 pl-3 text-xs font-medium leading-5 block w-full rounded-md shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 appearance-none relative focus:outline-none bg-white transition-all duration-500 hover:bg-gray-50 focus-within:border-gray-300">
                        <option selected="">A-Z</option>
                        <option value="a">a</option>
                        <option value="x">x</option>
                        <option value="z">z</option>
                    </select>
                    <svg class="absolute top-1/2 -translate-y-1/2 right-1.5 z-50 ml-1.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0002 5.99845L8.00008 9.99862L3.99756 5.99609" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
                <div class="relative flex items-center w-[70px] h-8 cursor-pointer">
                    <svg class="absolute top-1/2 -translate-y-1/2 left-2 z-50 mr-1.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M2 4.6665H14M4 7.99984H12M6.66667 11.3332H9.33333" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                    </svg>
                    <select id="Offer" class="text-gray-900 py-1.5 cursor-pointer text-xs font-medium leading-5 block w-full pr-1.5 pl-7 rounded-md shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 appearance-none relative focus:outline-none bg-white transition-all duration-500 hover:bg-gray-50 focus-within:border-gray-300">
                        <option selected="">Filter</option>
                        <option value="Designer">Designer</option>
                        <option value="Researcher">Researcher</option>
                        <option value="Developer">Developer</option>
                    </select>
                    <svg class="absolute top-1/2 -translate-y-1/2 right-4 z-50 hidden" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0002 5.99845L8.00008 9.99862L3.99756 5.99609" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

HTML Copy

Table header with search input and CTA Button

Following Example can be used to show text alongside search input, CTA Button and filter icons.

Preview
Code

Figma File

Table header with date picker filter

By using the below example, you can filter table results by selecting a start and end time that define your desired data range results with a simple click of a button.

Preview
Code

Figma File

Table header with filter and date picker

Use following example to show search functionality alongside datepicker and filter options with dropdown

Preview
Code

Figma File

Multi-level table header with filters

Use this example to show multiple rows of data and actions in the table header, which includes drop-down filters, inline filters, a CTA button, search inputs, and sort functionality.

Preview
Code

Figma File

Figma Design System

Tailwind CSS Blocks

Tailwind Colors

Icons

Tailwind Templates Coming soon

Default Table Header

Table Header with tabs

Tailwind Table Sort Header

Table header with search input and CTA Button

Table header with date picker filter

Table header with filter and date picker

Multi-level table header with filters