این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • جدول
پیش فرض

در این مثال از یک جدول برای نمایش اطلاعات کاربران استفاده شده است. در این جدول، اطلاعاتی مانند عکس پروفایل، نام، ایمیل، وضعیت آنلاین و موارد دیگر را مشاهده می‌کنید.

<!-- table container -->
<div class="overflow-x-auto">
    <!-- table -->
    <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
        <!-- table:thead -->
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                    نام
                </th>
                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                    عنوان
                </th>
                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                    وضعیت
                </th>
                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                    نفش
                </th>
                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                    اقدامات
                </th>
            </tr>
        </thead><!-- end table:thead -->

        <!-- table:tbody -->
        <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
            <!-- table:row -->
            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                <td class="px-3 py-4">
                    <input type="checkbox"
                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                        checked />
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://i.pravatar.cc/150?img=68" class="w-full h-full object-cover" alt="..." />
                        </div>
                        <div
                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                            <span>جلال بهرامی راد</span>
                            <span class="font-sans">bahramirad@example.com</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                    فرانت اند دولوپر
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div
                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                        <span class="font-semibold text-xs">فعال</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                    مدیر
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <a href="#" class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                پروفایل</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <a href="#" class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <button type="button" class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr><!-- end table:row -->

            <!-- table:row -->
            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                <td class="px-3 py-4">
                    <input type="checkbox"
                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                        checked />
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://i.pravatar.cc/150?img=3" class="w-full h-full object-cover" alt="..." />
                        </div>
                        <div
                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                            <span>اشکان جهانگیری</span>
                            <span class="font-sans">ashkan@example.com</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                    بک اند دولوپر
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div
                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                        <span class="font-semibold text-xs">فعال</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                    مدیر
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <a href="#" class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                پروفایل</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <a href="#" class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <button type="button" class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr><!-- end table:row -->

            <!-- table:row -->
            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                <td class="px-3 py-4">
                    <input type="checkbox"
                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                        checked />
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://i.pravatar.cc/150?img=8" class="w-full h-full object-cover" alt="..." />
                        </div>
                        <div
                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                            <span>امید شکیبا</span>
                            <span class="font-sans">omid@example.com</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                    مشاور سئو
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div
                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                        <span class="font-semibold text-xs">فعال</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                    کارمند
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <a href="#" class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                پروفایل</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <a href="#" class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <button type="button" class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr><!-- end table:row -->

            <!-- table:row -->
            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                <td class="px-3 py-4">
                    <input type="checkbox"
                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                        checked />
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://i.pravatar.cc/150?img=47" class="w-full h-full object-cover" alt="..." />
                        </div>
                        <div
                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                            <span>مهسا مهربان</span>
                            <span class="font-sans">mahsa@example.com</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                    طراح
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div
                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                        <span class="font-semibold text-xs">فعال</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                    کارمند
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <a href="#" class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                پروفایل</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <a href="#" class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <button type="button" class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr><!-- end table:row -->

            <!-- table:row -->
            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                <td class="px-3 py-4">
                    <input type="checkbox"
                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                        checked />
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://i.pravatar.cc/150?img=31" class="w-full h-full object-cover" alt="..." />
                        </div>
                        <div
                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                            <span>سارا تاجیک</span>
                            <span class="font-sans">sara@example.com</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                    طراح
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div
                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                        <span class="font-semibold text-xs">فعال</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                    کارمند
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <a href="#" class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                پروفایل</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <a href="#" class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                        <button type="button" class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5">
                                <path
                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                </path>
                            </svg>
                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr><!-- end table:row -->
        </tbody><!-- end table:tbody -->
    </table><!-- end table -->
</div><!-- end table container -->