Customizing column width in Data Grids

This tutorial shows how to modify the width of the last column in a Data Grid.

Prerequisites: To follow the steps in this tutorial, create a data table. Make sure that the last column of the table has content longer than five to six words.

1. Add a Build Data Table activity in your workflow.
2. Open the Build Data Table wizard and add the desired columns for your table.
   Note: Make sure the columns have no spaces or special characters, because you will later use these names to link the columns in the form through Property Names.
3. Save the data table to a variable. For this example, you can name it dataTable.
   
   

   

   
   

1. Add a Data Grid into your form, and use the name of the data table variable (dataTable) as the Property Name of the component.
2. Add components into the Data Grid, according to the columns and their values in the data table. The Property Names of these components are the exact names of the columns in the data table.
   For this example, add three Text Field components. Use the following Property Names for the components: column1, column2, and column3.
3. In the Properties panel of the form, input the following code in the Custom CSS field:

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

   Note: The nth-child element represents a column in the grid component.
4. Edit the Data Grid component. In the Display tab, under Custom CSSinput the mygrid CSS class.
   Save the component and the form. This results in a wider third column, where the content is longer than approximately five to six words.