[release-11.3.6] Docs: datagrid visualization refactor (#103906)

docs/sources/panels-visualizations/visualizations/datagrid/index.md

@@ -29,23 +29,20 @@ refs:
 
 # Datagrid
 
-{{% admonition type="note" %}}
-
-The Grafana datagrid is experimental. This feature is supported by the engineering team on a best-effort basis, and breaking changes may occur without notice prior to general availability.
-
-{{% /admonition %}}
+{{< docs/experimental product="The datagrid visualization" featureFlag="`enableDatagridEditing`" >}}
 
 Datagrids offer you the ability to create, edit, and fine-tune data within Grafana. As such, this panel can act as a data source for other panels
 inside a dashboard.
 
-![Datagrid panel](/media/docs/datagrid/screenshot-grafana-datagrid-panel.png)
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-datagrid-visualization-v12.0.png" max-width="750px" alt="The datagrid visualization" >}}
 
-Through it, you can manipulate data queried from any data source, you can start from a blank slate, or you can pull data from a dragged and dropped file. You can then use the panel as a simple tabular
-visualization, or you can modify the data—and even remove it altogether—to create a blank slate.
+Through it, you can manipulate data queried from any data source, you can start from a blank slate, or you can pull data from a dragged and dropped file.
+You can then use the panel as a simple tabular visualization, or you can modify the data—and even remove it altogether—to create a blank slate.
 
 Editing the dataset changes the data source to use the inbuilt `-- Grafana --` data source, thus replacing the old data source settings and related queries, while also copying the current dataset into the dashboard model.
 
-You can then use the panel as a data source for other panels, by using the inbuilt `-- Dashboard --` data source to pull the datagrid data. This allows for an interactive dashboard experience, where you can modify the data and see the changes reflected in other panels.
+You can then use the panel as a data source for other panels, by using the inbuilt `-- Dashboard --` data source to pull the datagrid data.
+This allows for an interactive dashboard experience, where you can modify the data and see the changes reflected in other panels.
 
 Learn more about the inbuilt `-- Grafana --` and `-- Dashboard --` data sources in the [special data sources](ref:special-data-sources) documentation.
 
@@ -65,13 +62,9 @@ Deleting a row or column will remove the data from the datagrid, while clearing
 
 You can also access a header menu by clicking the dropdown icon next to the header title. From here, you can not only delete or clear a column, but also rename it, freeze it, or convert the field type of the column.
 
-{{< figure src="/media/docs/datagrid/screenshot-grafana-datagrid-header-menu-2.png" alt="Datagrid header menu" max-width="500px" >}}
-
-## Selecting series
-
-If there are multiple series, you can set the datagrid to display the preferred dataset using the **Select series** dropdown in the panel options.
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-datagrid-header-menu-v12.0.png" alt="Datagrid header menu" max-width="400px" >}}
 
-## Using datagrids
+## Use datagrids
 
 Datagrids offer various ways of interacting with your data. You can add, edit, move, clear, and remove rows and columns; use the inbuilt search functionality to find specific data; and convert field types or freeze horizontal scroll on a specific column.
 
@@ -79,7 +72,7 @@ Datagrids offer various ways of interacting with your data. You can add, edit, m
 
 You can add data to a datagrid by creating a new column or row.
 
-To create a new column, take the following steps:
+To create a new column, follow these steps:
 
 1. In an existing panel, click the **+** button in the table header after the last column.
 1. When prompted, add a name for the new column.
@@ -91,7 +84,7 @@ To add a new row, click a **+** button after the last row. The button is present
 
 ### Edit data
 
-You can edit data by taking the following steps:
+To edit data, follow these steps:
 
 1. Double-click on the cell that needs to be modified. This will activate the cell and allow you to edit the data.
 1. After editing the data, click anywhere outside the cell or press the Enter key to finalize the edit.
@@ -102,7 +95,7 @@ To easily clear a cell of data, you can click on a cell to focus it and then pre
 
 You can move columns and rows as needed.
 
-To move a column, take the following steps:
+To move a column, follow these steps:
 
 1. Click and hold the header of the column that needs to be moved.
 1. Drag the column to the desired location.
@@ -116,7 +109,7 @@ You can select multiple cells by clicking on a single cell and dragging the mous
 
 ### Delete/clear multiple rows or columns
 
-To delete or clear multiple rows, take the following steps:
+To delete or clear multiple rows, follow these steps:
 
 1. Hover over the number column (to the left of the first column in the grid) to display row checkbox.
 1. Select the checkboxes for the rows you want to work with.
@@ -126,8 +119,16 @@ To delete or clear multiple rows, take the following steps:
 
 The same rules apply to columns by clicking the column headers.
 
-To delete all rows, use the "select all" checkbox at the top left corner of the datagrid. This selects all rows and allows you to delete them using the context menu.
+To delete all rows, use the select all checkbox at the top left corner of the datagrid. This selects all rows and allows you to delete them using the context menu.
 
-## Panel options
+## Configuration options
+
+{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
+### Panel options
 
 {{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
+### Datagrid options
+
+If there are multiple series, you can choose the dataset the datagrid displays using the **Select series** option.