feat(widgets): support resizable columns in Table component#1916
Open
realtushartyagi wants to merge 2 commits into
Open
feat(widgets): support resizable columns in Table component#1916realtushartyagi wants to merge 2 commits into
realtushartyagi wants to merge 2 commits into
Conversation
github-actions
Bot
added
type:feature
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughTable.ts now supports optional mouse-driven column resizing via ChangesResizable Table Columns
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/widgets/src/data/Table.ts (1)
424-434: 🎯 Functional Correctness | 🔵 Trivial | ⚖️ Poor tradeoffAny manual column resize is discarded on the next terminal resize.
Since
_lastWidth !== rectWidthtriggers a full_computeColumnWidthsrecompute, any width the user dragged into place is lost the moment the content rect width changes (e.g. terminal resize), even by one column. Consider scaling the cached widths proportionally instead of recomputing from scratch when only the rect width changes (keep the full recompute for column-count changes).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/widgets/src/data/Table.ts` around lines 424 - 434, The _getColWidths method in Table is overwriting user-resized column widths whenever rectWidth changes because the _lastWidth check forces a full _computeColumnWidths recompute. Update the resize path so _columnWidths are proportionally scaled to the new rect width when only the terminal size changes, while preserving the existing full recompute behavior for column-count changes or when _columnWidths is uninitialized; keep the logic localized in _getColWidths and use _lastWidth/_columnWidths to distinguish these cases.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/widgets/src/data/Table.ts`:
- Around line 187-211: Fix the drag-resize handling in Table.handleMouse so it
uses the actual MouseEventType values and no longer relies on a nonexistent dx
field. Track the drag start/previous x position locally from event.x when
mousedown begins, compute the width delta from successive drag events, and
update _columnWidths accordingly in the mousedrag/drag path. Also ensure
markDirty() is called when _isDragging and _dragColIndex change on drag
start/end so the table redraws correctly.
---
Nitpick comments:
In `@packages/widgets/src/data/Table.ts`:
- Around line 424-434: The _getColWidths method in Table is overwriting
user-resized column widths whenever rectWidth changes because the _lastWidth
check forces a full _computeColumnWidths recompute. Update the resize path so
_columnWidths are proportionally scaled to the new rect width when only the
terminal size changes, while preserving the existing full recompute behavior for
column-count changes or when _columnWidths is uninitialized; keep the logic
localized in _getColWidths and use _lastWidth/_columnWidths to distinguish these
cases.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 16bdb986-000b-4250-ab3c-ee1b012387cf
📒 Files selected for processing (1)
packages/widgets/src/data/Table.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR implements interactive resizable columns for the
Tablewidget. By passingresizable: trueintoTableOptions, users can now click and drag on column boundaries in the terminal to dynamically resize columns horizontally in data-heavy CLI applications.Related Issue
Closes #1719
Which package(s)?
@termuijs/widgets
Type of Change
type:bug)type:feature)type:docs)type:testing)type:refactor)type:design)type:accessibility)type:performance)type:devops)type:security)Checklist
needs-starcheck blocks your merge otherwise.bun vitest runbun run buildbun run typecheckCONTRIBUTING.md.type: short description.markDirty()(if your change affects rendering).anytypes without an inline comment explaining why.GSSoC 2026 Participation
https://gssoc.girlscript.org/profile/f49aa65e-aab2-4e9f-99d6-2174f339ecfeScreenshots / Recordings (UI changes)
(Optional: Add a screenshot or GIF showing the drag-to-resize behavior here)
Notes for the Reviewer
Added dynamic state tracking for the
_columnWidthsarray. Whenmousedragevents fire on a column boundary separator, the table immediately adjusts the respective width and re-renders dynamically.Summary by CodeRabbit