Skip to content

Fixed Data Table Issues#245

Merged
ArshdeepSingh3-eaton merged 2 commits into
devfrom
feature/blui-7249-fix-editable-table-issues
May 26, 2026
Merged

Fixed Data Table Issues#245
ArshdeepSingh3-eaton merged 2 commits into
devfrom
feature/blui-7249-fix-editable-table-issues

Conversation

@ArshdeepSingh3-eaton
Copy link
Copy Markdown
Contributor

@ArshdeepSingh3-eaton ArshdeepSingh3-eaton commented May 19, 2026

Fixes # .

Changes proposed in this Pull Request:

Screenshots / Screen Recording (if applicable)

Screenshot 2026-05-19 at 11 57 58 AM

To Test:

  • run yarn start:showcase at the monorepo level
  • go to data display in the app and scroll to editable table

Any specific feedback you are looking for?

PR Readiness Checklist

Please confirm all items below have been addressed prior to requesting review:

  • Code has been formatted with Prettier
  • Code passes all linting checks
  • All tests pass
  • Code builds successfully
  • Translations have been updated (if applicable)
  • Documentation has been updated (if applicable)
  • Changelog has been updated (if applicable)

Copilot AI review requested due to automatic review settings May 19, 2026 06:28
@github-actions github-actions Bot added the brightlayer-ui set to identify Brightlayer UI platform issues for easy filtering label May 19, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-react repo 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.

Comment on lines +458 to +466
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);
}
}}
Comment thread docs/src/shared/FullCodeOnGithubButton.tsx
@github-actions
Copy link
Copy Markdown

❌ Black Duck SCA — packages/component-library — FAILED

Severity Components
🔴 Critical 1
🟠 High 10

Action required: resolve the High/Critical vulnerabilities above to pass this check.

@shubham-eaton
Copy link
Copy Markdown
Contributor

@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?

@ArshdeepSingh3-eaton
Copy link
Copy Markdown
Contributor Author

it's picking it up from dev it is associated with
when this get's hosted it igets corrected i do not want to update this logic if we can avoid it
will need a lot of testing in this case as it will effect the whole of dev docs

@ArshdeepSingh3-eaton ArshdeepSingh3-eaton merged commit 7827f06 into dev May 26, 2026
42 of 46 checks passed
@ArshdeepSingh3-eaton ArshdeepSingh3-eaton deleted the feature/blui-7249-fix-editable-table-issues branch May 26, 2026 04:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

brightlayer-ui set to identify Brightlayer UI platform issues for easy filtering

Development

Successfully merging this pull request may close these issues.

4 participants