# Data components

> You can use the **Hidden** component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

## Data

### Hidden

You can use the **Hidden** component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180088-7321da00.webp)

### Container

You can use the **Container** component to wrap a set of fields into an object with a container key. A **Container** with the key `financialPerformance` submits as:

```
{
                    data: {
                    financialPerformance {
                    grossProfitMargin: "0.83",
                    [tab]netProfitMargin: "0.43"
                    }
                    }
                    }
```

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180796-ff8e17a9.webp)

### Data Map

**Data type:** `System.Collections.Generic.Dictionary<System.String,System.String>`

Use the **Data Map** component to create key-value pairs. The component is editable at runtime, so users can create new key-value pairs, by clicking **Add Another**.
:::note
The **Key** field is by default a **Text Field** and cannot be changed. The **Value** field can be changed with other components.
:::

* **Label for Key column** - set a label to show for the **Key** column. If left empty, the name of the column stays as **Key**.
* **Disable Adding / Removing Rows** - hides the buttons that allow adding or removing rows when the form shows.
* **Show Key Column Before Value** - select if you want the **Key** column to show before the **Value** column.
* **Add Another Text** - set the text to display for the **Add Another** button.

The **Layout** tab is specific only to the **Data Map** component:

* **HTML Attributes** - add custom HTML attributes to the component.
  :::note
  Attributes from other components dominate the attributes that you configure.
  :::
* **PDF Overlay** - apply styling settings to PDF forms.

To learn how to use the **Data Map** component check out the Using the Data Map component tutorial.

### Data Grid

You can use the **Data Grid** component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the **Data Grid** to match your use case.
  
  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186898-b4bf1c5c.webp)

In the **Form Renderer** window, the rows inside the **Data Grid** component can be added or removed.

* **Disable Adding / Removing Rows** - hides the buttons that allow adding or removing rows when the form renders.
* **Allow Reorder** - reorder rows by dragging and dropping them.
* **Equal Column Width** - makes the widths of columns equal.
* **Enable Row Groups** - allows separating rows into groups. Add groups, label them, and select the rows for each group.
* **Initialize Empty** - the **Data Grid** will have no visible rows when initialized.

### Edit Grid

You can use the **Edit Grid** component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the **Edit Grid**, to capture loads of data.
  
  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180484-d37c8e41.webp)

When the form renders, you can add a duplicate of the **Edit Grid**, by clicking **Add Another**.

* **Open First Row when Empty** - opens the first row when the **Edit Grid** is empty.
* **Disable Adding / Removing Rows** - hides the buttons that allow adding or removing rows when the form shows.
* **Add Another Text** - changes the name of the **Add Another** button.
* **Save Row Text** - changes the text of the **Save Row** button.
* **Remove Row Text** - changes the text of the **Remove Row** button.

The **Templates** tab is specific to the **Edit Grid** component only. The **Header**,**Row**, and **Footer** Templates allow you to customize the grid using JavaScript. You can modify what type of components display in the rows within a grid or the look of the header / footer.

#### Header Template

This is the Lodash Template used to render the header of the **Edit Grid** component.

:::important
The **Header Template** doesn't work with [Form Actions](https://docs.uipath.com/activities/other/latest/workflow/create-form-task).
:::

There are two variables available:

* **value** - the array of row data.
* **components** - the array of components in the grid.

#### Row Template

This is the Lodash Template used to render each row of the **Edit Grid** component.

:::important
The **Row Template** doesn't work with [Form Actions](https://docs.uipath.com/activities/other/latest/workflow/create-form-task).
:::

There are three variables available:

* **row** - object of one row's data.
* **components** - the array of components in the grid.
* **state** - current row's state (draft/saved).

To add **Click** type events, add the following classes to elements: `editRow` and `removeRow`.

#### Footer Template

This is the Lodash Template used to render the footer of the **Edit Grid** component.

There are two variables available:

* **value** - the array of row data.
* **components** - the array of components in the grid.

### Data Table

You can use the **Data Table** component to render multiple rows of data, similar to a data table. **Data Table** is a read-only component that you can use to display large amounts of data. You can drag and drop multiple form components into the **Data Table** component.

* **Sortable** - sort data inside columns in ascending or descending order. You sort the data at runtime.
* **Filterable** - filter data inside each column. Filter the data at runtime.
* **Column(s) Resizable** - change the width of the columns at runtime. The **Column(s) Resizable** capability allows you to see the data inside columns better.
* **Pagination** - display the data of the **Data Table** component on pages that are numbered. The pagination capability also includes setting the number of items per page.
* **Inline editing** - allow editing at runtime, similarly to how you would do it in Excel.

#### Sortable

You can sort data inside columns in ascending or descending order. You sort the data at runtime, in the form.

The data in the **Data Table** is displayed in the same order as in the input data table. To sort all data in the **Data Table**, click any column header in the form.

* **First click** sorts the data in ascending order.
* **Second click** sorts the data in descending order.
* **Third click** restores the original order.
  
  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-215819-8a860c24.webp)

#### Filterable

You can filter data inside each column. You can filter the data while the form is showing.

To filter data in a column:

1. Hover over the column header and click the triple bar ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-251497-203adbc5.webp) menu.
2. Choose a filtering operation.
3. Input a value in the **Filter** field of the triple bar menu. The input value in the **Filter** field is a condition for the filtering operation.

Based on the type of data, the following filter operations are available:

| Filter operation | Text | Number | Date/Time |
| --- | --- | --- | --- |
| Contains | ✅ | ❌ | ❌ |
| Not contains | ✅ | ❌ | ❌ |
| Equals | ✅ | ✅ | ✅ |
| Not equals | ✅ | ✅ | ✅ |
| Starts with | ✅ | ❌ | ❌ |
| Ends with | ✅ | ❌ | ❌ |
| Less than | ❌ | ✅ | ✅ |
| Less than or equals | ❌ | ✅ | ❌ |
| Greater than | ❌ | ✅ | ✅ |
| Greater than or equals | ❌ | ✅ | ❌ |
| In range | ❌ | ✅ | ✅ |
| Blank | ✅ | ✅ | ✅ |
| Not blank | ✅ | ✅ | ✅ |