HR Employee Database

Manage headcount, departments, and employee records.

Overview

This HR employee database helps people teams maintain a roster of staff, track headcount by department, and export directories for reporting. The app runs entirely in the browser: an editable employee grid, search and filters, charts, an org-chart view, and Excel/PDF export. No server or login is required.

Key features

Employee grid

AG Grid displays Employee ID, Name, Department, Position, Hire Date, Salary, and Status for twelve sample employees across six departments. Cells are editable inline. Optional group by department row grouping collapses the roster by team.

Search, filters, and add employee

Search matches name, ID, position, department, or status. Dropdown filters narrow by department or status (Active, Inactive, Terminated). The Add employee form captures all fields and appends a new row after validating unique employee IDs.

Headcount summary

KPI cards show Total Headcount, Departments (distinct count), Active employees, and Inactive / Terminated combined. A Chart.js pie chart visualizes headcount distribution by department and updates with filters.

Export and status coding

• Export Excel — download the filtered roster as `employee-directory.xlsx`
• PDF Directory — formatted employee list via jsPDF autoTable

Status cells use color coding: green for Active, amber for Inactive, red for Terminated.

Org chart view

Toggle between Table and Org chart. The org view groups employees under department headers with cards showing name, position, and status—no external diagram library required.

Persistence and appearance

Save stores the full employee list in localStorage. Dark mode toggles the layout and chart legend colors; preference is remembered. Responsive layout with a clean header toolbar.

Data & persistence

Twelve sample employees preload on first visit. Saved roster and dark-mode preference persist in localStorage in the same browser.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, SheetJS, jsPDF, and jspdf-autotable—all loaded from CDNs in one self-contained HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.