feat(table): 🎸 add isResponsive prop to control mobile layout behavior#881
feat(table): 🎸 add isResponsive prop to control mobile layout behavior#881
Conversation
…nversion Add new prop to Table component that disables the automatic conversion to mobile list view on narrow screens, keeping the table layout with horizontal scroll instead. Changes: - Add disableMobileListView?: boolean prop (default: false) - Set data-responsive-mode attribute on TableOuterContainer - Wrap all mobile @media queries with [data-responsive-mode="list"] & selector - When disableMobileListView=true, mobile styles don't apply Benefits: - Simple implementation (3 main changes) - No prop threading through nested components - Clean CSS selector approach - Backward compatible (default behavior unchanged) Use case: When you want tables to scroll horizontally on mobile instead of converting to a list view format.
🦋 Changeset detectedLatest commit: 2420da6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Claude finished @punkbit's task in 1m 34s —— View job Code ReviewTasks
Nice work on migrating from hardcoded There are a few things worth addressing before merging: 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 10s —— View job Tasks
Nice clean approach using a 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 7s —— View job Tasks
Good progress — the changeset is now present and well-formed. The hardcoded 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 0s —— View job Tasks
Nice approach using a One functional gap still needs to be addressed before merging: 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 19s —— View job Tasks
Good pattern overall — using 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 24s —— View job Tasks
Good pattern and solid approach using 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 51s —— View job Tasks
Good progress overall — the One functional issue still needs to be addressed before merging: Must Fix
Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 21s —— View job Tasks
Good iteration — the changeset semantics are now correct and consistent with the implementation, and the Storybook story docs match the code. Two issues remain before merging. 🚨 Must Fix
💡 Suggestions (non-blocking)
|
…nce scroll only activates when content overflows
|
Claude finished @punkbit's task in 1m 3s —— View job Tasks
Good progress! The latest commit ( One blocking issue remains before merge: 🚨 Must Fix
💡 Suggestions (non-blocking)
|
|
Claude finished @punkbit's task in 1m 22s —— View job Tasks
All previously flagged blockers have been resolved in this round of commits. The PR is in good shape. 🙌 Resolved since last review:
💡 Suggestions (non-blocking)
No blockers remain. ✅ |
|
Claude finished @punkbit's task in 1m 19s —— View job Tasks
Great iteration! All blocking issues from the previous review rounds are now resolved. Here's the current state: ✅ Fixed
💡 Suggestions (non-blocking)
This is ready to merge in my view — the implementation is sound, tests are in place, docs are accurate. 🚀 |
|
Claude finished @punkbit's task in 57s —— View job Tasks
All the blocking issues from previous review rounds are resolved. This is in good shape to merge. 🙌 ✅ Resolved
💡 Suggestions (non-blocking)
No blockers. ✅ |
|
Claude finished @punkbit's task in 40s —— View job Tasks
All previously flagged blockers are now resolved. The PR is in great shape. 🙌 ✅ Resolved
💡 Suggestions (non-blocking)
No blockers remain. ✅ Ready to merge. |
📚 Storybook Preview Deployed✅ Preview URL: https://click-9d2mfwf7o-clickhouse.vercel.app Built from commit: |
Why?
Adds a new
isResponsiveprop to the Table component. When set totrue, the table maintains its standard layout with horizontal scroll on narrow screens instead of automatically converting to a mobile list view. The default behavior (isResponsive={false}) remains unchanged.The implementation uses a
data-responsive-modedata attribute to conditionally apply mobile list styles.🍰 Original contribution by @maxknv maxknv (#877), retained credit/commit history.
How?
disableMobileListView?: booleanprop (default:false)data-responsive-modeattribute onTableOuterContainer[data-responsive-mode="list"] &selectordisableMobileListView=true, mobile styles don't applyPreview?
demo-table-is-responsive-control.mov