# Using the Grid Component

> The **Grid** component allows you to display an unlimited number of rows and columns. The Grid component also allows you to paginate, filter, sort data, and resize the column width at runtime.

The **Grid** component allows you to display an unlimited number of rows and columns. The Grid component also allows you to paginate, filter, sort data, and resize the column width at runtime.

**Prerequisites**

Have **UiPath.Form.Activities v2.0.2** package or higher installed.

**Sortable**

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

The data in the **Grid** is displayed in the same order as in the input data table. To sort all data in the Grid click any column header in the **Form Renderer**.

* **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-178520-870f64e4.gif)

**Filterable**

You can filter data inside each column. You filter the data at runtime, in the **Form Renderer**.

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 equal | ✅ | ✅ | ✅ |
| Starts with | ✅ | ❌ | ❌ |
| Ends with | ✅ | ❌ | ❌ |
| Less than | ❌ | ✅ | ✅ |
| Less than or equals | ❌ | ✅ | ❌ |
| Greater than | ❌ | ✅ | ✅ |
| Greater than or equals | ❌ | ✅ | ❌ |
| In range | ❌ | ✅ | ✅ |
| Blank | ✅ | ✅ | ✅ |
| Not blank | ✅ | ✅ | ✅ |

:::tip
For all filtering operations applied on **Text** and **Number** data, you can add an additional filtering operation, using the operators:
* **AND** - displays data if both filter operations are true.
* **OR** - displays data if any of the filter operations is true.
:::

**Column(s) Resizable**

You can change the width of the columns at runtime, in the **Form Renderer**. The **Column(s) Resizable** capability allows you to see the data inside columns better.

To resize columns, hover your cursor over the border that separates the columns, until the two-way arrow ![](https://dev-assets.cms.uipath.com/assets/images/activities/activities-image-Two-way-arrow_icon-812d0db8.png) appears. Drag the border until you get the desired column width.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-183881-9fd5ec56.gif)

**Pagination**

You can display the data of the **Grid** component on pages that are numbered. The **Pagination** capability also includes setting the number of items per page.

To set the number of items per page: go to the **Display** tab of the **Grid** component and choose a value from the **Items per page** dropdown list. You can choose to display `10`, `50` or `100` items per page.

At the bottom of the **Form Renderer**, at runtime you can view:

* The number of rows in the page that you are on.
* The total number of rows in the grid.
* The page number you are on out of the total number of pages in the grid.

You can browse through the pages by clicking the **< >** arrows or you can get to the first page by clicking the ![](https://dev-assets.cms.uipath.com/assets/images/activities/activities-image-first_page_arrow-2166838a.png) arrow and last page by clicking the ![](https://dev-assets.cms.uipath.com/assets/images/activities/activities-image-last_page_error-28f8f9fa.png) arrow.

## Tutorial

To use the **Grid** component:

1. Drag and drop a **Grid** component in the **Form Designer**.
2. Go to the **Field Key** tab and change the **Property Name** to the input datatable argument from the **FormFieldsCollection** property of the **Create Form** activity.

    For this example, input `fruitDataTableArg`. The data table argument binds the data in the `fruit_table.csv` file to the form.
3. In the **Display** tab, check the capabilities that you want to apply to the Grid component. For this example, check all four boxes: **Sortable**, **Filterable**, **Column(s) Resizable**, and **Pagination**.
4. In the **Items Per Page** field, choose from the dropdown list the number of items per page that you want to display in the form. For this example, choose `10`.
5. Save the component.
6. Drag and drop inside the **Grid** the form components that match the column values inside the input datatable. For this example, drag and drop the following components: one **Text Field**, one **Number**, and one **Date/Time**.
   1. Go to the **Field Key** tab of the **Text Field** component and change the **Property Name** to the name of the column that holds text data in the datatable. For this example, change the property name to `fruit`.
   2. Go to the **Field Key** tab of the **Number** component and change the **Property Name** to the name of the column that holds number data in the datatable. For this example, change the Property Name to `qty`.
   3. Go to the **Field Key** tab of the **Date/Time** component and change the **Property Name** to the name of the column that holds date/time data in the datatable. For this example, change the Property Name to `expdate`.
    :::note
    Make sure to save form components before closing them!
    :::
7. Save the form.
8. Run the workflow and explore the **Grid** component capabilities.

## Sample workflow

To check the complete workflow or to have a future reference, download the [XAML example](https://documentationexamplerepo.blob.core.windows.net/examples/Activities/Using_Grid_Component_Example.zip)