# Data Grid

> This tutorial provides step-by-step instructions on how to create and use a Data Grid component. You will learn how to pass data into the Data Grid, update it in real-time, and extract the information. The tutorial utilizes a CSV file for data input into the Data Grid.

This tutorial provides step-by-step instructions on how to create and use a Data Grid component. You will learn how to pass data into the Data Grid, update it in real-time, and extract the information. The tutorial utilizes a CSV file for data input into the Data Grid.

This automation uses a CSV record of students and their exam results and displays it inside a form, where you can update the exam results and their corresponding status ("passed" or "failed") in real-time. Also, the automation allows you to trigger the extraction of the record and output in the console.

1. Create a new Form. For this example, name it **DataGrid**.
   1. Add a Data Grid component inside the form.
   2. Add corresponding components for each column in the CSV file that you want to pass into the form.

      For this example, add a **Text Field** (`fullName`), a **Checkbox** (`seniorYear`), and a **Drop-down List** (`examResults`).

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

      :::note
      Note that the **Property Names** of the components are case-sensitive and should precisely match the column names in the CSV file, as well as the column names of Data Tables.
      :::
   3. Additionally, add an extra Text Field inside the Data Grid named **Status**. This will be used for form updates.
   4. Add a **Button** outside of the Data Grid. This button will trigger the extraction of the **Data Grid**.
   
      ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-267466-1b1ea06c.webp)
2. In the **Main** workflow, add and configure the following activities:
   1. **Read CSV** - Input the CSV file containing the data for the Data Grid. Create a DataTable variable to store the output CSV file.

      For this example, name it `dataGridDataTable`.
   2. Go back to your form and set the **Property Name** of the Data Grid component as the DataTable variable you created at substep a, where you store the output CSV file. For this example, set the **Property Name** as `dataGridDataTable`.
   3. **Show Form** - Select the **DataGrid** form, and pass the data from the DataTable to the Data Grid.
   4. In the **Arguments** dictionary, add an entry for the `dataGrid` argument with the type `System.Data.DataTable` and direction `In` and set the value to `dataGridDataTable`.

      | Key | Type | Direction | Value |
      | --- | --- | --- | --- |
      | `dataGrid` (the **Property Name** of the **Data Grid**) | `System.Data.DataTable` | `In` | `dataGridTable` |
   5. **Run Local Triggers** - Enable all triggers inside the project.
3. Create a trigger workflow named **fieldChangedTrigger**, responsible for setting the status of a student as failed or passed, according to their exam result.
   1. Add a **Form trigger activity**, and set the event when the `examResults` field changes.
   2. Add a **Build Data Table** activity, to create a DataTable where the DataGrid values will be stored when the trigger fires.

      Name the output variable as `editedDataTable`.
   3. Add a **Get Form Values** activity to retrieve the Data Grid into the DataTable you created at substep b (`editedDataTable`).
   4. Add a **For Each Row** activity, to iterate through each exam result and set the `Status` field accordingly. Input the DataTable you created at substep b (`editedDataTable`) in the **Data Table** field.
   5. In the body of the **For Each Row activity,** add an **If** activity, and set the condition as `CurrentRow("examResults").ToString="f"`.

      Note that **Values** are case-sensitive. This is the reason why we used lower-case "f" inside the condition, instead of upper-case "F".

      ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-269312-adc7506f.webp)
   6. In the **Then** body, add an **Assign** activity to assign the status of the student as "failed" when their exam result is F.

      | Save to | Value to save |
      | --- | --- |
      | `CurrentRow("status")` | `"failed"` |
   7. In the **Else** body, add an **Assign** activity again, this time for the situation where the status of a student is "passed", because their exam result is not F.

      | Save to | Value to save |
      | --- | --- |
      | `CurrentRow("status")` | `"passed"` |
   8. Outside the **For Each Row** activity, add a **Set Form Values** activity, to pass the updated Data Grid back into the form. In the **Key** field, use `dataGrid` with the **Type** `System.Data.DataTable` and set the value to `editedDataTable`.

      | Key | Type | Value |
      | --- | --- | --- |
      | `dataGrid` | `System.Data.DataTable` | `editedDataTable` |
4. Create a trigger workflow named **extract clicked**, responsible for extracting the DataGrid and outputting it as String in a CSV format.
   1. Add a **Form trigger activity** and set the event when the `extract` button is clicked.
   2. Add a **Get Form Values** activity to extract the Data Grid into a DataTable. Add an entry in the **Arguments** dictionary for `dataGrid` with the **Type** `System.Data.DataTable` and set the **Value** as `output`.

      |  |  |  |
      | --- | --- | --- |
      | `dataGrid` | `System.Data.DataTable` | `output` |
   3. Add an **Output Data Table** activity to output the extracted Data Grid as String in a CSV format. In the **Data Table** field input the variable that you used to extract the Data Grid at substep b (`output`). Input a String variable that you will log in the **Output** console in the **Text** field
   4. Add a **Log Message** activity to output the extracted Data Grid.
   5. Add a **Stop Local Triggers** activity, to close the form and stop the execution, assuming that you don't want to interact with the form after you extract it.

   The image below shows the result of updating data while the form is still showing.
   
   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-267486-8cc3a342.gif)

## Workflow example

To follow the steps and try the tutorial yourself, see the [sample workflow](https://documentationexamplerepo.blob.core.windows.net/examples/Forms/WorkingWithDataGrids.zip).