> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/self-service-visualization-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/self-service-visualization-4/chart-gallery/data-grid.md).

# Data Grid

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FMYeHw56IJP2GYjmOaksq%2FGrid%20Chart.gif?alt=media&#x26;token=0870c7a0-a1a8-4e86-85fc-e4eadb20d6c9" alt=""><figcaption></figcaption></figure>

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.

## **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 by 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 sequence of the data.
      * **Limit**- Set a number to display the requested information by this limit.
* **Font Size**: Select a font size out of 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://content.gitbook.com/content/vIDgRfkRB1bQpGtEDFfQ/blobs/39AtPjSPKC8scDCOVR0O/image.png" alt=""><figcaption></figcaption></figure>

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

## **Category and Series Properties of Grid Chart** <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 a dragged Dimensions.*
* The user can modify the following information for a dragged Dimension.
  * Display Name
  * Column Width

<figure><img src="https://content.gitbook.com/content/vIDgRfkRB1bQpGtEDFfQ/blobs/nHlxq8Qt2cjUz8jn00po/image.png" alt=""><figcaption><p><em><strong>Category Properties Provided for a dragged Dimension</strong></em></p></figcaption></figure>

* 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://content.gitbook.com/content/vIDgRfkRB1bQpGtEDFfQ/blobs/sT9KuB2RRknc2nOm9FOJ/image.png" alt=""><figcaption><p><em><strong>Displaying ID column in View using Dynamic Range colors</strong></em></p></figcaption></figure>

The user can also set Ranges and their colors manually. The manually set range will get 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://content.gitbook.com/content/vIDgRfkRB1bQpGtEDFfQ/blobs/Tk8OOc0IiQIQqcKgFYSr/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 colors based on the values.

<figure><img src="https://content.gitbook.com/content/vIDgRfkRB1bQpGtEDFfQ/blobs/ebLH1xzwJuACmIskbCs0/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 given illustration to understand the field re-ordering functionality provided for the Grid chart.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1Y2nC9XDrWcLwg1gpYr%2Fuploads%2Fevq475XQlXHwGPrfxXo2%2FReordering%20Columns%20in%20Grid.mp4?alt=media&token=b0fbf02f-873c-4c50-91b6-e9bcc463f57f>" %}
***Re-ordering Fields in the Grid Component***
{% endembed %}

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

* *Users can only do reordering from dimension to dimension, and measure to measure. Cross-category re-ordering is not supported.*
* *Users can adjust the size of the Date columns as well.*
  {% endhint %}