> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-4/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-4/charts-gallery/grids/data-grid.md).

# 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**

### **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.

### **Export Options**

The user can enable the “Enable Context Menu”, then it is possible to download the reports in different formats if we click on the chart from the preview section. The heading and subheading of that downloaded chart and the name of the downloaded file can be changed from this section.

### **General**

The user can change the height, width, top, left, chart type, column type & Line form. In this case, we have changed the scroll view to disable.

![](https://content.gitbook.com/content/5aLubSHNOzBzWIIdbNGx/blobs/1z9ic63V9YqWJIjx02wa/image.png)

<figure><img src="https://content.gitbook.com/content/5aLubSHNOzBzWIIdbNGx/blobs/y5O3tOFepGLOmAAoSM0r/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>

#### 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 %}

### **Header Style**

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

![](https://content.gitbook.com/content/5aLubSHNOzBzWIIdbNGx/blobs/TfWqNRrjmcuDZGGZtrK6/image.png)

### **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/5aLubSHNOzBzWIIdbNGx/blobs/7rDeTIpiySssK9LMz4q2/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/5aLubSHNOzBzWIIdbNGx/blobs/JUrVv6dF82FEzuZWlhmz/image.png)

### **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.

### **Title**

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

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FkJ58CkRwwRxPhf5mELMq%2Ftitle.png?alt=media\&token=c7481223-0bfa-49ff-8c37-b1cf680696df)

## **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/5aLubSHNOzBzWIIdbNGx/blobs/lmDITlmQAy4TMd8HgHxu/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/5aLubSHNOzBzWIIdbNGx/blobs/2ELe1izuFnuP3kf0WHva/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 %}