Dastone - Admin & Dashboard Template

Border Collapse Table

Channel	Sessions	Prev.Period	% Change
Organic search	10853(52%)	566(92%)	52.80%
Direct	10853(52%)	566(92%)	52.80%
Referal	10853(52%)	566(92%)	52.80%
Email	10853(52%)	566(92%)	52.80%


<table class="w-full border-collapse border dark:border-slate-700">
    <thead class="bg-slate-100 dark:bg-slate-700/20">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 border dark:border-slate-700">
                Channel
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                Sessions
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                Prev.Period
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                % Change
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Organic search</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Direct</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Referal</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Email</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
    </tbody>
</table>

Border Separate Table

Channel	Sessions	Prev.Period	% Change
Organic search	10853(52%)	566(92%)	52.80%
Direct	10853(52%)	566(92%)	52.80%
Referal	10853(52%)	566(92%)	52.80%
Email	10853(52%)	566(92%)	52.80%


<table class="w-full border-separate border dark:border-slate-700">
    <thead class="bg-slate-100 dark:bg-slate-700/20">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 border dark:border-slate-700">
                Channel
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                Sessions
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                Prev.Period
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400  border dark:border-slate-700">
                % Change
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Organic search</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Direct</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Referal</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white  border dark:border-slate-700">
                <a href="" class="text-blue-500">Email</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400  border dark:border-slate-700">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
    </tbody>
</table>

Striped rows

Channel	Sessions	Prev.Period	% Change
Organic search	10853(52%)	566(92%)	52.80%
Direct	10853(52%)	566(92%)	52.80%
Referal	10853(52%)	566(92%)	52.80%
Email	10853(52%)	566(92%)	52.80%
Social	10853(52%)	566(92%)	52.80%

                                       
<table class="w-full">
    <thead class="bg-slate-100 dark:bg-slate-700/20">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Channel
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Sessions
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Prev.Period
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                % Change
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <a href="" class="text-blue-500">Organic search</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-slate-50 border-b border-dashed dark:bg-gray-900/30 dark:border-gray-700">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <a href="" class="text-blue-500">Direct</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <a href="" class="text-blue-500">Referal</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-slate-50 border-b border-dashed dark:bg-gray-900/30 dark:border-gray-700">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <a href="" class="text-blue-500">Email</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 5 -->
        <tr class="bg-white dark:bg-gray-900">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <a href="" class="text-blue-500">Social</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
    </tbody>
</table>

Striped columns

Channel	Sessions	Prev.Period	% Change
Organic search	10853(52%)	566(92%)	52.80%
Direct	10853(52%)	566(92%)	52.80%
Referal	10853(52%)	566(92%)	52.80%
Email	10853(52%)	566(92%)	52.80%
Social	10853(52%)	566(92%)	52.80%


<table class="w-full">
    <thead class="">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 bg-slate-100 dark:bg-slate-700/20">
                Channel
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Sessions
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 bg-slate-100 dark:bg-slate-700/20">
                Prev.Period
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                % Change
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white bg-slate-100 dark:bg-slate-700/20">
                <a href="" class="text-blue-500">Organic search</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400 bg-slate-100 dark:bg-slate-700/20">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white bg-slate-100 dark:bg-slate-700/20">
                <a href="" class="text-blue-500">Direct</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-red-500 whitespace-nowrap dark:text-red-500 bg-red-500/10 dark:bg-red-700/20">
                566<small class="text-red-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white bg-slate-100 dark:bg-slate-700/20">
                <a href="" class="text-blue-500">Referal</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400 bg-slate-100 dark:bg-slate-700/20">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white bg-slate-100 dark:bg-slate-700/20">
                <a href="" class="text-blue-500">Email</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-green-500 whitespace-nowrap dark:text-green-500 bg-green-500/10 dark:bg-green-700/20">
                566<small class="text-green-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-down text-red-500 text-base"></i>
            </td>
        </tr>
        <!-- 5 -->
        <tr class="bg-white dark:bg-gray-900">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white bg-slate-100 dark:bg-slate-700/20">
                <a href="" class="text-blue-500">Social</a>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                10853<small class="text-gray-400">(52%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400 bg-slate-100 dark:bg-slate-700/20">
                566<small class="text-gray-400">(92%)</small>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                52.80% <i class="ti ti-caret-up text-green-500 text-base"></i>
            </td>
        </tr>
    </tbody>
</table>

Theme color Header

Lead	Email	Phone No	Status
Donald Gardner	xyx@gmail.com	+123456789	New Lead
Matt Rosales	xyx@gmail.com	+123456789	New Lead
Michael Hill	xyx@gmail.com	+123456789	Lost
Dorothy Key	xyx@gmail.com	+123456789	Converted


<table class="w-full">
    <thead class="bg-primary-500 dark:bg-primary-500">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Lead
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Email
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Phone No
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Status
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white dark:bg-gray-900">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
    </tbody>
</table>

Hover Table

Date	Item Counts	Tax	Earning
03 March	50	-$40	$15,500.00
04 March	120	-	$20,900.00
05 March	90	-$20	$10,500.00
06 March	160	-	$35,000.00
07 March	80	-$60	$18,880.00


<table class="min-w-full">
    <thead class="bg-gray-50 dark:bg-gray-600/20">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Date
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Item Counts
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Tax
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                Earning
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40 hover:bg-slate-50 dark:hover:bg-slate-900/30">
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                03 March
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                50
            </td>
            <td class="p-3 text-sm text-red-500 whitespace-nowrap dark:text-red-400">
            -$40
            </td>
            <td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400">
                $15,500.00
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40 hover:bg-slate-50 dark:hover:bg-slate-900/30">
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                04 March
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                120
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
            -
            </td>
            <td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400">
                $20,900.00
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40 hover:bg-slate-50 dark:hover:bg-slate-900/30">
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                05 March
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                90
            </td>
            <td class="p-3 text-sm text-red-500 whitespace-nowrap dark:text-red-400">
            -$20
            </td>
            <td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400">
                $10,500.00
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40 hover:bg-slate-50 dark:hover:bg-slate-900/30">
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                06 March
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                160
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
            -
            </td>
            <td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400">
                $35,000.00
            </td>
        </tr>
        <!-- 5 -->
        <tr class="bg-white dark:bg-gray-800 hover:bg-slate-50 dark:hover:bg-slate-900/30">
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                07 March
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                80
            </td>
            <td class="p-3 text-sm text-red-500 whitespace-nowrap dark:text-red-400">
            -$60
            </td>
            <td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400">
                $18,880.00
            </td>
        </tr>
    </tbody>
</table>

Dark Header

Lead	Email	Phone No	Status
Donald Gardner	xyx@gmail.com	+123456789	New Lead
Matt Rosales	xyx@gmail.com	+123456789	New Lead
Michael Hill	xyx@gmail.com	+123456789	Lost
Dorothy Key	xyx@gmail.com	+123456789	Converted


<table class="w-full">
    <thead class="bg-slate-700 dark:bg-slate-900/30">
        <tr>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Lead
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Email
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Phone No
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Status
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-slate-100 uppercase">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white dark:bg-gray-900">
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
    </tbody>
</table>

Table with checkbox

Lead	Email	Phone No	Status
Donald Gardner	xyx@gmail.com	+123456789	New Lead
Matt Rosales	xyx@gmail.com	+123456789	New Lead
Michael Hill	xyx@gmail.com	+123456789	Lost
Dorothy Key	xyx@gmail.com	+123456789	Converted


<table class="w-full">
    <thead class="bg-gray-50 dark:bg-gray-600/20">
        <tr>
            <th scope="col" class="p-3">
                <label class="custom-label">
                    <div class="bg-white dark:bg-slate-600/40 border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                      <input type="checkbox" class="hidden" >
                      <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i>
                    </div>
                </label>
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
                Lead
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
                Email
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
                Phone No
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
                Status
            </th>
            <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="w-4 p-4">
                <label class="custom-label">
                    <div class="bg-white dark:bg-slate-600/40 border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                      <input type="checkbox" class="hidden" >
                      <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i>
                    </div>
                </label>
            </td>
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 2 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="w-4 p-4">
                <label class="custom-label">
                    <div class="bg-white dark:bg-slate-600/40 border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                      <input type="checkbox" class="hidden" checked>
                      <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i>
                    </div>
                </label>
            </td>
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 3 -->
        <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700/40">
            <td class="w-4 p-4">
                <label class="custom-label">
                    <div class="bg-white dark:bg-slate-600/40 border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                      <input type="checkbox" class="hidden" >
                      <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i>
                    </div>
                </label>
            </td>
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
        <!-- 4 -->
        <tr class="bg-white dark:bg-gray-900">
            <td class="w-4 p-4">
                <label class="custom-label">
                    <div class="bg-white dark:bg-slate-600/40 border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                      <input type="checkbox" class="hidden" checked>
                      <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i>
                    </div>
                </label>
            </td>
            <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
                <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                xyx@gmail.com
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                +123456789
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span>
            </td>
            <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
                <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
            </td>
        </tr>
    </tbody>
</table>

Mannat Themes

Basic

Border Collapse Table

Border Separate Table

Striped rows

Striped columns

Theme color Header

Hover Table

Dark Header

Table with checkbox