You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »



This page contains a couple of examples that involve making changes to a table component's columns property. renders. 

Aligning Text in a Column

The table component can apply different text alignment for each column. In this example we will demonstrate the concept with the default dataset on the component. 

  1. Create a new table component, or select an existing one.

  2. Add several elements to the props.columns property, one for each column you wish to display on the tag. Do this by either clicking the Add Array Element button, or press the + button next to the props.column property. Repeat this process until you see all columns on the table again. 

  3. Next we need to map each props.column element to a column in our underlaying data (props.data). For each props.columns[#].field property, set the field property to the name of a column/series in our props.data property. For example, if we're using the default dataset on the component and we wanted the column order to be country, city, and then population, we would set
    props.columns.[0].field to country
    props.columns.[1].field to city
    props.columns.[2].field to population
  4. Now that our columns have been mapped, we can change the alignment on each column by changing the props.columns.[#].justify property. In our case, if we wanted to center the text in every column, we would set the justify property on all columns elements to center.

On this page ...



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. 





  • No labels