# Data Grid

The Data Grid component is used to represent data in tabular form. Data Grid is also known as 'Grid View' as the data will be displayed within a grid.

## **Best Situation to Use Data Grid**

When the end-user need to view data in numerical format. When alerts need to be shown.

## **Default Data Grid Chart Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FcjaQALYPLxbPALQZ1FYr%2FDatagrid_default.png?alt=media&#x26;token=78defc3a-b75c-4505-a77c-f788c1bd5bf6" alt=""><figcaption></figcaption></figure>

## **Properties of the Data Grid chart**

### **General**

* The user can also change the height, width, top, left, points,  chart type.
* The user needs to put a checkmark for the Initial Visibility option to avail the preview at the first time.
* Use a checkmark in the Fit Columns to auto-fit the size of the columns.
* The user can also enable or disable Scroll View. In this case, the selected scroll view is 'Disable'.

<div align="left"><figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FW0NKMc9IM6xszqnMIPnO%2Fimage.png?alt=media&#x26;token=3774a110-a677-48a6-bcab-3fe343c9c837" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
*Check out the given illustration on how to use the Column Rearrange property in the Data Grid.*
{% endhint %}

<figure><img src="https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/sCeoiYc96If4MyTFDytK/Datagrid%20-%20Row%20Rearrange%20.gif" alt=""><figcaption><p><em><strong>Rearrange Column Property</strong> in the <strong>Data Grid</strong> component</em></p></figcaption></figure>

### **Background**

The user can change the background color of the chart, can get the border for the chart and can change the border color, can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.

### **Title**

The user can change Title Name, Font color, size, style, etc.

<div align="left"><figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FYx6RwjZdXPVDJCh82uM0%2Fimage.png?alt=media&#x26;token=8b06602f-e36f-486d-9990-d2fe9fba061b" alt=""><figcaption></figcaption></figure></div>

### **Subtitle**

The user can enable the subtitle to display the second title. The user can change the Name, Font color, size, style for the subtitle.

### **Header Style**

The user can change the header text color, font size, font style, and background color.

![](https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/53hgTDMRmkOgQN8YtWcF/image.png)

#### Access Check Boxes for the Multi-selection of the Rows&#x20;

Enable the Show Checkbox property from the General section and provide the "allowmultipleselection = true" in the Dashboard script to avail the checkboxes in the preview mode of the Data Grid.

{% hint style="success" %}
*Check out the given illustration on accessing checkboxes for the multi selection of the Grid Rows.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FWNKDGHZRi8vv3bBXC96G%2FCheckboxes%20for%20multiple%20row%20selection.mp4?alt=media&token=4e5fcfc8-a7a3-436f-8350-751a3b0d3e46>" %}
***Implementing Checkbox property for the multi selection of the rows in the Data Grid***
{% endembed %}

### **Row Style**

The user can change the font size, font color, text decoration, and enable the text wrap. The user can also increase the row height.

![](https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/Fygv1ZMbKFiHILhhDHVK/image.png)

### **Styles**

The user can change the background color, rollover color, selection color, user can enable horizontal grid lines also can change the color for horizontal & vertical lines.

![](https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/fVAHHv8nAypheZGYExqm/image.png)

### **Export Options**

The Export Options also helps to provide heading, subheading, file name. The user can also select an option for ***Global Export Type***.

<div align="left"><figure><img src="https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/k3KTjvCU2cneWG9B779n/image.png" alt=""><figcaption></figcaption></figure></div>

The user can enable the ***Enable Context Menu*** from the preview section to download the reports in downloaded chart and the name of the downloaded file can be changed from this section.

<figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FM8BMgLpjjOa1Oz8Ec65d%2Fimage.png?alt=media&#x26;token=9cb0c658-a58c-44cd-856a-725d32d44e3c" alt=""><figcaption></figcaption></figure>

## **Properties Tab from the Dataset Pallet**

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FMT2EGoOrUgXogPHCiAlb%2Fdatagrid_connection2.png?alt=media\&token=fa5c39ff-dc5a-41e8-8c9e-e8ff94d9420d)![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F546YZEq7z5JOM9W2HcV1%2Fdatagrid_connection3.png?alt=media\&token=4a6f22a1-dc0e-495c-8ea3-ab3f91dc2011)

## **Data Grid after changing the Properties**

<figure><img src="https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/MXmbk1rrKLBBB2h2T4P5/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark>*&#x20;

* *The user needs to select the **Column Type** as **Numeric** for the selected Data Grid fields using the **Properties** tab provided for the Dataset, so they become responsive to the changes that the user set using the **Indicator** tab.*

&#x20;     ![](https://content.gitbook.com/content/nyOeUTaPuBluyvesHVm9/blobs/3YVrqgEbzu9CLT8eQRmg/image.png)

* *Refer the* [***Alerts in Grids***](https://docs.bdb.ai/governed-dashboards/configurations/alerts-in-grids) *page provided under* [***Configurations***](https://docs.bdb.ai/governed-dashboards/configurations) *section to understand how to insert Alerts in a Grid component.*
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/governed-dashboards-5/charts-gallery/grids/data-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.