Fixed Data Table Issues#245
Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses UX/styling issues in the DataTable editing experience and corrects a docs GitHub source-link target to point at the monorepo.
Changes:
- Add a hover outline on editable table cells (while avoiding conflict with error/active edit states).
- Improve editing interactions: binary cells toggle on single click; editing cell is cleared when focus leaves the table container.
- Update the docs “Full Code on GitHub” button link to the
blui-reactrepo path.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
packages/component-library/src/core/DataTable/hooks/useEnhancedColumns.ts |
Adds cell hover outline styling and changes click handling (binary cells toggle directly; others enter edit mode). |
packages/component-library/src/core/DataTable/DataTable.tsx |
Disables row hover styling and clears the editing cell on blur when focus leaves the table wrapper. |
docs/src/shared/FullCodeOnGithubButton.tsx |
Updates the GitHub URL to the monorepo location. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <Box | ||
| onBlur={(e: React.FocusEvent<HTMLDivElement>): void => { | ||
| // Clear editing cell when focus moves outside the table container | ||
| // so the blue outline doesn't persist after clicking away. | ||
| if (!e.currentTarget.contains(e.relatedTarget as Node)) { | ||
| tableRef.current?.setEditingCell(null); | ||
| } | ||
| }} |
❌ Black Duck SCA —
|
| Severity | Components |
|---|---|
| 🔴 Critical | 1 |
| 🟠 High | 10 |
Action required: resolve the High/Critical vulnerabilities above to pass this check.
|
@ArshdeepSingh3-eaton the view full code on github is currently taking the user to master branch, and this code is currently not on master which is giving 404. Can we navigate it to dev for now? |
|
it's picking it up from dev it is associated with |
Fixes # .
Changes proposed in this Pull Request:
Screenshots / Screen Recording (if applicable)
To Test:
Any specific feedback you are looking for?
PR Readiness Checklist
Please confirm all items below have been addressed prior to requesting review: