mirror of
https://github.com/grafana/grafana.git
synced 2024-11-25 02:10:45 -06:00
Docs: Add more info and link to text wrap content (#89625)
* Remove duplicate Wrap Text docs Remove duplicate line and refer to field overrides * Updated link formatting * Fixed heading level * Removed H4 wrap text heading * Light restructuring to add heading for wrap text * Removed unnecessary section * Added release stage note --------- Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Mitch Seaman
GitHub
parent
83d05ea777
commit
a7499c1dde
@ -49,6 +49,11 @@ refs:
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/setup-grafana/configure-grafana/#configuration-file-location
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/setup-grafana/configure-grafana/#configuration-file-location
|
||||
field-override:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
---
|
||||
|
||||
# Table
|
||||
@ -87,13 +92,13 @@ If you are using a table created before Grafana 7.0, then you need to migrate to
|
||||
|
||||
Show or hide column names imported from your data source.
|
||||
|
||||
## Column width
|
||||
### Column width
|
||||
|
||||
By default, Grafana automatically calculates the column width based on the table size and the minimum column width. This field option can override the setting and define the width for all columns in pixels.
|
||||
|
||||
For example, if you enter `100` in the field, then when you click outside the field, all the columns will be set to 100 pixels wide.
|
||||
|
||||
## Minimum column width
|
||||
### Minimum column width
|
||||
|
||||
By default, the minimum width of the table column is 150 pixels. This field option can override that default and will define the new minimum column width for the table in pixels.
|
||||
|
||||
@ -101,7 +106,7 @@ For example, if you enter `75` in the field, then when you click outside the fie
|
||||
|
||||
For small-screen devices, such as smartphones or tablets, reduce the default `150` pixel value to`50` to allow table-based panels to render correctly in dashboards.
|
||||
|
||||
## Column alignment
|
||||
### Column alignment
|
||||
|
||||
Choose how Grafana should align cell contents:
|
||||
|
||||
@ -110,7 +115,17 @@ Choose how Grafana should align cell contents:
|
||||
- Center
|
||||
- Right
|
||||
|
||||
## Cell type
|
||||
### Column filter
|
||||
|
||||
You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, refer to [Filter table columns](#filter-table-columns).
|
||||
|
||||
### Pagination
|
||||
|
||||
Use this option to enable or disable pagination. It is a front-end option that does not affect queries. When enabled, the page size automatically adjusts to the height of the table.
|
||||
|
||||
## Cell options
|
||||
|
||||
### Cell type
|
||||
|
||||
By default, Grafana automatically chooses display settings. You can override the settings by choosing one of the following options to set the default for all fields. Additional configuration is available for some cell types.
|
||||
|
||||
@ -118,21 +133,17 @@ By default, Grafana automatically chooses display settings. You can override the
|
||||
If you set these in the Field tab, then the type will apply to all fields, including the time field. Many options will work best if you set them in the Override tab so that they can be restricted to one or more fields.
|
||||
{{% /admonition %}}
|
||||
|
||||
### Auto
|
||||
#### Auto
|
||||
|
||||
The **Auto** cell type automatically displays values, with sensible defaults applied.
|
||||
|
||||
Toggle the **Wrap text** switch to wrap text in the cell with the longest content or the matched field, if you've set a field override.
|
||||
|
||||
### Color text
|
||||
#### Color text
|
||||
|
||||
If thresholds are set, then the field text is displayed in the appropriate threshold color.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
|
||||
|
||||
Toggle the **Wrap text** switch to wrap text in the cell with the longest content or the matched field, if you've set a field override.
|
||||
|
||||
### Color background (gradient or solid)
|
||||
#### Color background (gradient or solid)
|
||||
|
||||
If thresholds are set, then the field background is displayed in the appropriate threshold color.
|
||||
|
||||
@ -142,31 +153,29 @@ Toggle the **Apply to entire row** switch, to apply the background color that's
|
||||
|
||||
{{< figure src="/static/img/docs/tables/colored-rows.png" max-width="500px" alt="Colored row background" class="docs-image--no-shadow" >}}
|
||||
|
||||
Toggle the **Wrap text** switch to wrap text in the cell with the longest content or the matched, if field you've set a field override.
|
||||
|
||||
### Gauge
|
||||
#### Gauge
|
||||
|
||||
Cells can be displayed as a graphical gauge, with several different presentation types.
|
||||
|
||||
#### Basic
|
||||
##### Basic
|
||||
|
||||
The basic mode will show a simple gauge with the threshold levels defining the color of gauge.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/basic-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
|
||||
|
||||
#### Gradient
|
||||
##### Gradient
|
||||
|
||||
The threshold levels define a gradient.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
|
||||
|
||||
#### LCD
|
||||
##### LCD
|
||||
|
||||
The gauge is split up in small cells that are lit or unlit.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
|
||||
|
||||
#### Label Options
|
||||
##### Label Options
|
||||
|
||||
Additionally, labels displayed alongside of the gauges can be set to be colored by value, match the theme text color, or be hidden.
|
||||
|
||||
@ -182,17 +191,17 @@ Additionally, labels displayed alongside of the gauges can be set to be colored
|
||||
|
||||
{{< figure src="/static/img/docs/tables/hidden-mode.png" max-width="500px" caption="Hide Label" class="docs-image--no-shadow" >}}
|
||||
|
||||
### Data links
|
||||
#### Data links
|
||||
|
||||
If you've configured data links, when the cell type is **Auto** mode, 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.
|
||||
|
||||
### JSON view
|
||||
#### JSON view
|
||||
|
||||
Shows value formatted as code. If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
|
||||
|
||||
### Image
|
||||
#### Image
|
||||
|
||||
> Only available in Grafana 7.3+
|
||||
|
||||
@ -200,7 +209,7 @@ If you have a field value that is an image URL or a base64 encoded image you can
|
||||
|
||||
{{< figure src="/static/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
|
||||
|
||||
### Sparkline
|
||||
#### Sparkline
|
||||
|
||||
Shows values rendered as a sparkline. You can show sparklines using the [Time series to table transformation](ref:time-series-to-table-transformation) on data with multiple time series to process it into a format the table can show.
|
||||
|
||||
@ -208,7 +217,15 @@ Shows values rendered as a sparkline. You can show sparklines using the [Time se
|
||||
|
||||
You can be customize sparklines with many of the same options as the [Time series panel](ref:time-series-panel) including line width, fill opacity, and more. You can also change the color of the sparkline by updating the [color scheme](ref:color-scheme) in the _Standard options_ section of the panel configuration.
|
||||
|
||||
## Cell value inspect
|
||||
### Wrap text
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default. We’d love hear from you about how this new feature is working. To provide feedback, you can open an issue in the [Grafana GitHub repository](https://github.com/grafana/grafana).
|
||||
{{< /admonition >}}
|
||||
|
||||
Toggle the **Wrap text** switch to wrap text in the cell with the longest content in your table. To wrap the text in a specific column only, use the Wrap Text option in a [field override](ref:field-override).
|
||||
|
||||
### Cell value inspect
|
||||
|
||||
Enables value inspection from table cell. The raw value is presented in a modal window.
|
||||
|
||||
@ -216,19 +233,7 @@ Enables value inspection from table cell. The raw value is presented in a modal
|
||||
Cell value inspection is only available when cell display mode is set to Auto, Color text, Color background or JSON View.
|
||||
{{% /admonition %}}
|
||||
|
||||
## Column filter
|
||||
|
||||
You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, refer to [Filter table columns](#filter-table-columns).
|
||||
|
||||
## Pagination
|
||||
|
||||
Use this option to enable or disable pagination. It is a front-end option that does not affect queries. When enabled, the page size automatically adjusts to the height of the table.
|
||||
|
||||
## Filter table columns
|
||||
|
||||
If you turn on the **Column filter**, then you can filter table options.
|
||||
|
||||
### Turn on column filtering
|
||||
## Turn on column filtering
|
||||
|
||||
1. In Grafana, navigate to the dashboard with the table with the columns that you want to filter.
|
||||
1. On the table panel you want to filter, open the panel editor.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user