hr employees team management table directory admin dashboard hr employees team directory management table filter admin dashboard employee directory table with filters HR team management dashboard
HR Employee List Base
Fetch pattern JSON:
curl https://webspire.de/patterns/hr-employee-list/base.json base.html
<section class="ws-hr-employee-list bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<h2 class="text-2xl font-bold text-slate-900">Employees</h2>
<p class="mt-1 text-sm text-slate-500">Manage your team members and their account permissions.</p>
<!-- Filter bar -->
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center">
<select class="rounded-xl border border-slate-300 bg-[var(--ws-color-surface)] px-4 py-2.5 text-sm text-slate-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20">
<option value="">All Departments</option>
<option>Engineering</option>
<option>Design</option>
<option>Marketing</option>
<option>Sales</option>
<option>Human Resources</option>
</select>
<select class="rounded-xl border border-slate-300 bg-[var(--ws-color-surface)] px-4 py-2.5 text-sm text-slate-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20">
<option value="">All Status</option>
<option>Active</option>
<option>On Leave</option>
<option>Inactive</option>
</select>
<div class="relative sm:ml-auto">
<svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="search" placeholder="Search employees..." class="w-full rounded-xl border border-slate-300 bg-[var(--ws-color-surface)] py-2.5 pl-10 pr-4 text-sm text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 sm:w-64" />
</div>
</div>
<!-- Table -->
<div class="mt-6 overflow-x-auto rounded-xl border border-slate-200">
<table class="w-full text-left text-sm">
<caption class="sr-only">Employee directory with department, designation, and status information</caption>
<thead>
<tr class="border-b border-slate-200 bg-slate-50">
<th scope="col" class="px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Employee</th>
<th scope="col" class="hidden px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 sm:table-cell">Department</th>
<th scope="col" class="hidden px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 md:table-cell">Designation</th>
<th scope="col" class="hidden px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 lg:table-cell">Joined</th>
<th scope="col" class="px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-700">AK</div>
<div>
<p class="font-medium text-slate-900">Ava Kim</p>
<p class="text-xs text-slate-500">ava.kim@company.com</p>
</div>
</div>
</td>
<td class="hidden px-5 py-4 sm:table-cell"><span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Engineering</span></td>
<td class="hidden px-5 py-4 text-slate-600 md:table-cell">Senior Frontend Developer</td>
<td class="hidden px-5 py-4 text-slate-500 lg:table-cell">Jan 15, 2024</td>
<td class="px-5 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-rose-100 text-sm font-medium text-rose-700">MJ</div>
<div>
<p class="font-medium text-slate-900">Marcus Johnson</p>
<p class="text-xs text-slate-500">marcus.j@company.com</p>
</div>
</div>
</td>
<td class="hidden px-5 py-4 sm:table-cell"><span class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-700">Design</span></td>
<td class="hidden px-5 py-4 text-slate-600 md:table-cell">Lead Product Designer</td>
<td class="hidden px-5 py-4 text-slate-500 lg:table-cell">Mar 3, 2023</td>
<td class="px-5 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-sm font-medium text-amber-700">SP</div>
<div>
<p class="font-medium text-slate-900">Sofia Patel</p>
<p class="text-xs text-slate-500">sofia.p@company.com</p>
</div>
</div>
</td>
<td class="hidden px-5 py-4 sm:table-cell"><span class="rounded-full bg-pink-100 px-2.5 py-0.5 text-xs font-medium text-pink-700">Marketing</span></td>
<td class="hidden px-5 py-4 text-slate-600 md:table-cell">Marketing Manager</td>
<td class="hidden px-5 py-4 text-slate-500 lg:table-cell">Jun 22, 2023</td>
<td class="px-5 py-4"><span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">On Leave</span></td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-medium text-emerald-700">LC</div>
<div>
<p class="font-medium text-slate-900">Liam Chen</p>
<p class="text-xs text-slate-500">liam.chen@company.com</p>
</div>
</div>
</td>
<td class="hidden px-5 py-4 sm:table-cell"><span class="rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700">Sales</span></td>
<td class="hidden px-5 py-4 text-slate-600 md:table-cell">Account Executive</td>
<td class="hidden px-5 py-4 text-slate-500 lg:table-cell">Sep 10, 2024</td>
<td class="px-5 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-200 text-sm font-medium text-slate-600">ER</div>
<div>
<p class="font-medium text-slate-900">Emma Rodriguez</p>
<p class="text-xs text-slate-500">emma.r@company.com</p>
</div>
</div>
</td>
<td class="hidden px-5 py-4 sm:table-cell"><span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Engineering</span></td>
<td class="hidden px-5 py-4 text-slate-600 md:table-cell">Backend Developer</td>
<td class="hidden px-5 py-4 text-slate-500 lg:table-cell">Nov 1, 2022</td>
<td class="px-5 py-4"><span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500">Inactive</span></td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="mt-6 flex items-center justify-between">
<p class="text-sm text-slate-500">Showing <span class="font-medium text-slate-700">1</span> to <span class="font-medium text-slate-700">5</span> of <span class="font-medium text-slate-700">48</span> employees</p>
<nav class="flex items-center gap-1" aria-label="Pagination">
<button class="rounded-lg px-3 py-2 text-sm text-slate-500 transition hover:bg-slate-100 dark:hover:bg-slate-800" disabled>Previous</button>
<button class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium text-white" aria-current="page">1</button>
<button class="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 dark:hover:bg-slate-800">2</button>
<button class="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 dark:hover:bg-slate-800">3</button>
<span class="px-2 text-slate-400">...</span>
<button class="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 dark:hover:bg-slate-800">10</button>
<button class="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 dark:hover:bg-slate-800">Next</button>
</nav>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
hremployeesteammanagementtabledirectoryadmindashboard
Slots
| Name | Required | Description |
|---|---|---|
| filters | Yes | Department select, status select, and search input. |
| table | Yes | Employee data table with avatar, name, department, designation, date, status. |
| pagination | Yes | Page count info and page navigation buttons. |