# Data Grid

{% hint style="success" %}
*Check out the given walk-through on how to set the Data Grid chart properties*.
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FWF19ERGT8bQj7mc47nvr%2FData%20Grid.mp4?alt=media&token=44bd404a-e72c-4476-96a0-8de7d157c46a>" %}
***Applying various Data Grid Properties to a View***
{% endembed %}

The users can see data in tabular format by selecting the Data Grid component from the chart list. Multiple values can be displayed via Grid visualization.

<figure><img src="https://3555642236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FFPAHwwMXefm1G1K8SoGX%2Fimage.png?alt=media&#x26;token=04d9cc4b-9992-43cf-8064-02000534ccce" alt=""><figcaption><p><em><strong>Default View with Grid chart</strong></em></p></figcaption></figure>

## **Properties** <a href="#properties" id="properties"></a>

### **General Settings**

* Order: Users can order the displayed data by selecting an option from the given choices:
  * Ascending
  * Descending
  * None
  * Manual Sort (Users can manually sort the dimensions using the indicator signs).
    * By selecting an order, the user needs to configure the following fields:
      * **Order By**- Select a value option from the drop-down menu to order the data sequence.
      * **Limit**- Set a number to display the requested information by this limit.
* **Font Size**: Select a font size from the given choices (Small, Medium, Large).
* **Bold**: Use a checkmark in the box to display the fonts of the heading in Bold.
* **Italics**: Use a checkmark in the box to apply the Italics style to display the heading.
* **Underline**: Use a checkmark in the box to underline the headings of the displayed data columns.
* **Font Color**: Select a font color using the menu.
* **Background Color**: Select a background color using the menu.
* **Exclude from Global Filter**: Use a checkmark in the given box to exclude the view from the Global filter condition.

### **View Filter**

* Filter: Select a filter condition from the drop-down menu.

<figure><img src="https://3555642236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2F91VGTWZrUfPoZ9imLFd2%2Fimage.png?alt=media&#x26;token=9f79f273-c663-4dfc-a869-13809c2e9a87" alt=""><figcaption><p><em><strong>Modified View after applying General Settings and View Filter chart properties</strong></em></p></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> The users get redirected to the pop-up color menu by clicking the Font Color or Background Color option.*
{% endhint %}

## **Category Properties of Grid**  <a href="#category-and-series-properties-of-grid-chart" id="category-and-series-properties-of-grid-chart"></a>

The user can set the width of each column by configuring it from the Category Properties (for Dimensions) and Series Properties (for Measures) in the Data Grid.

* Click the ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FBUYGsVfiSZiqwAIsxwuH%2Fimage.png?alt=media\&token=65353346-2e21-4f61-b404-7f451f762698) icon given for a Dimension to open the ***Category Properties** for dragged Dimensions.*
* The user can modify the following information for a dragged Dimension.
  * Display Name
  * Column Width

<figure><img src="https://3555642236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2Fe7Aw3cXev9emILAogA7e%2Fimage.png?alt=media&#x26;token=79fd3e92-38d6-4c86-8c8f-56714f8a8693" alt=""><figcaption><p><em><strong>Category Properties Provided for a dragged Dimension</strong></em></p></figcaption></figure>

## **Series (Measure) Properties of Grid**  <a href="#category-and-series-properties-of-grid-chart" id="category-and-series-properties-of-grid-chart"></a>

* Click the ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FwefAfJyRfmGlf1Xn8RHv%2Fimage.png?alt=media\&token=c897ab4a-e72d-4eba-a257-4005b4dcf9a2) icon given for a Measure to open the ***Series Properties** for a dragged Measures.*
* The following properties can be modified for a dragged Measure:
  * Aggregation&#x20;
  * Display Name
  * Column Width
  * Column Format
  * Number format
  * Alert Options
    * Show Alert
    * Show Alert Labels
    * Font Color
    * Dynamic Range
      * Min Color
      * Max Color

<figure><img src="https://3555642236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FPh2AkXaiNweLuyom6bzv%2Fimage.png?alt=media&#x26;token=bcda3d17-7521-4c8c-ac0f-e54647404841" alt=""><figcaption><p><em><strong>Displaying a Measure Column with Dynamics Range colors</strong></em></p></figcaption></figure>

## Manual Ranges

The user can also set Ranges and their colors manually. The manually set range will be displayed if ***Dynamic Range*** is not selected.

* Click the ***Add*** icon to insert a new Range.
* Provide Maximum and Minimum values for the newly added Range.

<figure><img src="https://3555642236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FVDJAgVadm2SXrszuXH6A%2Fimage.png?alt=media&#x26;token=2326ee74-d80f-4b9e-a447-a5ef021b85c5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/xZF8YGlESz97qqyTOJvz/blobs/ciabm1mHWIpCSzxJ5O0t/image.png" alt=""><figcaption><p><em><strong>Creating multiple Range for a Data Grid View</strong></em></p></figcaption></figure>

* The column will reflect the inserted range of colors based on the values.

<figure><img src="https://content.gitbook.com/content/xZF8YGlESz97qqyTOJvz/blobs/p0jqNA54FPn5tI8xexEP/image.png" alt=""><figcaption><p><em><strong>Measure Column reflecting multiple manually added Range</strong></em> </p></figcaption></figure>

## Re-ordering of Fields in the Grid

We now support the re-ordering of fields in the Data Grid chart. By allowing field re-ordering, users can present their data in a more logical and meaningful way, improving the overall clarity and usability of the Data Grid chart.

{% hint style="success" %}
*Check out the illustration to understand the field re-ordering functionality for the Grid chart.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FhmTH0Ho4g3e8AeiFA2AX%2FReordering%20grid%20columns.mp4?alt=media&token=db14675b-de17-419d-9656-5beda67287df>" %}
***RE-ordering columns in the Grid Component***
{% endembed %}