Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Live Documentation Help & getting started
Dark Mode
Basic Table

Tailwind Table.

Leverage Tailwind's versatile table components to improve actions in forms, dialogs, and other elements, offering full support for various sizes, states, and extended functionalities.

Tailwind Table

Recent Payments Queue

# PATIENT DR NAME DATE STATUS PRICE
01 Mr. Bobby Dr. Jackson 01 August 2020 Successful $21.56
Edit Delete
02 Mr. Bobby Dr. Jackson 01 August 2020 Canceled $21.56
Edit Delete
03 Mr. Bobby Dr. Jackson 01 August 2020 Pending $21.56
Edit Delete 
														
<table class="table text-left mb-4 min-w-[36rem] w-full">
    <thead>
        <tr>
            <th class="text-base text-dark tracking-[0.5px]" style="width:80px;"><strong class="font-bold">#</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong class="font-bold">PATIENT</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong class="font-bold">DR NAME</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong class="font-bold">DATE</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong class="font-bold">STATUS</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong class="font-bold">PRICE</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-base text-dark border-t border-border"><strong>01</strong></td>
            <td class="border-t border-border">Mr. Bobby</td>
            <td class="border-t border-border">Dr. Jackson</td>
            <td class="border-t border-border">01 August 2020</td>
            <td class="border-t border-border"><span class="badge text-success bg-successlight">Successful</span></td>
            <td class="border-t border-border">$21.56</td>
            <td class="border-t border-border text-right">
                <div class="relative" x-data="{ open: false }">
                    <button type="button" class="btn size-7.5 !leading-8 !p-0 text-center bg-successlight hover:shadow-btnsuccess duration-300" @click="open = true">
                        <svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="var(--text-dark)" cx="5" cy="12" r="2"/><circle fill="var(--text-dark)" cx="12" cy="12" r="2"/><circle fill="var(--text-dark)" cx="19" cy="12" r="2"/></g></svg>
                    </button>
                    <div class="bg-bodybg border border-black/15 rounded-xl absolute top-full right-0 min-w-40 mt-1 z-1 text-left" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-base text-dark border-t border-border"><strong>02</strong></td>
            <td class="border-t border-border">Mr. Bobby</td>
            <td class="border-t border-border">Dr. Jackson</td>
            <td class="border-t border-border">01 August 2020</td>
            <td class="border-t border-border"><span class="badge text-danger bg-dangerlight">Canceled</span></td>
            <td class="border-t border-border">$21.56</td>
            <td class="border-t border-border text-right">
                <div class="relative" x-data="{ open: false }">
                    <button type="button" class="btn size-7.5 !leading-8 !p-0 text-center bg-dangerlight hover:shadow-btndanger duration-300" @click="open = true">
                        <svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="var(--text-dark)" cx="5" cy="12" r="2"/><circle fill="var(--text-dark)" cx="12" cy="12" r="2"/><circle fill="var(--text-dark)" cx="19" cy="12" r="2"/></g></svg>
                    </button>
                    <div class="bg-bodybg border border-black/15 rounded-xl absolute top-full right-0 min-w-40 mt-1 z-1 text-left" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-base text-dark border-y border-border"><strong>03</strong></td>
            <td class="border-y border-border">Mr. Bobby</td>
            <td class="border-y border-border">Dr. Jackson</td>
            <td class="border-y border-border">01 August 2020</td>
            <td class="border-y border-border"><span class="badge text-warning bg-warninglight">Pending</span></td>
            <td class="border-y border-border">$21.56</td>
            <td class="border-y border-border text-right">
                <div class="relative" x-data="{ open: false }">
                    <button type="button" class="btn size-7.5 !leading-8 !p-0 text-center bg-warninglight hover:shadow-btnwarning duration-300" @click="open = true">
                        <svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="var(--text-dark)" cx="5" cy="12" r="2"/><circle fill="var(--text-dark)" cx="12" cy="12" r="2"/><circle fill="var(--text-dark)" cx="19" cy="12" r="2"/></g></svg>
                    </button>
                    <div class="bg-bodybg border border-black/15 rounded-xl absolute top-full right-0 min-w-40 mt-1 z-1 text-left" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
                        <a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Exam Toppers

 ROLL NO. NAME Email Date Status
542
Dr. Jackson
example@example.com 01 August 2020
Successful
542
Dr. Jackson
 example@example.com 01 August 2020
Canceled
542
Dr. Jackson
 example@example.com 01 August 2020
Pending
 
														
<table class="table text-left mb-4 min-w-[36rem] w-full ItemsCheckboxSec">
    <thead>
        <tr>
            <th class="text-base text-dark tracking-[0.5px]" style="width:50px;">
                <div class="form-check mr-4">
                    <input type="checkbox" class="form-check-input checkAll size-6" id="checkInput" required="">
                    <label class="ml-[0.313rem] mt-[0.113rem]" for="checkInput"></label>
                </div>
            </th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold">ROLL NO.</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold">NAME</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold">Email</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold">Date</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold">Status</strong></th>
            <th class="text-base text-dark tracking-[0.5px]"><strong  class="font-bold"></strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="border-t border-border">
                <div class="form-check mr-4">
                    <input type="checkbox" class="form-check-input size-6" id="customCheckBox2" required="">
                    <label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox2"></label>
                </div>
            </td>
            <td class="border-t border-border"><strong>542</strong></td>
            <td class="border-t border-border">
                <div class="flex items-center">
                    <img src="assets/images/avatar/1.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt="">
                    <span class="w-space-no">Dr. Jackson</span>
                </div>
            </td>
            <td class="border-t border-border">example@example.com	</td>
            <td class="border-t border-border">01 August 2020</td>
            <td class="border-t border-border"><div class="flex items-center"><i class="fa fa-circle text-success mr-1"></i> Successful</div></td>
            <td class="border-t border-border text-right">
                <div class="flex">
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <td class="border-t border-border">
                <div class="form-check mr-4">
                    <input type="checkbox" class="form-check-input size-6" id="customCheckBox3" required="">
                    <label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox3"></label>
                </div>
            </td>
            <td class="border-t border-border"><strong>542</strong></td>
            <td class="border-t border-border"><div class="flex items-center"><img src="assets/images/avatar/2.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
            <td class="border-t border-border">example@example.com	</td>
            <td class="border-t border-border">01 August 2020</td>
            <td class="border-t border-border"><div class="flex items-center"><i class="fa fa-circle text-danger mr-1"></i> Canceled</div></td>
            <td class="border-t border-border text-right">
                <div class="flex">
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <td class="border-y border-border">
                <div class="form-check mr-4">
                    <input type="checkbox" class="form-check-input size-6" id="customCheckBox4" required="">
                    <label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox4"></label>
                </div>
            </td>
            <td class="border-y border-border"><strong>542</strong></td>
            <td class="border-y border-border"><div class="flex items-center"><img src="assets/images/avatar/3.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
            <td class="border-y border-border">example@example.com	</td>
            <td class="border-y border-border">01 August 2020</td>
            <td class="border-y border-border"><div class="flex items-center"><i class="fa fa-circle text-warning mr-1"></i> Pending</div></td>
            <td class="border-y border-border text-right">
                <div class="flex">
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
                    <a href="javascript:void(0);" class="size-[1.625rem] leading-[1.625rem] rounded-lg text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Basic

# Name Status Date Price
1 Kolor Tea Shirt For Man Sale January 22 $21.56
2 Kolor Tea Shirt For Women Tax January 30 $55.32
3 Blue Backpack For Baby Extended January 25 $14.85 
														
<table class="table text-left mb-4 min-w-[36rem] w-full">
    <thead>
        <tr>
            <th class="font-medium">#</th>
            <th class="font-medium">Name</th>
            <th class="font-medium">Status</th>
            <th class="font-medium">Date</th>
            <th class="font-medium text-right">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="border-t border-border">1</th>
            <td class="border-t border-border">Kolor Tea Shirt For Man</td>
            <td class="border-t border-border"><span class="badge text-primary bg-primarylight border border-primarylight">Sale</span>
            </td>
            <td class="border-t border-border">January 22</td>
            <td class="border-t border-border text-right">$21.56</td>
        </tr>
        <tr>
            <th class="border-t border-border">2</th>
            <td class="border-t border-border">Kolor Tea Shirt For Women</td>
            <td class="border-t border-border"><span class="badge text-white bg-success  border border-success">Tax</span>
            </td>
            <td class="border-t border-border">January 30</td>
            <td class="border-t border-border text-right">$55.32</td>
        </tr>
        <tr>
            <th class="border-y border-border">3</th>
            <td class="border-y border-border">Blue Backpack For Baby</td>
            <td class="border-y border-border"><span class="badge text-white bg-danger  border border-danger">Extended</span>
            </td>
            <td class="border-y border-border">January 25</td>
            <td class="border-y border-border text-danger text-right">$14.85</td>
        </tr>
    </tbody>
</table>

Table Striped

# Name Status Date Price
1 Kolor Tea Shirt For Man Sale January 22 $21.56
2 Kolor Tea Shirt For Women Tax January 30 $55.32
3 Blue Backpack For Baby Extended January 25 $14.85 
															
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium">#</th>
            <th class="font-medium">Name</th>
            <th class="font-medium">Status</th>
            <th class="font-medium">Date</th>
            <th class="font-medium text-right">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border">1</th>
            <td class="border-t border-border">Kolor Tea Shirt For Man</td>
            <td class="border-t border-border"><span class="badge text-white bg-primary">Sale</span>
            </td>
            <td class="border-t border-border">January 22</td>
            <td class="border-t border-border text-right">$21.56</td>
        </tr>
        <tr>
            <th class="border-t border-border">2</th>
            <td class="border-t border-border">Kolor Tea Shirt For Women</td>
            <td class="border-t border-border"><span class="badge text-white bg-success">Tax</span>
            </td>
            <td class="border-t border-border">January 30</td>
            <td class="border-t border-border text-right">$55.32</td>
        </tr>
        <tr  class="bg-[#efefef] dark:bg-d-bg">
            <th class="border-y border-border">3</th>
            <td class="border-y border-border">Blue Backpack For Baby</td>
            <td class="border-y border-border"><span class="badge text-white bg-danger">Extended</span>
            </td>
            <td class="border-y border-border">January 25</td>
            <td class="border-y border-border text-danger text-right">$14.85</td>
        </tr>
    </tbody>
</table>

Table Bordered

# Name Status Date Price
1 Kolor Tea Shirt For Man Sale January 22 $21.56
2 Kolor Tea Shirt For Women Tax January 30 $55.32
3 Blue Backpack For Baby Extended January 25 $14.85 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium border border-border text-base">#</th>
            <th class="font-medium border border-border text-base">Name</th>
            <th class="font-medium border border-border text-base">Status</th>
            <th class="font-medium border border-border text-base">Date</th>
            <th class="font-medium text-right border border-border">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="border border-t-0 border-border max-sm:font-bold">1</th>
            <td class="border border-t-0 border-border">Kolor Tea Shirt For Man</td>
            <td class="border border-t-0 border-border"><span class="badge text-white bg-primary">Sale</span>
            </td>
            <td class="border border-t-0 border-border">January 22</td>
            <td class="border border-t-0 border-border text-right">$21.56</td>
        </tr>
        <tr>
            <th class="border border-t-0 border-border max-sm:font-bold">2</th>
            <td class="border border-t-0 border-border">Kolor Tea Shirt For Women</td>
            <td class="border border-t-0 border-border"><span class="badge text-white bg-success">Tax</span>
            </td>
            <td class="border border-t-0 border-border">January 30</td>
            <td class="border border-t-0 border-border text-right">$55.32</td>
        </tr>
        <tr>
            <th class="border border-t-0 border-border max-sm:font-bold">3</th>
            <td class="border border-t-0 border-border">Blue Backpack For Baby</td>
            <td class="border border-t-0 border-border"><span class="badge text-white bg-danger">Extended</span>
            </td>
            <td class="border border-t-0 border-border">January 25</td>
            <td class="border border-t-0 border-border text-danger text-right">$14.85</td>
        </tr>
    </tbody>
</table>

Table Hover

# Name Status Date Price
1 Kolor Tea Shirt For Man Sale January 22 $21.56
2 Kolor Tea Shirt For Women Tax January 30 $55.32
3 Blue Backpack For Baby Extended January 25 $14.85 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium">#</th>
            <th class="font-medium">Name</th>
            <th class="font-medium">Status</th>
            <th class="font-medium">Date</th>
            <th class="font-medium text-right">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border max-sm:font-bold">1</th>
            <td class="border-t border-border">Kolor Tea Shirt For Man</td>
            <td class="border-t border-border"><span class="badge text-white bg-primary border border-primary">Sale</span>
            </td>
            <td class="border-t border-border">January 22</td>
            <td class="border-t border-border text-right">$21.56</td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border max-sm:font-bold">2</th>
            <td class="border-t border-border">Kolor Tea Shirt For Women</td>
            <td class="border-t border-border"><span class="badge text-white bg-success light">Tax</span>
            </td>
            <td class="border-t border-border">January 30</td>
            <td class="border-t border-border text-right">$55.32</td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-y border-border max-sm:font-bold">3</th>
            <td class="border-y border-border">Blue Backpack For Baby</td>
            <td class="border-y border-border"><span class="badge text-white bg-danger">Extended</span>
            </td>
            <td class="border-y border-border">January 25</td>
            <td class="border-y border-border text-danger text-right">$14.85</td>
        </tr>
    </tbody>
</table>

Hover Table

# Product Popularity Sales
1 Air Conditioner
70% Complete
70%
2 Textiles
70% Complete
70%
3 Milk Powder
70% Complete
70%
4 Vehicles
70% Complete
70%
5 Boats
70% Complete
70% 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium" scope="col">#</th>
            <th class="font-medium" scope="col">Product</th>
            <th class="font-medium" scope="col">Popularity</th>
            <th class="font-medium text-right" scope="col">Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border">1</th>
            <td class="border-t border-border">Air Conditioner</td>
            <td class="border-t border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
                    <div class="h-1.5 rounded-lg bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border-t border-border text-right"><span class="badge border border-transparent bg-primarylight text-primary">70%</span>
            </td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border">2</th>
            <td class="border-t border-border">Textiles</td>
            <td class="border-t border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
                    <div class="h-1.5 rounded-lg bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border-t border-border text-right"><span class="badge border border-transparent text-white bg-success">70%</span>
            </td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border">3</th>
            <td class="border-t border-border">Milk Powder</td>
            <td class="border-t border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
                    <div class="h-1.5 rounded-lg bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border-t border-border text-right"><span class="badge border border-transparent bg-[#312a2a33] text-white">70%</span>
            </td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-t border-border">4</th>
            <td class="border-t border-border">Vehicles</td>
            <td class="border-t border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(255, 87, 34, .1)">
                    <div class="h-1.5 rounded-lg bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border-t border-border text-right"><span class="badge border border-transparent text-white bg-danger">70%</span>
            </td>
        </tr>
        <tr class="hover:bg-[#efefef] dark:bg-d-bg">
            <th class="border-y border-border">5</th>
            <td class="border-y border-border">Boats</td>
            <td class="border-y border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
                    <div class="h-1.5 rounded-lg bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border-y border-border text-right"><span class="badge border border-transparent text-white bg-warning">70%</span>
            </td>
        </tr>
    </tbody>
</table>

Table Bordered

# Name Status Date Price
1 Kolor Tea Shirt For Man Sale January 22 $21.56
2 Kolor Tea Shirt For Women Tax January 30 $55.32
3 Blue Backpack For Baby Extended January 25 $14.85 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium border border-border text-base">#</th>
            <th class="font-medium border border-border text-base">Name</th>
            <th class="font-medium border border-border text-base">Status</th>
            <th class="font-medium border border-border text-base">Date</th>
            <th class="font-medium border border-border text-base text-right">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="border border-t-0 border-border">1</th>
            <td class="border border-t-0 border-border">Kolor Tea Shirt For Man</td>
            <td class="border border-t-0 border-border"><span class="badge bg-primary text-white">Sale</span>
            </td>
            <td class="border border-t-0 border-border">January 22</td>
            <td class="border border-t-0 border-border text-right text-primary">$21.56</td>
        </tr>
        <tr>
            <th class="border border-t-0 border-border">2</th>
            <td class="border border-t-0 border-border">Kolor Tea Shirt For Women</td>
            <td class="border border-t-0 border-border"><span class="badge bg-success text-white">Tax</span>
            </td>
            <td class="border border-t-0 border-border">January 30</td>
            <td class="border border-t-0 border-border text-right text-success">$55.32</td>
        </tr>
        <tr>
            <th class="border border-t-0 border-border">3</th>
            <td class="border border-t-0 border-border">Blue Backpack For Baby</td>
            <td class="border border-t-0 border-border"><span class="badge bg-danger text-white">Extended</span>
            </td>
            <td class="border border-t-0 border-border">January 25</td>
            <td class="border border-t-0 border-border text-right text-danger">$14.85</td>
        </tr>
    </tbody>
</table>

Bordered Table

Task Progress Deadline Label Action
Air Conditioner
70% Complete
Apr 20,2018 70%
Textiles
70% Complete
May 27,2018 70%
Milk Powder
70% Complete
May 18,2018 70%
Vehicles
70% Complete
Mar 27,2018 70%
Boats
70% Complete
Jun 28,2018 70% 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium border border-border text-base" scope="col">Task</th>
            <th class="font-medium border border-border text-base" scope="col">Progress</th>
            <th class="font-medium border border-border text-base" scope="col">Deadline</th>
            <th class="font-medium border border-border text-base" scope="col">Label</th>
            <th class="font-medium text-right border border-border" scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="border border-t-0 border-border">Air Conditioner</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
                    <div class="h-1.5 rounded-lg bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">Apr 20,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent bg-primarylight text-primary">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Textiles</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
                    <div class="h-1.5 rounded-lg bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">May 27,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-success">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Milk Powder</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
                    <div class="h-1.5 rounded-lg bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">May 18,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent312a2a33] bg-[#312a2a33] text-white">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Vehicles</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(255, 87, 34, .1)">
                    <div class="h-1.5 rounded-lg bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">Mar 27,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-danger">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Boats</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
                    <div class="h-1.5 rounded-lg bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">Jun 28,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-warning">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
    </tbody>
</table>

Table Stripped

Task Progress Deadline Label Action
Air Conditioner
70% Complete
Apr 20,2018 70%
Textiles
70% Complete
May 27,2018 70%
Milk Powder
70% Complete
May 18,2018 70%
Boats
70% Complete
Jun 28,2018 70% 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium border border-border text-base" scope="col">Task</th>
            <th class="font-medium border border-border text-base" scope="col">Progress</th>
            <th class="font-medium border border-border text-base" scope="col">Deadline</th>
            <th class="font-medium border border-border text-base" scope="col">Label</th>
            <th class="font-medium text-base border border-border text-right" scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[#efefef] dark:bg-d-bg">
            <td class="border border-t-0 border-border">Air Conditioner</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
                    <div class="h-1.5 rounded-lg bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">Apr 20,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-primary light">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Textiles</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
                    <div class="h-1.5 rounded-lg bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">May 27,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-success">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr class="bg-[#efefef] dark:bg-d-bg">
            <td class="border border-t-0 border-border">Milk Powder</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
                    <div class="h-1.5 rounded-lg bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">May 18,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-[#312a2a]">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="border border-t-0 border-border">Boats</td>
            <td class="border border-t-0 border-border">
                <div class="progress h-1.1 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
                    <div class="h-1.5 rounded-lg bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </td>
            <td class="border border-t-0 border-border">Jun 28,2018</td>
            <td class="border border-t-0 border-border"><span class="badge border border-transparent text-white bg-warning">70%</span>
            </td>
            <td class="border border-t-0 border-border text-right">
                <span>
                    <a href="javascript:void(0);" class="mr-6" data-bs-toggle="tooltip"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-placement="top" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
                </span>
            </td>
        </tr>
    </tbody>
</table>

Responsive Table

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2017 $45.00 Paid EN
Order #58746 Mary Adams Oct 12, 2017 $245.30 Shipped CN
Order #98458 Caleb Richards May 18, 2017 $38.00 Shipped AU
Order #32658 June Lane Apr 28, 2017 $77.99 Paid FR 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium text-base">Invoice</th>
            <th class="font-medium text-base">User</th>
            <th class="font-medium text-base">Date</th>
            <th class="font-medium text-base">Amount</th>
            <th class="font-medium text-base">Status</th>
            <th class="font-medium text-base text-right">Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="border-t border-border"><a href="javascript:void(0);">Order #26589</a>
            </td>
            <td class="border-t border-border">Herman Beck</td>
            <td class="border-t border-border"><span class="text-muted">Oct 16, 2017</span>
            </td>
            <td class="border-t border-border">$45.00</td>
            <td class="border-t border-border"><span class="badge text-white bg-success">Paid</span>
            </td>
            <td class="border-t border-border text-right">EN</td>
        </tr>
        <tr>
            <td class="border-t border-border"><a href="javascript:void(0);">Order #58746</a>
            </td>
            <td class="border-t border-border">Mary Adams</td>
            <td class="border-t border-border"><span class="text-muted">Oct 12, 2017</span>
            </td>
            <td class="border-t border-border">$245.30</td>
            <td class="border-t border-border"><span class="badge text-info bg-infolight light">Shipped</span>
            </td>
            <td class="border-t border-border text-right">CN</td>
        </tr>
        <tr>
            <td class="border-t border-border"><a href="javascript:void(0);">Order #98458</a>
            </td>
            <td class="border-t border-border">Caleb Richards</td>
            <td class="border-t border-border"><span class="text-muted">May 18, 2017</span>
            </td>
            <td class="border-t border-border">$38.00</td>
            <td class="border-t border-border"><span class="badge text-white bg-danger">Shipped</span>
            </td>
            <td class="border-t border-border text-right">AU</td>
        </tr>
        <tr>
            <td class="border-y border-border"><a href="javascript:void(0);">Order #32658</a>
            </td>
            <td class="border-y border-border">June Lane</td>
            <td class="border-y border-border"><span class="text-muted">Apr 28, 2017</span>
            </td>
            <td class="border-y border-border">$77.99</td>
            <td class="border-y border-border"><span class="badge text-white bg-success">Paid</span>
            </td>
            <td class="border-y border-border text-right">FR</td>
        </tr>
    </tbody>
</table>

Heading With Background

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead class="thead-info">
        <tr>
            <th class="font-medium text-base text-white bg-info" scope="col">#</th>
            <th class="font-medium text-base text-white bg-info" scope="col">First</th>
            <th class="font-medium text-base text-white bg-info" scope="col">Last</th>
            <th class="font-medium text-base text-white bg-info text-right" scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="border-t border-border">1</th>
            <td class="border-t border-border">Mark</td>
            <td class="border-t border-border">Otto</td>
            <td class="border-t border-border text-right">@mdo</td>
        </tr>
        <tr>
            <th class="border-t border-border">2</th>
            <td class="border-t border-border">Jacob</td>
            <td class="border-t border-border">Thornton</td>
            <td class="border-t border-border text-right">@fat</td>
        </tr>
        <tr>
            <th class="border-y border-border">3</th>
            <td class="border-y border-border">Larry</td>
            <td class="border-y border-border">the Bird</td>
            <td class="border-y border-border text-right">@twitter</td>
        </tr>
    </tbody>
</table>

Primary Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead class="thead-info">
        <tr>
            <th class="font-medium text-white bg-primary" scope="col">#</th>
            <th class="font-medium text-white bg-primary" scope="col">First</th>
            <th class="font-medium text-white bg-primary" scope="col">Last</th>
            <th class="font-medium text-right text-white bg-primary" scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="border-t border-border">1</th>
            <td class="border-t border-border">Mark</td>
            <td class="border-t border-border">Otto</td>
            <td class="border-t border-border text-right">@mdo</td>
        </tr>
        <tr>
            <th class="border-t border-border">2</th>
            <td class="border-t border-border">Jacob</td>
            <td class="border-t border-border">Thornton</td>
            <td class="border-t border-border text-right">@fat</td>
        </tr>
        <tr>
            <th class="border-y border-border">3</th>
            <td class="border-y border-border">Larry</td>
            <td class="border-y border-border">the Bird</td>
            <td class="border-y border-border text-right">@twitter</td>
        </tr>
    </tbody>
</table>

Primary Table Hover

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry the Bird @twitter
5 Larry the Bird @twitter
5 Larry the Bird @twitter 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium text-base text-white bg-primarydark" scope="col">#</th>
            <th class="font-medium text-base text-white bg-primarydark" scope="col">First</th>
            <th class="font-medium text-base text-white bg-primarydark" scope="col">Last</th>
            <th class="font-medium text-base text-white bg-primarydark text-right" scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">1</th>
            <td class="border-t border-primarydark text-white">Mark</td>
            <td class="border-t border-primarydark text-white">Otto</td>
            <td class="border-t border-primarydark text-right text-white">@mdo</td>
        </tr>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">2</th>
            <td class="border-t border-primarydark text-white">Jacob</td>
            <td class="border-t border-primarydark text-white">Thornton</td>
            <td class="border-t border-primarydark text-right text-white">@fat</td>
        </tr>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">3</th>
            <td class="border-t border-primarydark text-white">Larry</td>
            <td class="border-t border-primarydark text-white">the Bird</td>
            <td class="border-t border-primarydark text-right text-white">@twitter</td>
        </tr>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">4</th>
            <td class="border-t border-primarydark text-white">Larry</td>
            <td class="border-t border-primarydark text-white">the Bird</td>
            <td class="border-t border-primarydark text-right text-white">@twitter</td>
        </tr>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">5</th>
            <td class="border-t border-primarydark text-white">Larry</td>
            <td class="border-t border-primarydark text-white">the Bird</td>
            <td class="border-t border-primarydark text-right text-white">@twitter</td>
        </tr>
        <tr class="bg-primary hover:bg-primary8">
            <th class="py-3 px-[9px] border-t border-primarydark text-white">5</th>
            <td class="border-t border-primarydark text-white">Larry</td>
            <td class="border-t border-primarydark text-white">the Bird</td>
            <td class="border-t border-primarydark text-right text-white">@twitter</td>
        </tr>
    </tbody>
</table>

Contextual Table

# Column heading Column heading Column heading
1 Column content Column content Column content
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content 
														
<table class="table text-left mb-4 min-w-[30rem] w-full">
    <thead>
        <tr>
            <th class="font-medium text-base">#</th>
            <th class="font-medium text-base">Column heading</th>
            <th class="font-medium text-base">Column heading</th>
            <th class="font-medium text-base text-right">Column heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <td class="border-t border-border bg-[#e1e1e3] dark:bg-[#f4f5f933]">1</td>
            <td class="border-t border-border bg-[#e1e1e3] dark:bg-[#f4f5f933]">Column content</td>
            <td class="border-t border-border bg-[#e1e1e3] dark:bg-[#f4f5f933]">Column content</td>
            <td class="border-t border-border bg-[#e1e1e3] dark:bg-[#f4f5f933] text-right">Column content</td>
        </tr>
        <tr class="table-primary">
            <td class="border-t border-border text-primary bg-primarylight">1</td>
            <td class="border-t border-border text-primary bg-primarylight">Column content</td>
            <td class="border-t border-border text-primary bg-primarylight">Column content</td>
            <td class="border-t border-border text-primary bg-primarylight text-right">Column content</td>
        </tr>
        <tr class="table-success">
            <td class="border-t border-border text-success bg-[#2bc15533]">2</td>
            <td class="border-t border-border text-success bg-[#2bc15533]">Column content</td>
            <td class="border-t border-border text-success bg-[#2bc15533]">Column content</td>
            <td class="border-t border-border text-success bg-[#2bc15533] text-right">Column content</td>
        </tr>
        <tr class="table-info">
            <td class="border-t border-border text-info bg-[#461ee733]">3</td>
            <td class="border-t border-border text-info bg-[#461ee733]">Column content</td>
            <td class="border-t border-border text-info bg-[#461ee733]">Column content</td>
            <td class="border-t border-border text-info bg-[#461ee733] text-right">Column content</td>
        </tr>
        <tr class="table-warning">
            <td class="border-t border-border text-warning bg-[#fe802433]">4</td>
            <td class="border-t border-border text-warning bg-[#fe802433]">Column content</td>
            <td class="border-t border-border text-warning bg-[#fe802433]">Column content</td>
            <td class="border-t border-border text-warning bg-[#fe802433] text-right">Column content</td>
        </tr>
        <tr class="table-danger">
            <td class="border-t border-border text-danger bg-[#ff2e2e33]">5</td>
            <td class="border-t border-border text-danger bg-[#ff2e2e33]">Column content</td>
            <td class="border-t border-border text-danger bg-[#ff2e2e33]">Column content</td>
            <td class="border-t border-border text-danger bg-[#ff2e2e33] text-right">Column content</td>
        </tr>
    </tbody>
</table>

Copyright © Developed by DexignZone 2024