Skip to content

feat(design): add column resize handles to LedgerTable (#463) - #574

Open
laurentketterle-hub wants to merge 1 commit into
RevoraOrg:masterfrom
laurentketterle-hub:feat/issue-463-column-resize
Open

feat(design): add column resize handles to LedgerTable (#463)#574
laurentketterle-hub wants to merge 1 commit into
RevoraOrg:masterfrom
laurentketterle-hub:feat/issue-463-column-resize

Conversation

@laurentketterle-hub

Copy link
Copy Markdown
Contributor

Description

Implements column resize for the virtualized Ledger table (#463).

Changes

  • Added ResizeHandle component with drag-to-resize functionality
  • Mouse drag resizing with visual feedback
  • Keyboard accessible (Tab to handle, aria-label)
  • Column widths persist via state
  • Minimum column width of 80px enforced
  • Visual resize indicator (dashed outline) during resize
  • Resize handle CSS with hover/active/dragging states

Accessibility

  • Resize handles have role="separator", aria-orientation="vertical"
  • Keyboard accessible (focusable via Tab)
  • No text selection during resize

Testing

  • Added LedgerTable.resize.test.tsx with 3 test cases
  • Tests verify resize handles render, ARIA roles, and keyboard support

Closes #463

@laurentketterle-hub

Copy link
Copy Markdown
Contributor Author

I claim this bounty. PR ready for review.

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.

[UI/UX Design] Design sticky column headers and resize UX for the virtualized Ledger

1 participant