Customizing Columns Width

Tables in your form sometimes need wider or narrower columns, rather than columns with the same width. You can set a custom width for tables in Edit Grid and Data Grid components.

Tutorial

The next tutorial provides steps on how to modify the width for Column3 in a table saved as myTable.

Building the Data Table

To create a table to use inside your form:

Inside your workflow, add the Build Data Table activity.
Click DataTable... . The Build Data Table wizard opens.
Add the desired columns for your table and edit their properties.

Make sure the columns name have no spaces or special characters, as you use these names to link the columns in the form through the Field Key component tab.
Click OK to save the table.
In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

You use this variable to bind the table to the form through the FormFieldsCollection property of the Create Form activity.

Binding the Data Table to your Form and Grid Components

To bind the data table to your form:

Add the Create Form activity in your workflow.
In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.
Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.
Click OK.

Make sure that GenerateInputFields box is unchecked.

To bind the data table to the Edit Grid or Data Grid component:

Open the Form Designer from the Create Form activity.
From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).
In the Field Key tab of your grid, reference the table argument (i.e., table).

The Field Key value is case sensitive.
Add text components into your grid to replicate the columns in your table. Save each text component.

For example, if your table has three columns called Column1, Column2, and Column3, drag and drop three text components into your grid, and make sure to use the column names from the table into the components Field Key tab.

The Field Key value is case sensitive.
Save the form.

Customizing Columns Width in Edit Grid Components

Using Bootsrap 3

Go to the Edit Grid Component settings .
In the Templates tab > Header Template section, change the default generated code with the following template:
```
<div class="row">
      {% util.eachComponent(components, function(component) { %}
        {% if (displayValue(component)) { %}
        {% if (component.key=== 'Column3') { %}
              <div class="col-sm-8">
            {% } %}
            {% if (component.key !== 'Column3') { %}
              <div class="col-sm-2">
            {% } %}
          {{ component.label }}</div>
        {% } %}
      {% }) %}
    </div><div class="row">
      {% util.eachComponent(components, function(component) { %}
        {% if (displayValue(component)) { %}
        {% if (component.key=== 'Column3') { %}
              <div class="col-sm-8">
            {% } %}
            {% if (component.key !== 'Column3') { %}
              <div class="col-sm-2">
            {% } %}
          {{ component.label }}</div>
        {% } %}
      {% }) %}
    </div>
```
In the Templates tab > Row Template section, change the default generated code with the following template:
```
<div class="row">
      {% util.eachComponent(components, function(component) { %}
       {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
            {% if (component.key=== 'Column3') { %}
              <div class="col-sm-8">
            {% } %}
            {% if (component.key !== 'Column3') { %}
              <div class="col-sm-2">
            {% } %}
            {{ getView(component, row[component.key]) }}
          </div>
        {% } %}
      {% }) %}
      {% if (!instance.options.readOnly && !instance.disabled) { %}
        <div class="col-sm-2">
          <div class="btn-group pull-right">
            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
            {% } %}
          </div>
        </div>
      {% } %}
    </div><div class="row">
      {% util.eachComponent(components, function(component) { %}
       {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
            {% if (component.key=== 'Column3') { %}
              <div class="col-sm-8">
            {% } %}
            {% if (component.key !== 'Column3') { %}
              <div class="col-sm-2">
            {% } %}
            {{ getView(component, row[component.key]) }}
          </div>
        {% } %}
      {% }) %}
      {% if (!instance.options.readOnly && !instance.disabled) { %}
        <div class="col-sm-2">
          <div class="btn-group pull-right">
            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
            {% } %}
          </div>
        </div>
      {% } %}
    </div>
```
Note:
- Notice that you compare the component.key value to the exact name of the column, which is the same one used in the Field Key tab of each text component (step 4 in binding the data table to Edit Grid or Data Grid components).
- UiPath Forms are using the Bootstrap 3 framework. The total width of the table is divided into 12 sections. Therefore, make sure that any division you make, it adds up to 12. In this example, two columns with col-sm-2 class take up 4 sections, leaving the remaining 8 for the third column (col-sm-8).

Using Style property

Hover over the Edit Grid component and click Edit. The configuration page opens.
Navigate to the Templates tab.

2.1. In the Header Template script, identify all <div class="col-sm-2"> tags and add your custom width as follows: style="width:{your_custom_width}px !important". The width must be expressed in pixels.

2.2. In the Row Template script, identify all <div class="col-sm-2"> tags and add your custom width as follows: style="width:{your_custom_width}px !important". The width must be expressed in pixels.

The "col-sm-2" element represents the default column width. You can modify the default column width by adding a customized style tag. For example style="width:70px !important" applies a width of 70 pixels to all Edit Grid columns.
Save your component and the form.

Customizing Columns Width in Data Grid Components

Create a local CSS file with the desired column widths. In our example, the following template creates a wider Column3 (i.e., nth-child(3)):

.mygrid tbody>tr>:nth-child(1){ 
width: 70px;
}
.mygrid tbody>tr>:nth-child(2){ 
width: 15%;
}
.mygrid tbody>tr>:nth-child(3){ 
width: 60%;
}.mygrid tbody>tr>:nth-child(1){ 
width: 70px;
}
.mygrid tbody>tr>:nth-child(2){ 
width: 15%;
}
.mygrid tbody>tr>:nth-child(3){ 
width: 60%;
}

In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).