Table Column Configurations

Replacing a Value in a Cell with a Progress Bar 

Column configurations can be customized to display a progress bar on the table to show a column's value. We will use the default population information initially configured in the Table component to demonstrate this option.

1. In the Project Browser, right click on Views to create a view.  In this example, the view will be named table. Set it to have a Coordinate Root Container Type. 
   
   
   
   
2. Drag a Table component onto your table view. 
3. Add three array elements to the columns property of your table.
4. Set the field property values inside each of the three columns array elements to match each of the column names in your table to associate a column in the table and the custom column configurations. 
   
   • props.columns.[0].field to country
   • props.columns.[1].field to city
   • props.columns.[2].field to population

5. Access the props.columns.[2] and set the render property to number.

6. Then, set the number property to progress.
   
   
                                                                                                                                                                                                                                                                                  
   

7. Set the progressBar.max value to 30,000,000 to account for cities with a large population.
   
   
   

Embedding a View in a Table Cell

In a Perspective Table, it is possible to embed a view inside a table cell. In this example, instead of using the table's built-in progress bar, we'll embed a view that contains a custom progress bar using the Progress component. The default information that comes on the factory configured table component will be used. 

1. Create the table view first. In the Project Browser, right click on Views to create a view. In this example, name the view table. Set it to a Coordinate Root Container Type.
   
   
   
   

2. Drag a Perspective Table onto the table view.

3. Add three array elements to the columns property of the table like as shown in Property Editor as shown in the image below.
   
   
   
   

4. There is a field property inside each of the three column array elements. Set the field values to match each of the column names in your table

   • props.columns.[0].field to country

   • props.columns.[1].field to city
   • props.columns.[2].field to population

5. Now, create the cell view. Right click on Views to create a view. In this example, the view will be named cell. Set it to a Flex Root Container Type.
   
   
   
   

6. Drag and drop a Progress component onto the cell view.

7. Select the Progress Bar component and set the position.grow property to 1 so that the bar takes up as much space in the container as possible. 

8. In the Project Browser, select the cell view, and resize the view so it is closer in size to the population column in the table on the table view. 

9. Click Add View Parameter while your view is selected in the Project Browser.
10. Select Value from the listed type options.
11. Enter value in place of key.
    
    
    
    
12. Set the max property value to 30,000,000 on the Progress component to account for large values. 
13. Bind the Progress's value property to the view parameter created in Step 10 as shown below.               
    
    
                                                                                                                    
14. Go to the column array element with the field value of population and set the render value to view.
15. Set the viewPath to cell to embed cell view into the population cell values.
    
    
    
    
16. After the population column is pointed to the cell view, the population number from the table cell will be passed to the cell view. Since the cell view's Progress Bar has its value property bound to the cell view's input parameter, the population value will then be displayed on the table by the Progress Bar in the cell view. If you wanted to resize the progress bar, simply change the height and width properties under the defaultSize property on the cell view. 
    
    
    

Once a column is configured to render each cell as a view, the table component will automatically pass each view a number of contextual view parameters. Components on the rendered view can access these property values by first configuring view params that match the passed keys.