feat(data-grid): support inline html cells#2497
Open
PapeThePope wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an opt-in way to render HTMLElement content directly inside scale-data-grid HTML cells (via display: "inline"), while preserving the existing default behavior where HTML cell content is shown in an expandable nested row.
Changes:
- Update Data Grid rendering to only place non-inline
type: "html"cell content into the nested content row. - Extend the HTML cell handler to support inline rendering and improve auto-width behavior for inline HTML cells.
- Add focused Stencil specs and update EN/DE Storybook documentation to describe the new configuration.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/storybook-vue/stories/components/data-grid/data-grid.md | Documents display: "inline" for inline HTMLElement rendering in HTML cells. |
| packages/storybook-vue/stories/components/data-grid/data-grid_de.md | German documentation update for the new inline HTML cell behavior. |
| packages/components/src/components/data-grid/data-grid.tsx | Ensures only non-inline HTML cells contribute to nested content rows. |
| packages/components/src/components/data-grid/data-grid.spec.ts | Adds specs covering inline vs nested HTML cell behavior and auto-width longest-content selection. |
| packages/components/src/components/data-grid/data-grid.css | Adds styling for inline HTML cell wrapper. |
| packages/components/src/components/data-grid/cell-handlers/html-cell.tsx | Implements inline HTML cell rendering and updates longest-content logic for auto widths. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I missed the ability to easily render data-grid HTML cells inline.
Summary
HTMLElementcontent directly insidescale-data-gridHTML cells viadisplay: "inline".type: "html"behavior unchanged by default, including the expand/collapse button and nested content row.Test Plan
cd packages/components && ./node_modules/.bin/stencil test --spec --max-workers=2 src/components/data-grid/data-grid.spec.tscd packages/components && yarn lint