Table: Move cell-specific styles out to their own methods (#108941)

* TableNG: Markdown cell, plus custom row height

* tab indentation in cue file

* fix i18n

* trying an auto height with the updated RDG

* get auto cellHeight working

* i18n updates

* hoor disable_sanitize_html flag in MarkdownCell

* update react-data-grid version to attempt to support page up and down

* removing custom height

* use the latest experimental RDG with paging up and down

* TableNG: Wrap text for DataLinks and Pills; groundwork for max wrap length

* disable editing max wrapped lines for now

* disable wrap text line limit e2e

* new i18n extract after commenting out input

* wip

* kill max wrapped lines for now

* more cleanup

* remove targeting classes added for max wrapped lines

* fix Pill test

* couple more style cleanups

* Table: Move cell-specific styles out to their own methods

* move styles into their own file

* combine renderer and style declarations to make auto cells work better, complete cleanup of internal cell elements

* fix e2es given these updates

* add a couple tests

* wip: tests

* add tests

* bump up capital letters in lorem ipsum

* fix copy-pasta mistake

* whoops, mis-merged the selector

* use a local count instead of getCellLinks

* use react-data-grid on react-18 branch

* fix linting on test

* gdev dashboard and smoketest for Markdown table

* remove cellHeightCustom

* restore bugfix from adversarial AI-generated JSON

* reorganize in light of recent and upcoming changes

* cleanup

* override the whitespace for markdown

* what are these auto imports about...

* fix cell height selector from merge

* also remove cellHeightCustom

* i18n

* avoid the important override in markdown cell styles

* revert some betterer config autoformatting

* slight code cleanup

* s/cat/grot, add color link panel to kitchen sink, fix color link/image link style issues

* update panelid for empty table panel test

* link styles outside of cell style setup

* flesh out kitchen sink examples, update ImageCell and applyToRow

* clean up some inconsistent states

* fix lint issue

* gdev update

* format JSON to satisfy linter

* shortening the text in the long text field

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Paul Marbach
2025-08-07 19:53:52 -04:00
committed by GitHub
co-authored by Leon Sorokin
parent 4b78e54304
commit cc64b17483
25 changed files with 1738 additions and 546 deletions
@@ -93,7 +93,7 @@
"pluginVersion": "12.1.0-pre",
"targets": [
{
"csvContent": "id,markdown\n1,\"<dl>\n <dt>Definition list</dt>\n <dd>Is something people use sometimes.</dd>\n <dt>Markdown in HTML</dt>\n <dd>Does *not* work **very** well. Use HTML <em onclick=\"\"alert('hi');\"\">tags</em>.</dd>\n</dl>\"\n2,\"Three or more...\n\n---\n\nHyphens\n\n***\n\nAsterisks\n\n___\n\nUnderscores\"\n3,\"Here's a line for us to start with.\n\nThis line is separated from the one above by two newlines, so it will be a *separate paragraph*.\n\nThis line is also a separate paragraph, but...\nThis line is only separated by a single newline, so it's a separate line in the *same paragraph*.\"\n4,\"<span style='color:red'>red</span>, <span style='color:green'>green</span>, <span style='color:blue'>blue</span>\"\n5,\"<img src='https://placecats.com/bella/300/180'>\"\n6,\"[Link](https://grafana.com), or <a href=\"\"https://grafana.com\"\" target=\"\"_blank\"\" ref=\"\"noopener noreferrer\"\">HTML link</a>\"\n7,\"1. foo\n1. bar\n - baz\n * bim\n3. bip\"\n8,\"# heading 1\n## heading 2\n### heading 3\n#### heading 4\n##### heading 5\n###### heading 6\"\n9,\"Emphasis, aka italics, with *asterisks* or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or __underscores__.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n\n<u>underline does require an HTML element tho.</u>\"\n10,\"```javascript\nvar s = 'JavaScript syntax highlighting';\nalert(s);\n```\"\n11,\"<style>thead { border-bottom: 1px solid lightgray; } td, th { padding: 6px; }</style>\n| Month | Savings |\n| -------- | ------- |\n| I heard | $250 |\n| you like | $80 |\n| tables | $365 |\"\n",
"csvContent": "id,markdown\n1,\"<dl>\n <dt>Definition list</dt>\n <dd>Is something people use sometimes.</dd>\n <dt>Markdown in HTML</dt>\n <dd>Does *not* work **very** well. Use HTML <em onclick=\"\"alert('hi');\"\">tags</em>.</dd>\n</dl>\"\n2,\"Three or more...\n\n---\n\nHyphens\n\n***\n\nAsterisks\n\n___\n\nUnderscores\"\n3,\"Here's a line for us to start with.\n\nThis line is separated from the one above by two newlines, so it will be a *separate paragraph*.\n\nThis line is also a separate paragraph, but...\nThis line is only separated by a single newline, so it's a separate line in the *same paragraph*.\"\n4,\"<span style='color:red'>red</span>, <span style='color:green'>green</span>, <span style='color:blue'>blue</span>\"\n5,\"<img src='https://grafana.com/media/golden-grot/graphic-golden-grot-awards-hero-image.png'>\"\n6,\"[Link](https://grafana.com), or <a href=\"\"https://grafana.com\"\" target=\"\"_blank\"\" ref=\"\"noopener noreferrer\"\">HTML link</a>\"\n7,\"1. foo\n1. bar\n - baz\n * bim\n3. bip\"\n8,\"# heading 1\n## heading 2\n### heading 3\n#### heading 4\n##### heading 5\n###### heading 6\"\n9,\"Emphasis, aka italics, with *asterisks* or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or __underscores__.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n\n<u>underline does require an HTML element tho.</u>\"\n10,\"```javascript\nvar s = 'JavaScript syntax highlighting';\nalert(s);\n```\"\n11,\"<style>thead { border-bottom: 1px solid lightgray; } td, th { padding: 6px; }</style>\n| Month | Savings |\n| -------- | ------- |\n| I heard | $250 |\n| you like | $80 |\n| tables | $365 |\"\n",
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "gdev-testdata"