Table: Migrate to field-level wrapText toggle, use standard hideFrom.viz for hidden fields (#109297)

* Added wrap text to table options and removed from multiple cell options

* Removed wrap text from cell options shared file

* Edited

* Edited

* Table: Migrate to field-level wrapText toggle

* migrate hidden -> hideFrom.viz as well

* more cleanup from rebase

* restore options that got killed in the rebase

* when wrap text is enabled for the whole table, exclude columns that do not make sense

* fix TableNG unit tests

* fix i18n

* unit tests for the migrations

* sort out e2e issue

* fix migration unit test

* fix backend migration test as well

* add a dashboard for the v12.2 table migrations

* update dev-dashboards.lisonnet

* make gen-jsonnet

* one of the panel versions didnt get updated

---------

Co-authored-by: Isabel Matwawana <isabel.matwawana@grafana.com>
This commit is contained in:
Paul Marbach
2025-08-27 16:37:02 -04:00
committed by GitHub
co-authored by Isabel Matwawana
parent 699bffc9e4
commit 76b1e5e389
26 changed files with 1350 additions and 173 deletions
@@ -209,6 +209,7 @@ This option is only available when you're editing the panel.
| Column width | Define a column width, in pixels, rather than allowing the width to be set automatically. By default, Grafana calculates the column width based on the table size and the minimum column width. |
| Column alignment | Set how Grafana should align cell contents. Choose from: **Auto** (default), **Left**, **Center**, or **Right**. |
| Column filter | Temporarily change how column data is displayed. For example, show or hide specific values. For more information, refer to [Column filtering](#column-filtering). |
| Wrap text | Enables text wrapping for cell content. |
| Wrap header text | Enables text wrapping for column headers. |
<!-- prettier-ignore-end -->
@@ -288,24 +289,17 @@ The colored background cell type has the following options:
| ------ | ----------- |
| Background display mode | Choose between **Basic** and **Gradient**. |
| Apply to entire row | Toggle the switch on to apply the background color that's configured for the cell to the whole row. |
| Wrap text | Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table. To wrap the text _in a specific column only_, use a **Fields with name** [field override](ref:field-override), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch. |
| Cell value inspect | <p>Enables value inspection from table cells. When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.</p><p>Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing. However, you can switch back and forth between tabs.</p> |
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to the [Tooltip from field](#tooltip-from-field). |
<!-- prettier-ignore-end -->
<!-- The wrap text, cell value inspect, and tooltip from field descriptions above should be copied from docs/sources/shared/visualizations/cell-options.md -->
<!-- The cell value inspect and tooltip from field descriptions above should be copied from docs/sources/shared/visualizations/cell-options.md -->
#### Data links
If you've configured data links, when the cell type is **Auto**, the cell text becomes clickable.
If you change the cell type to **Data links**, the cell text reflects the titles of the configured data links. To control the application of data link text more granularly, use a **Cell option > Cell type > Data links** field override.
Data links cells also support text wrapping.
Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table.
To wrap the text _in a specific column only_, use a **Fields with name** [field override](ref:field-override), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.
<!-- The wrap text description above should be copied from docs/sources/shared/visualizations/cell-options.md -->
#### Gauge
With this cell type, cells can be displayed as a graphical gauge, with several different presentation types.
@@ -402,12 +396,6 @@ The **Pill** cell type displays each item in a comma-separated string in a color
The colors applied to each piece of text are maintained throughout the table.
For example, if the word "test" is first displayed in a red pill, it will always be displayed in a red pill.
Pill cells also support text wrapping.
Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table.
To wrap the text _in a specific column only_, use a **Fields with name** [field override](ref:field-override), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.
<!-- The wrap text description above should be copied from docs/sources/shared/visualizations/cell-options.md -->
The following data formats are supported for the pill cell type:
- Comma-separated values (`cows,chickens,goats`)