feat: rowclick disable functionality added#584
Conversation
🦋 Changeset detectedLatest commit: fcd30d5 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 |
Summary by CodeRabbit
WalkthroughThe changes introduce a new prop, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DataTable
participant DataTableBody
User->>DataTable: Renders with enableRowClick (bool or fn) and onRowClick
DataTable->>DataTableBody: Passes enableRowClick and onRowClick
DataTableBody->>User: Renders rows
User->>DataTableBody: Clicks on a row
DataTableBody->>DataTableBody: Checks enableRowClick (bool or fn) for row
alt Row click enabled
DataTableBody->>DataTable: Calls onRowClick(row, rowId)
else Row click disabled
DataTableBody-->>User: No action
end
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/react/src/components/DataTable/story/DataTable.stories.tsx (2)
370-422: Great demonstration of the newenableRowClickfunctionalityThis new story effectively demonstrates the conditional row click functionality by disabling clicks on a specific row (ID '3'). The implementation is clear and includes helpful context for users to understand which row will have clicking disabled.
One minor suggestion - consider adding a visual indicator (such as a different cursor or styling) for the disabled row to make it more obvious to users which row has clicking disabled.
css={{ '.manifest-table__row:hover': { backgroundColor: '$background-hover', + }, + '.manifest-table__row[data-disabled-click="true"]': { + cursor: 'default', + opacity: 0.7 }, }}
416-416: Consider adding a comment explaining the conditionThe condition
rowId !== '3'works for the example, but a brief comment would help readers understand the intent more quickly.- enableRowClick={(row, rowId) => rowId !== '3'} + // Disable row click for row with ID '3' to demonstrate conditional click functionality + enableRowClick={(row, rowId) => rowId !== '3'}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.changeset/sixty-ravens-sip.md(1 hunks)packages/react/docs.json(2 hunks)packages/react/src/components/DataTable/DataTable.tsx(2 hunks)packages/react/src/components/DataTable/DataTable.types.ts(2 hunks)packages/react/src/components/DataTable/components/DataTableBody/DataTableBody.tsx(1 hunks)packages/react/src/components/DataTable/story/DataTable.stories.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/react/src/components/DataTable/components/DataTableBody/DataTableBody.tsx (1)
packages/react/src/components/DataTable/components/DataTableCell/DataTableCell.tsx (1)
DataTableCell(9-40)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Validate
- GitHub Check: Changeset
🔇 Additional comments (9)
.changeset/sixty-ravens-sip.md (1)
5-5: LGTM! Changeset description accurately captures the feature.The changeset message clearly describes the new functionality being added.
packages/react/src/components/DataTable/DataTable.tsx (2)
66-66: LGTM! New prop added with sensible default.The
enableRowClickprop is added with a default value oftrue, which maintains backward compatibility with the existing behavior where rows are clickable by default.
162-162: LGTM! Option added to table configuration.The
enableRowClickprop is correctly passed to the table options, making it available to the DataTableBody component.packages/react/docs.json (1)
498-503: LGTM! Documentation for new property is clear and accurate.The new
enableRowClickproperty is properly documented with its type and purpose.packages/react/src/components/DataTable/components/DataTableBody/DataTableBody.tsx (2)
10-14: LGTM! Row clickability logic is well-implemented.The implementation correctly extracts the options from the table configuration and handles both boolean and function forms of the
enableRowClickprop.
16-32: LGTM! Row click handling and styling is correctly implemented.The code:
- Adds pointer cursor styling only when a row is clickable and
onRowClickis defined- Invokes
onRowClickonly when the row is clickable- Uses the updated parameter order (row.original, row.id)
This implementation correctly enables/disables row click functionality based on the condition.
packages/react/src/components/DataTable/DataTable.types.ts (1)
143-148: Good addition of theenableRowClickpropThe new
enableRowClickprop is well designed, providing flexibility by accepting either a boolean for global control or a function for per-row conditional enabling. The documentation is clear and the implementation follows the existing pattern of other enable/disable props in the component.packages/react/src/components/DataTable/story/DataTable.stories.tsx (2)
341-347: Updated state handling for the newonRowClicksignatureThe state variables and handler function have been correctly updated to match the new
onRowClicksignature, storing both the row object and row ID separately. This is a good pattern that makes it clear what information is being tracked.
352-354: Improved display of selected row informationThe display now clearly shows both the selected row index and the serialized row data, which provides better context for users of the story.
| onRowSelectionChange, | ||
| onSortingChange, | ||
| onScroll, | ||
| enableRowClick = true, |
There was a problem hiding this comment.
@ssolanki-p44 Do we need default value as true ?
4 participants
Closes #
📝 Description
Added row click disable functionality based on a condition, style applied only if onRowClick is passed and entire row is clickable
Screenshots
Merge checklist