Skip to content

feat: add reusable EmployeeTable shell component (SDK-539)#1398

Open
krisxcrash wants to merge 1 commit intokw/feat/sdk-547from
kw/feat/sdk-539
Open

feat: add reusable EmployeeTable shell component (SDK-539)#1398
krisxcrash wants to merge 1 commit intokw/feat/sdk-547from
kw/feat/sdk-539

Conversation

@krisxcrash
Copy link
Copy Markdown
Contributor

@krisxcrash krisxcrash commented Mar 27, 2026

Summary

  • Adds a reusable, presentational EmployeeTable shell component under TimeOff/TimeOffManagement/shared/ that composes a search input (with search icon + clear button), DataView with fixed Name/Job title columns plus configurable additionalColumns, and optional PaginationControl
  • Consolidates shared employeeTable i18n keys into a dedicated Company.TimeOff.EmployeeTable namespace and removes duplicated keys from CreateTimeOffPolicy, HolidayPolicy, and TimeOffPolicyDetails
  • Includes 8 Storybook stories (SelectEmployees, SetBalances, PTOEmployeesTab, HolidayEmployeesTab, EmptyState, EmptySearchState, WithPagination, Loading) and 17 unit tests

Details

The component supports 4 consumer contexts via its props:

Consumer selectionMode 3rd Column itemMenu
SelectEmployees 'multiple' Department none
SetBalances none Balance (editable input, max-width toRem(90)) none
PTO/Sick Employees Tab none Balance (read-only) Edit balance, Remove
Holiday Employees Tab none Department Remove

All data columns are left-aligned; only the actions/menu column is right-aligned.

Out of scope

  • Select-all checkbox in table header (SDK-535)
  • API data fetching (consumers handle this)
  • Final empty search results design (uses configurable emptySearchState prop with a generic default)

Test plan

  • All 17 unit tests pass (npm run test -- --run)
  • TypeScript compilation clean (npx tsc --noEmit)
  • Pre-commit hooks (lint, format, build) pass
  • Verify all 8 Storybook stories render correctly (npm run storybook)
  • Verify search input shows/hides clear button based on input value
  • Verify column alignment: data columns left-aligned, actions column right-aligned

Resolves SDK-539

Add a presentational EmployeeTable component under TimeOff/shared that
composes a search input, DataView, and PaginationControl. The component
is consumed by 4 TimeOff contexts (SelectEmployees, SetBalances,
PTO/Sick Employees tab, Holiday Employees tab) with configurable
columns, optional selection, and optional item menus.

- Create EmployeeTable with search (search-lg icon + clear button),
  fixed Name/Job title columns, and additionalColumns prop
- Consolidate shared employeeTable i18n keys into a dedicated
  Company.TimeOff.EmployeeTable namespace; remove duplicates from
  CreateTimeOffPolicy, HolidayPolicy, and TimeOffPolicyDetails
- Add Storybook stories for all 4 consumer variants plus empty,
  empty search, pagination, and loading states
- Add 17 unit tests covering columns, search, selection, menus,
  empty states, and pagination
- Left-align all data columns; right-align only the actions column
- Add balanceInput utility class using toRem(90) for constrained inputs

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant