Aiblux - Admin & Dashboard Template

Table Component

Information Table One

Instructor Name	Category	Classes	Last Update	Total Student	Action
Darrell Steward	Development	Introduction CSS	1/31/14	8,013	More
Brooklyn Simmons	Web Design	Design layout	5/19/12	5,560	More
Annette Black	UX/UI Design	User Research	1/28/17	1,148	More
Darrell Steward	Development	Introduction CSS	1/31/14	8,013	More
Marvin McKinney	Marketing	Introduction CSS	1/31/14	3,933	More

Showing 1 to 8 of 20 entries

                            
                                <div class="flex-center-between">
                                    <div class="flex items-center gap-5">
                                        <form class="max-w-80 relative">
                                            <span class="absolute top-1/2 -translate-y-[40%] left-2.5">
                                                <i class="ri-search-line text-gray-900 dark:text-dark-text text-[14px]"></i>
                                            </span>
                                            <input type="text" placeholder="Search for..." class="form-input pl-[30px]">
                                        </form>
                                        <button type="button" class="font-spline_sans text-sm px-1 text-gray-900 dark:text-dark-text flex-center gap-1.5">
                                            <i class="ri-loop-right-line text-gray-900 dark:text-dark-text text-sm"></i>
                                            <span>Refresh</span>
                                        </button>
                                    </div>
                                    <button class="btn b-light btn-primary-light">
                                        <i class="ri-add-fill text-inherit"></i>
                                        <span>Add Data</span>
                                    </button>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="table-auto border-collapse dk-border-one w-full whitespace-nowrap text-left text-gray-900 dark:text-dark-text font-medium leading-none">
                                        <thead class="border-b-[0.5px] border-gray-200 dark:border-dark-border text-gray-500 dark:text-dark-text font-medium">
                                            <tr>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one">Instructor Name</th>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one">Category</th>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one">Classes</th>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one">Last Update</th>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one w-10">Total Student</th>
                                                <th class="p-6 py-4 bg-[#F2F4F9] dark:bg-dark-card-two dk-border-one w-10">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-200 dark:divide-dark-border-three">
                                            <tr>
                                                <td class="p-6 py-4 dk-border-one">Darrell Steward</td>
                                                <td class="p-6 py-4 dk-border-one">Development</td>
                                                <td class="p-6 py-4 dk-border-one">Introduction CSS</td>
                                                <td class="p-6 py-4 dk-border-one">1/31/14</td>
                                                <td class="p-6 py-4 dk-border-one">8,013</td>
                                                <td class="p-6 py-4 dk-border-one">
                                                    <div class="flex items-center gap-2">
                                                        <a href="chatbox.html" class="btn-icon btn-primary-icon-light size-7">
                                                            <i class="ri-message-2-line text-inherit text-[13px]"></i>
                                                        </a>
                                                        <a href="#" class="btn-icon btn-danger-icon-light size-7">
                                                            <i class="ri-delete-bin-line text-inherit text-[13px]"></i>
                                                        </a>
                                                        <div class="relative ml-5">
                                                            <button data-popover-target="td-0" data-popover-trigger="click" data-popover-placement="bottom-end" class="size-7 rounded-50 flex-center hover:bg-gray-200 dark:hover:bg-dark-icon">
                                                                <i class="ri-more-2-fill text-inherit"></i>
                                                            </button>
                                                            <ul id="td-0" class="popover-target invisible" data-popover>
                                                                <li>
                                                                    <a class="popover-item" href="#">More</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="flex-center-between">
                                    <div class="font-spline_sans text-sm text-gray-900 dark:text-dark-text">Showing 1 to 8 of 20 entries</div>
                                    <nav class="dk-border-one rounded-[4px] overflow-hidden">
                                        <ul class="divide-x divide-gray-200 dark:divide-dark-border-three flex items-center">
                                            <li>
                                                <a href="#" class="font-spline_sans font-medium flex-center size-8 text-gray-900 dark:text-dark-text bg-white dark:bg-dark-card-two hover:bg-primary-500 hover:text-white [&.active]:bg-primary-500 [&.active]:text-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 -rotate-45">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 19.5-15-15m0 0v11.25m0-11.25h11.25" />
                                                    </svg>                                            
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="font-spline_sans font-medium flex-center size-8 text-gray-900 dark:text-dark-text bg-white dark:bg-dark-icon hover:text-primary-500 [&.active]:text-primary-500 active">1</a>
                                            </li>
                                            <li>
                                                <a href="#" class="font-spline_sans font-medium flex-center size-8 text-gray-900 dark:text-dark-text bg-white dark:bg-dark-icon hover:text-primary-500 [&.active]:text-primary-500">
                                                    <i class="ri-more-fill text-inherit"></i>                                              
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="font-spline_sans font-medium flex-center size-8 text-gray-900 dark:text-dark-text bg-white dark:bg-dark-icon hover:text-primary-500 [&.active]:text-primary-500">10</a>
                                            </li>
                                            <li>
                                                <a href="#" class="font-spline_sans font-medium flex-center size-8 text-gray-900 dark:text-dark-text bg-white dark:bg-dark-card-two hover:bg-primary-500 hover:text-white [&.active]:bg-primary-500 [&.active]:text-white active">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 rotate-45">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
                                                    </svg>                                                                                          
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>

Information Table Two

Instructor Name	Category	Classes	Last Update	Total Student	Action
Darrell Steward	Business Growths	Learn Thinking	5/7/16	8,829	More
Brooklyn Simmons	Meditations	Mind Balance	9/4/12	1,374	More
Annette Black	App Development	Function Understand	12/10/13	3,933	More
Eleanor Pena	Graphic Design	Branding Idea	8/30/14	1,013	More
Cameron Williamson	Marketing	Introduction	10/21/19	2,013	More

Showing 1 to 8 of 20 entries

                            
                                <p>Sorry we can't show the huge data table</p>

Student Information Table

Name	Status	Last Activities	Course Name	Purchase	Progress	Action
Eleanor Pena UX/UI Design	Success	2023-10-22	Web Design	5 - Course	55% Growing	More
Esther Howard Web & Mobile Application	Warning	2024-10-22	Management	4 - Course	20% Growing	More
Albert Flores Business Strategy	Info	2024-10-22	Developmnet	1 - Course	30% Growing	More
Darlene Robertson Frontend Developer	Danger	2021-11-02	Marketing	1 - Course	70% Growing	More
Devon Lane Visual Designer	Success	2021-11-02	Business Strategy	10 - Course	15% Growing	More

Showing 1 to 8 of 20 entries

                            
                                <p>Sorry we can't show the huge data table</p>

Student Information Table

Instructor Name	Category	Student	Date	Progress
Cameron Williamson	Development	+5	2018-08-26	55% Growing
Annette Black	Advanced CSS	+5	2019-08-26	45% Growing
Ronald Richards	Web Design	+5	2021-01-01	10% Growing
Cody Fisher	Marketing	+5	2012-02-06	91% Growing
Leslie Alexander	Development	+5	2018-08-26	20% Growing

Showing 1 to 8 of 20 entries

                            
                                <p>Sorry we can't show the huge data table</p>

English

Spanish

French

Italian

Arabic

Apps

Components

Help

Personalize Settings

Theme Mode

Table Component

Information Table One

Information Table Two

Student Information Table

Eleanor Pena

Esther Howard

Albert Flores

Darlene Robertson

Devon Lane

Student Information Table