Skip to content

Improve cell content detail view in data table renderer#103

Open
masachika-kamada wants to merge 3 commits intomicrosoft:mainfrom
masachika-kamada:fix/cell-expand-buttons
Open

Improve cell content detail view in data table renderer#103
masachika-kamada wants to merge 3 commits intomicrosoft:mainfrom
masachika-kamada:fix/cell-expand-buttons

Conversation

@masachika-kamada
Copy link

@masachika-kamada masachika-kamada commented Jul 13, 2025

Fixes #102

Changes Made

1. Documentation Update

  • Update Node.js version: Fixed CONTRIBUTING.md to reflect actual project requirements (Node.js 20.18.2 as specified in .nvmrc)
  • Improve npm requirements: Changed to "8.15.2 or later" for contributor flexibility

2. Enhanced Data Table Cell Interaction

  • Remove non-functional expand buttons: Added CSS to hide ag-grid's expand buttons that were not working
  • Universal double-click support: Extended double-click detail viewing to all cell types, not just JSON/dynamic cells
  • Improved detail panel: Added close button and better formatting for different data types
  • Better error handling: Graceful fallback to string display when JSON parsing fails

Problem Solved

  • Previously, only "dynamic" (JSON) cells supported detail viewing via double-click
  • Non-functional expand buttons created confusing UX
  • Development documentation was outdated
  • UX differed significantly from Kusto Desktop behavior

Technical Details

  • Added CSS rules to hide .ag-cell-expand-button elements
  • Extended onCellDoubleClicked handler to support all column data types
  • Enhanced detail panel with:
    • Close button for better user control
    • Appropriate rendering for JSON (ReactJson) vs text content
    • Scrollable container with monospace font for long content
    • Improved styling with borders and spacing

Testing

  • All cell types now support double-click detail viewing
  • Detail panel displays appropriate formatting for different data types
  • Close button works correctly
  • No expand buttons are visible in the grid
  • Documentation reflects actual project setup

Screenshots

image

@masachika-kamada
Update Node.js version requirement in documentation
9562d54 
- Update from Node.js 16.14.2 to 20.18.2 to match .nvmrc
- Change npm requirement to "8.15.2 or later" for flexibility
- Align CONTRIBUTING.md with actual project configuration
@masachika-kamada
Remove non-functional cell expand buttons
870ff53 
- Hide AG Grid expand buttons that don't work
- Add consistent ellipsis styling for cell overflow
- Improve visual consistency in data table
@masachika-kamada
Enhance cell detail view for all data types
7a0b638 
- Extend double-click functionality to all cell types, not just JSON
- Add improved detail panel with close button and better styling
- Support both JSON and text content display with appropriate formatting
- Add scrollable container for long content with monospace font
- Align behavior with Kusto Desktop UX patterns
@masachika-kamada
Copy link
Author

masachika-kamada commented Jul 13, 2025

@microsoft-github-policy-service agree

@asaharn asaharn self-requested a review December 31, 2025 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@asaharn asaharn Awaiting requested review from asaharn

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve cell content detail view in data table renderer

1 participant

@masachika-kamada