Basic Tables | Dreams Core - Tailwind Admin Template

Basic Example

Firstname	Email	Status
Mary	john@example.com	Active
Moe	mary@example.com	Active
Dooley	july@example.com	Inactive

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead class="border border-border-color">
				<tr>
					<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Status</th> 
				</tr>
			</thead>
			<tbody class="border border-border-color">
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Mary</span>
					</td> 
					<td class="px-4 py-3 text-start">john@example.com</td>
					<td class="px-4 py-3 text-start">
						<span class="badge rounded-lg text-sm font-medium bg-success-50 text-success border border-success">Active</span>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Moe</span>
					</td> 
					<td class="px-4 py-3 text-start">mary@example.com</td>
					<td class="px-4 py-3 text-start">
						<span class="badge rounded-lg text-sm font-medium bg-success-50 text-success border border-success">Active</span>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Dooley</span>
					</td> 
					<td class="px-4 py-3 text-start">july@example.com</td>
					<td class="px-4 py-3 text-start">
						<span class="badge rounded-lg text-sm font-medium bg-danger-50 text-danger border border-danger">Inactive</span>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>

Dark Table

Firstname	Email	Action
Mary	john@example.com	View Details Edit Delete
Moe	mary@example.com	View Details Edit Delete
Dooley	july@example.com	View Details Edit Delete

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead class="border border-border-color">
				<tr class="bg-dark text-white">
					<th class="px-4 py-2 text-start">Firstname</th> 
					<th class="px-4 py-2 text-start">Email</th> 
					<th class="px-4 py-2 text-start">Action</th> 
				</tr>
			</thead>
			<tbody class="border border-border-color">
				<tr class="border-b border-border-color bg-dark text-white">
					<td class="inline-flex  w-full items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-white">Mary</span>
					</td> 
					<td class="px-4 py-3 text-start">john@example.com</td>
					<td class="px-4 py-3 text-start">
						<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
							<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
								<i class="icon-ellipsis-vertical"></i>
							</button>

							<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
								<div class="p-2 space-y-1">
									<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-eye text-gray-900 me-2"></i>View Details
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-pencil-line me-2"></i>Edit
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
									</a>
								</div>
							</div>
						</div>
					</td>
				</tr> 
				<tr class="border-b border-border-color bg-dark text-white">
					<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-white">Moe</span>
					</td> 
					<td class="px-4 py-3 text-white">mary@example.com</td>
					<td class="px-4 py-3 text-white">
						<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
							<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
								<i class="icon-ellipsis-vertical"></i>
							</button>

							<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
								<div class="p-2 space-y-1">
									<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-eye text-gray-900 me-2"></i>View Details
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-pencil-line me-2"></i>Edit
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
									</a>
								</div>
							</div>
						</div>
					</td>
				</tr> 
				<tr class="border-b border-border-color bg-dark text-white">
					<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-white">Dooley</span>
					</td> 
					<td class="px-4 py-3 text-white">july@example.com</td>
					<td class="px-4 py-3 text-white">
						<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
							<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
								<i class="icon-ellipsis-vertical"></i>
							</button> 
							<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
								<div class="p-2 space-y-1">
									<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-eye text-gray-900 me-2"></i>View Details
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-pencil-line me-2"></i>Edit
									</a>
									<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
										<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
									</a>
								</div>
							</div>
						</div>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>

Bordered Table

Firstname	Email	Action
John	john@example.com
Mary	mary@example.com
July	july@example.com

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead class="border border-border-color">
				<tr>
					<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
				</tr>
			</thead>
			<tbody class="border border-border-color">
				<tr class="border border-border-color">
					<td class="border border-border-color px-4 py-3 text-start">John</td> 
					<td class="border border-border-color px-4 py-3 text-start">john@example.com</td>
					<td class="border border-border-color px-4 py-3 text-start">
						<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
					</td>
				</tr> 
				<tr class="border border-border-color">
					<td class="border border-border-color px-4 py-3 text-start">Mary</td> 
					<td class="border border-border-color px-4 py-3 text-start">mary@example.com</td>
					<td class="border border-border-color px-4 py-3 text-start">
						<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
					</td>
				</tr> 
				<tr class="border border-border-color">
					<td class="border border-border-color px-4 py-3 text-start">July</td> 
					<td class="border border-border-color px-4 py-3 text-start">july@example.com</td>
					<td class="border border-border-color px-4 py-3 text-start">
						<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>

Striped Rows

Firstname	Lastname	Action
John	john@example.com
Mary	mary@example.com
July	july@example.com

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead>
				<tr>
					<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th>
					<th class="px-4 py-2 bg-light text-dark text-start">Lastname</th>
					<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
				</tr>
			</thead>
			<tbody>
				<tr class="bg-light">
					<td class="px-4 py-3 text-start">John</td> 
					<td class="px-4 py-3 text-start">john@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
					</td>
				</tr> 
				<tr>    
					<td class="px-4 py-3 text-start">Mary</td> 
					<td class="px-4 py-3 text-start">mary@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
					</td>
				</tr> 
				<tr  class="bg-light">
					<td class="px-4 py-3 text-start">July</td> 
					<td class="px-4 py-3 text-start">july@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>

Actions Tables

Firstname	Email	Action
Mary	john@example.com
Moe	mary@example.com
Dooley	july@example.com

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead class="border border-border-color">
				<tr>
					<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
				</tr>
			</thead>
			<tbody class="border border-border-color">
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Mary</span>
					</td> 
					<td class="px-4 py-3 text-start">john@example.com</td>
					<td class="px-4 py-3 text-start flex gap-2">
						<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Moe</span>
					</td> 
					<td class="px-4 py-3 text-start">mary@example.com</td>
					<td class="px-4 py-3 text-start flex gap-2">
						<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Dooley</span>
					</td> 
					<td class="px-4 py-3 text-start">july@example.com</td>
					<td class="px-4 py-3 text-start flex gap-2">
						<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
						<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>

Button Tables

Firstname	Email	Action
Mary	john@example.com
Moe	mary@example.com
Dooley	july@example.com

	
	
	<div class="overflow-auto">
		<table class="table-auto mb-0 w-full">
			<thead class="border border-border-color">
				<tr>
					<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
					<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
				</tr>
			</thead>
			<tbody class="border border-border-color">
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Mary</span>
					</td> 
					<td class="px-4 py-3 text-start">john@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Moe</span>
					</td> 
					<td class="px-4 py-3 text-start">mary@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
					</td>
				</tr> 
				<tr class="border-b border-border-color">
					<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
						<span class="relative flex shrink-0">
							<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
							<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
						</span>
						<span class="text-dark">Dooley</span>
					</td> 
					<td class="px-4 py-3 text-start">july@example.com</td>
					<td class="px-4 py-3 text-start">
						<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
					</td>
				</tr> 
			</tbody>
		</table>
	</div>