Building a People-Management Interface in React & TypeScript
Contributed to a React/TypeScript people-management interface — data tables, search, drag-and-drop column management, and sticky headers — built from Figma.
The Challenge
A React/TypeScript application needed a complex people-management table — searchable, paginated, with user-configurable columns — implemented precisely from Figma while integrating with existing API and state patterns already in use across the codebase.
My Role
Implemented and refined UI features within an existing React/TypeScript codebase, working from Figma specs and existing architectural conventions rather than starting from a blank slate.
Approach
Worked inside the established component and state patterns already in the codebase rather than introducing new ones, focusing on matching Figma exactly for spacing, alignment, and interaction states. Built out column visibility management, drag-and-drop reordering, sticky table headers, and synchronized search/pagination state with the UI.
Technical Challenges
Sticky headers and drag-and-drop column reordering both interact awkwardly with table virtualization and scroll containers — getting them to behave correctly together, while keeping custom fields and search state in sync with the visible columns, took careful, incremental testing rather than a single clean implementation.
Outcome
Delivered a table interface that matched the Figma spec and integrated cleanly with the existing application — concrete, hands-on evidence of applying 12 years of production discipline to a modern React codebase.