---
title: "Table Column Configurations"
---

# Table Column Configurations

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

## 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 an element for each column you wish to display on the tag to the props.columns property by either clicking the **Add Array Element** button or the + icon right of the **columns** property. Repeat this process until you see all columns on the table again. 
3. Map each props.column element to a column in the 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 in the desired column order:
    * props.columns.[**0**].field to **country**
    * props.columns.[**1**].field to **city**
    * props.columns.[**2**].field to **population**
4. Change the alignment on each column by changing the **props.columns.[#].justify** property. In our case, we set the justify property on all columns elements to **center** to center the text. 

    ![](column-imgs/image2021-8-10_15-10-28.png)

## Changing Applied Formatting
In a Perspective Table, you can adjust your column format to display data as desired. In this example, instead of using the default **number [1,000.12]** format to display population counts, we will select **abbreviation [1.2k]** using the **numberFormat** dropdown.
1. Drag a Perspective Table component onto your view. We'll use the default population information. 
2. Add three array elements to the columns property of your table.
3. Set the **field** property value for props.columns.[**2**] to **population** to associate the column data in the table to the column configuration. 

    ![](column-imgs/image2022-11-9_11-0-9.png)

4. Select the **numberFormat** dropdown to view all format options.

    ![](column-imgs/image2022-11-9_11-10-37.png)

5. Select **abbreviation [1.2k]** to adjust the displayed data in the table's population column. 

    ![](column-imgs/image2022-11-9_11-14-40.png)

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

    ![](column-imgs/2020-05-27_10-04-59.png)

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

    ![](column-imgs/progressBarRenderAndNumber.png)
    
7. Set the **progressBar.max** value to 30,000,000 to account for cities with a large population.

    ![](column-imgs/progressBarFinished.png)

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

    ![](column-imgs/2020-06-04_8-39-24.png)

2. Drag a [Perspective Table](perspective-table.md) 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.

    ![](column-imgs/cellTableViewWithTable.png)

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.

    ![](column-imgs/2020-06-04_8-30-55.png)

6. Drag and drop a [Progress](../perspective-progress/perspective-progress.md) 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**.

    ![](column-imgs/image-2022-11-11_13-8-30.png)

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.               

    ![](column-imgs/image-2022-11-11_13-11-12.png)
                                                                                                                
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.

    ![](column-imgs/cellTableViewTableRenderAndviewPath.png)

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. 

    ![](column-imgs/cellTableViewFinished.png)

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. 

![](column-imgs/image2021-12-9_12-36-16.png)

| Property Key  | Description   |
| ------------- | ------------------- |
| `column`      | A string representing the column name of the column, as defined by `props.columns.[columnNumber].field`. |
| `columnIndex` | A number representing the index of the current column. Similar to columnNumber in `props.columns.[columnNumber]`.  |
| `row`         | A number representing the index of the row. Note that this property does not adjust for hidden rows, or rows that are otherwise not displayed.|
| `rowData`     | A JSON object representing table data for the current row. This is equivalent to accessing props.data[row] on the table.   |
| `rowIndex`    | A number representing the displayed index of the row. This property differs from **row** in that **rowIndex** does not count rows that aren't displayed.For example, assuming a table is only showing 25 rows per page, then the first row on the second page of results would display a **rowIndex** of 0, while **row** would provide a value of 25. |
| `value` | Represents the value of the cell being rendered as a view.  |