Skip to content

TableNG: Integrate hover and selection, DataLinkCell cleanup #108353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Jul 23, 2025

Conversation

fastfrwrd
Copy link
Contributor

What is this feature?

This has moved over from #108074, but without the wrapText enablement for DataLinks, and thus without the changes necessary to row height stuff, freeing up the change to be less risky overall.

A number of style cleanups for TableNG, primarily centering around text overflow and presentation of some text-driven cell types.

  • Updates JSONCell, AutoCell, and DataLinksCell to ensure the inner contents are display: inline, and updates the cell class to explicitly use text-overflow: ellipsis, to ensure that overflowing text from these cell types has ellipses.
  • DataLinksCell now have a border between each link.
  • DataLinksCell now has a textWrap option like other text-based cells, and the calculation for its contents correctly derives its height from the concatenated content of the datalinks titles.
  • utilities which sniff the type of the field were updated to treat DataLinkCell as a special case for text alignment and text overflow, since the field type of a DataLinkField isn't relevant to what is actually rendered.
  • decoupled text alignment and content justification utils, since we the text-based cell types are all display: inline now and using text-align is a more appropriate way to style that content.
  • updated the hover overflow class to also include [data-selected=true], which is a data attribute managed by react-data-grid on keyboard navigation.
    • added a box shadow to the selected or hovered cell to make it more legible compared with the inactive cells "below" it.
    • updated DataLinkCell to make hover overflow work as expected.
Screenshot 2025-07-18 at 4 55 57 PM Screenshot 2025-07-18 at 4 56 08 PM

Special notes for your reviewer:

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

@fastfrwrd fastfrwrd requested review from a team and grafanabot as code owners July 18, 2025 21:00
@fastfrwrd fastfrwrd requested review from leeoniya, jesdavpet, adela-almasan, joshhunt, ashharrison90 and leventebalogh and removed request for a team July 18, 2025 21:00
@github-actions github-actions bot added this to the 12.1.x milestone Jul 18, 2025
@leeoniya leeoniya added type/chore area/panel/table no-changelog Skip including change in changelog/release notes labels Jul 19, 2025
@fastfrwrd fastfrwrd requested a review from leeoniya July 22, 2025 15:15
@@ -44,10 +43,6 @@ const SPARKLINE_RENDERER: TableCellRenderer = (props) => (
/>
);

const JSON_RENDERER: TableCellRenderer = (props) => (
<JSONCell justifyContent={props.justifyContent} value={props.value} field={props.field} rowIdx={props.rowIdx} />
);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

JSONCell is now an AutoCell with a custom display method!

Copy link
Contributor

@leeoniya leeoniya left a comment

Choose a reason for hiding this comment

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

:shipit:

@fastfrwrd fastfrwrd enabled auto-merge (squash) July 23, 2025 19:37
@fastfrwrd fastfrwrd merged commit 26d26f6 into main Jul 23, 2025
105 checks passed
@fastfrwrd fastfrwrd deleted the fastfrwrd/tableng-style-tweaks-minus-row-height branch July 23, 2025 19:39
@fastfrwrd fastfrwrd restored the fastfrwrd/tableng-style-tweaks-minus-row-height branch July 23, 2025 19:40
@fastfrwrd fastfrwrd deleted the fastfrwrd/tableng-style-tweaks-minus-row-height branch July 23, 2025 19:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend area/panel/table no-changelog Skip including change in changelog/release notes type/chore
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants