{"id":33034,"date":"2017-11-09T10:28:43","date_gmt":"2017-11-09T02:28:43","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=33034"},"modified":"2018-10-12T16:22:38","modified_gmt":"2018-10-12T08:22:38","slug":"table-layout-4-5-3","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/table-layout-4-5-3\/","title":{"rendered":"Table Layout (4.5.3)"},"content":{"rendered":"\n

This article applies to versions 4.5.0-4.5.3 of P2 Explorer. For the latest, see Table Layout<\/a>.<\/p>\n

The Table Layout is a component that arranges your data in a tabular format. You only need to configure the first row on the table and that will be repeated across each row in your dataset.<\/p>\n

The Table Layout content isn\u2019t restricted to its own data; you can add other components to the layout, and configure them to use the table layout's data as contextual data. For example, if your table layout's data contains production figures for a group of entities, you can add a sparkline chart to the table layout, that shows a trend of production data for the entity in its row. This is covered in Tutorial 2<\/a>.<\/p>\n

<\/a><\/p>\n\n\n\n\n
\n

Examples of components you can add to a table layout:<\/p>\n<\/td>\n

\n

Example of a table layout that includes a status indicator component:<\/p>\n<\/td>\n<\/tr>\n

\n\n

\"\"<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\n

Overview<\/h2>\n

The Table Layout<\/p>\n

Below is an example of a configured table layout, in design mode:<\/p>\n

1.<\/strong> The Table Layout's data determines the rows and the contextual data. When you assign this data, the first five columns (or fewer, if the dataset has fewer columns) are added automatically.<\/p>\n

2.<\/strong> Choose general appearance here: highlighting and showing\/hiding headers. Note that the style you use must have an Alternate Background Colour for this to show.<\/p>\n

3.<\/strong> The automatically added columns. You can update the header and width for these.<\/p>\n

4.<\/strong>\u00a0In this example, the final column has been manually added, and a Status Indicator component placed on the column. You cannot see the Status Indicator in the table layout properties, as it is a separate component.<\/p>\n

5.<\/strong> The applied style has a colour for\u00a0Alternate Background Colour so that the Highlight shows up.<\/p>\n

\"\"<\/a><\/p>\n

Columns on the Table Layout<\/p>\n

Click on a column to see what component is there.<\/p>\n

6. <\/strong> Columns that are added automatically use a Text Label component.<\/p>\n

\"\"<\/a><\/p>\n

7. <\/strong> This extra column has a Status Indicator component on it.<\/p>\n

\"\"<\/a><\/p>\n

\n

Working with the Table Layout and its Columns<\/h2>\n

To set up a Table Layout, choose data. Then, configure the columns and add new ones. This is described below in the following sections.<\/p>\n

Accessing the Table Layout<\/h3>\n

To configure the Table Layout, you first need to select the component. Because the Table Layout is overlaid with components, you can either access it by clicking on an empty column, or use the right-click menu.<\/p>\n

1. Right-click on any component on the Table Layout to open the pop-up menu.<\/p>\n

2. Click the Table Layout<\/strong> item, which is second on the list.<\/p>\n

\"\"<\/a><\/p>\n

Now that you have selected the Table Layout, you can reposition it, resize it, and configure it.<\/p>\n

Adding the Data<\/h3>\n

There are four data categories to choose from. See: Setting up data for the Table Layout<\/a>.<\/p>\n