Table Column Configurations

Replacing a Value in a Cell with a Progress Bar 

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 Perspective Table component onto your table view. We'll use the default population information that the component is initially configured with. 
3. Add three array elements to the columns property of your table as shown in the Property Editor.
   
   
   
   
   
4. There is a field property inside each of the three columns array elements. Set the "field" property values to match each of the column names in your table. This is how we associate a column in the table (which is really just a key in the underlying data on the table) with one of these custom column configurations. 
   
   
   1. Enter a field property value of "city" for the "0" column's element.
      
   2. Enter a field property value of "country" for the "1" column's element.
   3. Enter a field property value of "population" for the  "2" column's element.
      
      

5. Let's display a progress bar on the table to show the population value. To do this, go to the columns array element for "population" and set its render property to "number" and set its number property to "progress" as shown in the image below.
   
          
                                                                                                                                                                                                                                                                                  

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

7. The table will look like this after the above configurations are applied.
   
   
   

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. 

1. Let's create the cell view first. In the Project Browser, right click on Views to create a view.  In this example, the view will be named cell. Set it as a Flex layout.
   
   

2. Drag and drop a Progress Bar component onto the cell view.

3. 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. 

4. In the Project Browser, select "cell" view, and resize the view so it is closer in size to the cell in the table on our "table" view. 

5. Create a view parameter named "value" by clicking on the "Add View Parameter" option while your view is selected in the Project Browser as shown below. 
   
   
   
   
6. On the Progress Bar component, set its max property value to 30,000,000 to account for large values. 
7. Bind the Progress Bar's value property to the view parameter created in Step 3 as shown below.               
   
   
   
   
8. Now let's create our table view. Right click on Views to create a view. In this example, name the view table. Set it to have a Coordinate Root Container Type.
   
   
   
   
9. Drag a Perspective Table onto the table view. The default population information that comes on the factory configured table component will be used. 
10. Add three array elements to the columns property of the table like as shown in Property Editor as shown in the image below.
    
    
    
    
11. 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. 
    1. Enter a field property value of "city" for the "0" column's element.
    2. Enter a field property value of "country" for the "1" column's element.
    3. Enter a field property value of "population" for the  "2" column's element.             
                                                                                                                        
12. The cell view is going to be embedded into the Population cell values. Go to the column array element with the "field" value of "population" and set its "render" value to "view" and its "viewPath" to "cell" as shown below.
    
    
    
    
13. 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.