fix(table): column props not recognized#5950
Conversation
🦋 Changeset detectedLatest commit: 36e4d1e The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
WalkthroughThis PR addresses a bug in table column prop recognition ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 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: 0
🧹 Nitpick comments (2)
apps/docs/app/examples/table/use-case/page.tsx (1)
345-356: LGTM! DOM structure simplification looks good.The removal of the wrapper div around the Dropdown is a clean simplification that reduces unnecessary DOM nesting while preserving all functionality.
Consider adding an example that demonstrates the actual bug fix (column width props) to help users understand what was fixed. For instance, you could add width props to one of the TableColumn components:
<TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"} allowsSorting={column.sortable} width={column.uid === "actions" ? 100 : undefined} > {column.name} </TableColumn>packages/components/table/src/table-column-header.tsx (1)
56-64: Core bug fix looks good - column width props now properly recognized.This correctly addresses issue #1667 by:
- Extracting
width,minWidth, andmaxWidthfromnode.props- Building a
columnStylesobject using the normalized values- Conditionally adding only the props that are provided
The implementation properly handles both numeric and string width values through the
normalizeWidthhelper.For additional type safety, consider adding explicit typing for the width-related props in the node.props interface to ensure only valid CSS width values are accepted. This would catch issues at compile time rather than runtime.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.changeset/fair-years-shave.md(1 hunks)apps/docs/app/examples/table/custom-styles/page.tsx(1 hunks)apps/docs/app/examples/table/use-case/page.tsx(1 hunks)apps/docs/content/components/table/custom-styles.raw.jsx(1 hunks)apps/docs/content/components/table/custom-styles.raw.tsx(1 hunks)apps/docs/content/components/table/use-case.raw.jsx(1 hunks)apps/docs/content/components/table/use-case.raw.tsx(1 hunks)packages/components/table/src/table-column-header.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/docs/content/components/table/use-case.raw.tsx (3)
packages/components/dropdown/src/index.ts (3)
Dropdown(21-21)DropdownTrigger(22-22)DropdownMenu(23-23)apps/docs/content/components/table/custom-styles.raw.jsx (2)
VerticalDotsIcon(269-287)VerticalDotsIcon(269-287)apps/docs/content/components/table/use-case.raw.jsx (2)
VerticalDotsIcon(269-287)VerticalDotsIcon(269-287)
apps/docs/content/components/table/custom-styles.raw.jsx (3)
packages/components/dropdown/src/index.ts (3)
Dropdown(21-21)DropdownTrigger(22-22)DropdownMenu(23-23)apps/docs/content/components/table/use-case.raw.jsx (2)
VerticalDotsIcon(269-287)VerticalDotsIcon(269-287)apps/docs/content/components/table/use-case.raw.tsx (1)
VerticalDotsIcon(57-75)
apps/docs/app/examples/table/custom-styles/page.tsx (1)
packages/components/dropdown/src/index.ts (3)
Dropdown(21-21)DropdownTrigger(22-22)DropdownMenu(23-23)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Continuous Release
- GitHub Check: TypeScript
- GitHub Check: ESLint
- GitHub Check: Build
🔇 Additional comments (8)
.changeset/fair-years-shave.md (1)
1-5: LGTM! Changeset properly documents the patch release.The changeset correctly documents this as a patch-level fix for the table component with appropriate reference to issue #1667.
apps/docs/app/examples/table/custom-styles/page.tsx (1)
353-364: LGTM! Consistent DOM simplification.This change maintains consistency with the other documentation examples by removing the unnecessary wrapper div around the Dropdown component.
apps/docs/content/components/table/use-case.raw.jsx (1)
436-447: LGTM! Consistent simplification in JSX variant.The change maintains consistency across all documentation variants (JSX and TSX) by applying the same DOM simplification pattern.
apps/docs/content/components/table/custom-styles.raw.tsx (1)
456-467: LGTM! Consistent across all documentation files.The Dropdown simplification is applied consistently across all documentation variants.
apps/docs/content/components/table/custom-styles.raw.jsx (1)
444-455: LGTM! Final documentation variant updated consistently.All documentation files now follow the same simplified Dropdown structure pattern.
apps/docs/content/components/table/use-case.raw.tsx (1)
449-460: LGTM! Documentation changes complete.This completes the consistent application of the Dropdown simplification pattern across all documentation examples.
packages/components/table/src/table-column-header.tsx (2)
38-40: LGTM! Clean utility function for width normalization.The
normalizeWidthhelper correctly converts numeric values to pixel strings while preserving string values as-is, enabling flexible width specifications.
85-85: Proper application of computed column styles.The
columnStylesobject is correctly applied to the rendered component via thestyleprop, ensuring the width-related properties are respected in the DOM.
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/image
@heroui/input
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-aria-overlay
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-form-reset
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/use-viewport-size
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
commit: |
1 participant
Closes #
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Bug Fixes
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.