{"id":18998,"date":"2016-08-25T10:39:27","date_gmt":"2016-08-25T02:39:27","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=18998"},"modified":"2024-08-30T13:26:41","modified_gmt":"2024-08-30T05:26:41","slug":"data-table-4-4-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/data-table-4-4-2\/","title":{"rendered":"Data Table (4.4.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to the Data Table in versions 4.4.2 and later of P2 Explorer. For help on earlier versions, see <a href=\"#Previous_Releases\">Previous Releases<\/a>. For the latest release, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\">Data Table<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">The data table displays data in tabular format. The page designer can configure many settings, such as display columns, sorting, grouping, filtering - which are then available to the end-user in run time.<\/p>\n<p class=\"intro-text\">There are also data table configurations that are set in design time, for example column aggregation (such as sum, average, minimum), column titles (headers) and the table footer.<\/p>\n<div id=\"attachment_7392\" style=\"width: 730px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7392\" class=\"wp-image-7392\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview.png\" alt=\"\" width=\"720\" height=\"386\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview.png 810w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview-768x411.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Dataset-Table-Overview-48x26.png 48w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><p id=\"caption-attachment-7392\" class=\"wp-caption-text\">data table<\/p><\/div>\n<p class=\"intro-text\">A data table can be configured to display tags, ad-hoc calculations, attribute values for various entities, or columns from a relational dataset.<\/p>\n<p class=\"left-bar\">Jump to: <a title=\"Options for Configuring a Data Table's Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/#Options_for_Configuring_a_Data_Tables_Data\">Options for Configuring a Data Table's Data<\/a>.<\/p>\n<p class=\"no-toc-heading\">Functionality of a Data Table<\/p>\n<p class=\"intro-text\">The data table can be configured to provide several options to the user at run time, making this a very interactive page component. For example, an end user can sort, group, or pin columns if these options have been configured in design time.<\/p>\n<p class=\"intro-text\">Here is a brief overview of how the designed data table appears in run-time; for more details refer to the <a title=\"Using Data Tables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-data-tables\/\">Using data tables<\/a> article.<\/p>\n<div id=\"attachment_7292\" style=\"width: 1508px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Features-of-a-dataset-table-c.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7292\" class=\"image-border wp-image-7292 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Features-of-a-dataset-table-c.png\" alt=\"\" width=\"1498\" height=\"770\" \/><\/a><p id=\"caption-attachment-7292\" class=\"wp-caption-text\">Features of a data table<\/p><\/div>\n<p class=\"page-subheading\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">This section explains how to set up a very basic data table, using Tag data.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14232 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png\" alt=\"\" width=\"555\" height=\"103\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png 555w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-48x9.png 48w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Related<\/strong>: <a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Using Tag Data<\/a><\/p>\n<p class=\"intro-text\">1. Open an Explorer page in Studio, or <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a new Studio page<\/a>.<\/p>\n<p class=\"intro-text\">2. Drag a Data Table onto the page and resize to make it wider.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14042 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2.png\" alt=\"\" width=\"545\" height=\"385\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2.png 545w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/step-2-48x34.png 48w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Click on the Data Table to open the Component Editor.<\/strong><\/p>\n<p class=\"intro-text\">3. Add tag data to the table, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Data Selector for Tags<\/a>.<\/p>\n<p class=\"note\">In this example, we've used the <em>Silver<\/em> tag, and have left the data collection parameters (Sample Method, Sample Interval, Start Time and End Time) using the page defaults. You can use a different tag.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14227 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1.png\" alt=\"\" width=\"352\" height=\"447\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1.png 352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1-118x150.png 118w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/quick-start-3-1-38x48.png 38w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. Click <strong>Add Column<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19000 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4.png\" width=\"341\" height=\"522\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4-98x150.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-4-31x48.png 31w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. In the <strong>Header<\/strong> text box, type a suitable column header.<\/p>\n<p class=\"intro-text\">6. In the <strong>Column<\/strong> select a data column.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19002 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5.png\" width=\"346\" height=\"857\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5.png 346w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5-61x150.png 61w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5-10x24.png 10w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5-15x36.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Quick-start-Step-5-19x48.png 19w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. Continue to add more columns in this way, from the tag dataset.<\/p>\n<p class=\"intro-text\">That's all - you now have a data table with data.<\/p>\n<p class=\"instruct\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14232 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png\" alt=\"\" width=\"555\" height=\"103\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion.png 555w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Quick-Start-Conclusion-48x9.png 48w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorials<\/span><\/h2>\n<p class=\"intro-text\">For the data table, we have three tutorials, each following from the previous one.<\/p>\n<ul class=\"intro-text\">\n<li>Tutorial 1: Add a data table with two specified columns.<\/li>\n<li>Tutorial 2: Update the data table to have extra columns, using <em>Autofill<\/em>.<\/li>\n<li>Tutorial 3: Update the data table to set a variable when a user selects a row.<\/li>\n<\/ul>\n<h3 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial 1. Specifying Column Names<\/span><\/h3>\n<p class=\"intro-text\">In this tutorial, we'll display a portion of a dataset in a table by adding the columns that we want to display.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14177\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2.png\" alt=\"\" width=\"899\" height=\"345\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2.png 1121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2-768x295.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-intro-2-48x18.png 48w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/a><\/p>\n<h3>Step 1. Prepare the Tutorial Page<\/h3>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio.<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png\" alt=\"\" width=\"700\" height=\"458\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png 1054w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-768x503.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-48x31.png 48w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h3>Step 2. Add a Data Table<\/h3>\n<p class=\"intro-text\">1. Drag a Data Table component onto the top right grid, as shown. The Data Table is in the Table <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/><\/a> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14165\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1.png\" alt=\"\" width=\"900\" height=\"287\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1.png 1317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-768x245.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-1280x408.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Step-1-48x15.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click on the Data Table component to configure it.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19003 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2.png\" width=\"928\" height=\"666\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2.png 928w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2-768x551.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2-150x108.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.2-48x34.png 48w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Add dataset query data to the table, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Data Selector for Dataset Queries<\/a>.<\/p>\n<ul class=\"intro-text\">\n<li>Select the <strong>Annual KPIs<\/strong> dataset query from the <em>Explorer Training Data<\/em> datasource (or substitute with your own dataset query).<\/li>\n<li>Type <strong>2013<\/strong> in the <em>selectedYear<\/em> parameter text box.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14167 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3.png\" alt=\"\" width=\"353\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-step-3-48x48.png 48w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. Select all the data table options, except <em>Selectable<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19004 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4.png\" width=\"350\" height=\"413\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4.png 350w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4-127x150.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-1-step-2.4-41x48.png 41w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Click <strong>Add Column<\/strong>.<\/p>\n<p class=\"intro-text\">6. Configure the column:<\/p>\n<ul class=\"intro-text\">\n<li>In the <strong>Header<\/strong> text box, type <em>KPI<\/em>.<\/li>\n<li>In the <strong>Column<\/strong> drop-down list select <em>KPI Name<\/em>.<\/li>\n<li>In the <strong>Column Type<\/strong> drop-down list select <em>Text<\/em>.<\/li>\n<li>In the <strong>Width<\/strong> text box, type <em>150<\/em>.<\/li>\n<li>Select <strong>Pinnable<\/strong>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14170 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5.png\" alt=\"\" width=\"334\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5-140x150.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-5-45x48.png 45w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. Add another column and configure it:<\/p>\n<ul class=\"intro-text\">\n<li>In the <strong>Header<\/strong> text box, type <em>Target<\/em>.<\/li>\n<li>In the <strong>Column<\/strong> drop-down list select <em>Target Value<\/em>.<\/li>\n<li>In the <strong>Column Type<\/strong> drop-down list, select <em>Number<\/em>.<\/li>\n<li>In the <strong>Column Format<\/strong> drop-down list, select <em>Currency<\/em>.<\/li>\n<li>In the <strong>Column Symbol<\/strong> text box, type <em>$<\/em>.<\/li>\n<li>In the <strong>Aggregation<\/strong> drop-down list select <em>Sum<\/em>.<\/li>\n<\/ul>\n<p class=\"intro-text\">Well done! You've added a data table.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14172 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7.png\" alt=\"\" width=\"338\" height=\"425\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7.png 338w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7-119x150.png 119w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-step-7-38x48.png 38w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a><\/p>\n<h3>Try out the Data Table<\/h3>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Click a column header to sort the column.<\/li>\n<li class=\"intro-text\">Note the currency formatting, and the aggregation (sum) below the Currency column.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14176 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4.png\" alt=\"\" width=\"543\" height=\"334\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4.png 543w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-1-conclusion-4-48x30.png 48w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><\/a><\/p>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial 2. Autofilling Columns<\/span><\/h2>\n<p class=\"intro-text\">In this tutorial, we'll add extra columns to the data table from Tutorial 1, this time using autofill.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14196\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3.png\" alt=\"\" width=\"900\" height=\"324\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3.png 1124w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3-768x277.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-intro-3-48x17.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Click on the Data Table component to configure it.<\/p>\n<p class=\"intro-text\">2. Click <strong>Autofill<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19006 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1.png\" width=\"910\" height=\"866\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1.png 910w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1-768x731.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-1-48x46.png 48w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. In the <strong>Start Column Number<\/strong> text box, type <em>8<\/em>.<\/p>\n<p class=\"intro-text\">4. In the <strong>Width<\/strong> text box, type <em>120<\/em>. (this allocates a width of 120 to each of the autofill columns).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19007 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3.png\" width=\"346\" height=\"410\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3.png 346w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3-127x150.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-2-step-3-41x48.png 41w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/a><\/p>\n<p class=\"note\"><strong>Note<\/strong>: <em>Start Column Number<\/em> refers to column position in the dataset (counted from the left). If you're not sure which column to start from, click the data table's <strong>Data<\/strong> property to open the data panel, then click <em>Preview<\/em>. Count the column numbers from the left.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14191 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview.png\" alt=\"\" width=\"322\" height=\"328\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview.png 322w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-preview-48x48.png 48w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/a><\/p>\n<div id=\"attachment_14192\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-14192\" class=\"wp-image-14192\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8.png\" alt=\"\" width=\"800\" height=\"338\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8.png 997w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8-768x324.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Position-8-48x20.png 48w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-14192\" class=\"wp-caption-text\">Position 8 in the Dataset Preview<\/p><\/div>\n<h3>Try out the changes<\/h3>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Note the two new columns that <em>autofill<\/em> added.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-14243 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4.png\" alt=\"\" width=\"559\" height=\"363\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4.png 559w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4-150x97.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-2-conclusion-4-48x31.png 48w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial 3. A Selectable Data Table<\/span><\/h2>\n<p class=\"intro-text\">In this tutorial, we'll configure the data table from Tutorials 1 and 2 to be <em>Selectable<\/em>.<\/p>\n<p class=\"intro-text\">When a user clicks a row, a Text Label will update with the selected row's KPI name.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14202\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1.png\" alt=\"\" width=\"800\" height=\"286\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1.png 1121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1-768x275.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-Intro-1-48x17.png 48w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h3>Step 1. Configure the Data Table<\/h3>\n<p class=\"intro-text\">1. Click on the Data Table component to configure it.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19009 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1.png\" width=\"929\" height=\"476\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1.png 929w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1-768x394.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-1-48x25.png 48w\" sizes=\"auto, (max-width: 929px) 100vw, 929px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Select <strong>Selectable<\/strong>.<\/p>\n<p class=\"intro-text\">3. In the <strong>Publish Column Index<\/strong> text box, type <em>1<\/em>.<\/p>\n<p class=\"intro-text\">4. In the <strong>Publish Type<\/strong> drop-down list, select <em>Text<\/em>.<\/p>\n<p class=\"intro-text\">5. In the <strong>Publish Variable<\/strong> drop-down list, select <em>selectedRow<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19010 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2.png\" width=\"351\" height=\"578\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2.png 351w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2-91x150.png 91w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Tut-3-step-2-29x48.png 29w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<p class=\"intro-text\">This is all the configuration required for the data table. To complete the tutorial, we'll add a text label so that we can observe how the <em>Selectable<\/em> property works in run time.<\/p>\n<h3>Step 2. Add a Text Label<\/h3>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a>.<\/p>\n<p class=\"intro-text\">In this step, we'll add a text label to the page, to display the defined column (using <em>Publish Variable<\/em>) from the selected row.<\/p>\n<p class=\"intro-text\">1. Drag a Text Label onto the grid cell left of the data table.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14204\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1.png\" alt=\"\" width=\"900\" height=\"215\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1.png 1310w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-768x183.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-1280x306.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-3-step-2.1-1-48x11.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click <strong>Add Data<\/strong>, then add the <em>selectedRow<\/em> value variable.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14210 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1.png\" alt=\"\" width=\"352\" height=\"329\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1.png 352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1-150x140.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step2.2-1-48x45.png 48w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. In the <strong>Style<\/strong> drop-down list, select a title style, such as <em>Page Subtitle<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14205 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3.png\" alt=\"\" width=\"354\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3-150x115.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-step-2.3-48x37.png 48w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/p>\n<h3>Try out the changes<\/h3>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Note how the <strong>KPI Name<\/strong> (under the <em>KPI<\/em> header) appears in the text label.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-14214\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final.png\" alt=\"\" width=\"900\" height=\"313\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final.png 1114w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final-768x267.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/tut-3-conclusion-final-48x17.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Comprehensive Reference<\/h2>\n<p class=\"intro-text\">This section describes the properties of the data table component editor.<\/p>\n<p class=\"instruct\">To set up a data table, choose data and add one or more columns.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"100\"><strong>Data<\/strong><\/td>\n<td>Defines the data table's data. There are four data categories to choose from. See: <a title=\"Options for Configuring a Data Table's Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/#Options_for_Configuring_a_Data_Tables_Data\">Options for Configuring a Data Table's Data<\/a><\/p>\n<ul>\n<li><em>Dataset Query<\/em><\/li>\n<li><em>Ad hoc Calculations<\/em><\/li>\n<li><em>Attributes<\/em><\/li>\n<li><em>Tags<\/em><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Enable Header <\/strong><\/td>\n<td>Shows the table header.<\/td>\n<\/tr>\n<tr>\n<td><strong>Enable Grid Menu<\/strong><\/td>\n<td>Shows the grid menu at the top right corner of the table. The user has options to hide\/re-display the columns (listed), and to clear all filters.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filterable<\/strong><\/td>\n<td>The user can filter a column by typing text into the text box under the column header.<\/td>\n<\/tr>\n<tr>\n<td width=\"110\"><strong>Column Resizable<\/strong><\/td>\n<td>The user can resize columns within the table, using controls located to the left and right of each column header.<\/td>\n<\/tr>\n<tr>\n<td><strong>Sortable<\/strong><\/td>\n<td>The user can click a column header to sort data in ascending order (click once), descending order (click twice), or unsorted order (click thrice).<\/td>\n<\/tr>\n<tr>\n<td><strong>Groupable<\/strong><\/td>\n<td>The user can group column data (from one or several columns).<\/td>\n<\/tr>\n<tr>\n<td><strong>Enable Footer<\/strong><\/td>\n<td>The table footer displays the total number of records. If columns are grouped, the footer shows total items, as well as total items displayed, for example <em>Total Items:38 (Showing Items:9)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>Selectable<\/strong><\/td>\n<td>If this option is selected, the user can select a table row which sets a variable, using the following three properties:<\/td>\n<\/tr>\n<tr>\n<td><em>Publish Column Index<\/em><\/td>\n<td>The column number; used in conjunction with the selected row, a single data value sets the <em>Publish Variable<\/em>. (Only available if <strong>Selectable<\/strong> is selected.)<\/td>\n<\/tr>\n<tr>\n<td><em>Publish Type<\/em><\/td>\n<td>This must match the <em>Publish Column's<\/em> data type. (Only available if <strong>Selectable<\/strong> is selected.)<\/td>\n<\/tr>\n<tr>\n<td><em>Publish Variable<\/em><\/td>\n<td>Select the variable that must update when the user selects a row. (Only available if <strong>Selectable<\/strong> is selected.)<\/td>\n<\/tr>\n<tr>\n<td width=\"110\"><strong>Columns<\/strong><\/td>\n<td>Add columns to display in the table. Available columns depend on the data table's data.<\/td>\n<\/tr>\n<tr>\n<td width=\"110\"><strong>Style<\/strong><\/td>\n<td>Select a table style from the list. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Data_Table\">Data Table style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19012 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference.png\" width=\"347\" height=\"641\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Table-Comprehensive-Reference-26x48.png 26w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Adding and Removing Columns<\/p>\n<p class=\"intro-text\">Add columns to display in the table. Available columns depend on the data table's data.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"110\"><strong>Add Column<\/strong><\/td>\n<td>Click <strong>Add Column<\/strong> to add a column, then configure it to show a selected column.<\/td>\n<\/tr>\n<tr>\n<td><strong>Autofill<\/strong><\/td>\n<td>Click <strong>Autofill<\/strong> to add multiple columns.<\/td>\n<\/tr>\n<tr>\n<td><strong>Remove<\/strong><\/td>\n<td>Click on a column tab, then click <strong>Remove<\/strong>, to remove the column from the data table.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14152 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns.png\" width=\"327\" height=\"222\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Add-and-remove-columns-48x33.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Configuring Columns<\/p>\n<p class=\"intro-text\">Select a column to configure it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7215 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column.png\" alt=\"\" width=\"324\" height=\"43\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column.png 324w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Select-a-Column-48x6.png 48w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td><em>Single column:<\/em><\/td>\n<td>Configure an already-named column. Click a named column or a new column (<strong>Column<\/strong>). Fill in the following properties:<\/td>\n<\/tr>\n<tr>\n<td width=\"100\"><strong>Header<\/strong><\/td>\n<td>Type a column header as you would like it to appear in the data table.<\/td>\n<\/tr>\n<tr>\n<td><strong>Column<\/strong><\/td>\n<td>This is the column name in the source data. Select a column from the drop-down list.<\/td>\n<\/tr>\n<tr>\n<td width=\"110\"><strong>Column Type<\/strong><\/td>\n<td>The user can resize columns within the table, using controls located to the left and right of each column header.<\/td>\n<\/tr>\n<tr>\n<td><strong>Width<\/strong><\/td>\n<td>Type in a number (to assign a width for this column, in pixels) or keep the asterisk (*). All columns with the asterisk width are allocated equal portions of available total column width.<\/td>\n<\/tr>\n<tr>\n<td><strong>Aggregation<\/strong><\/td>\n<td>These are suitable for columns with numeric data. Choose an option from the drop-down list, such as <em>Count, Average<\/em> or <em>Sum<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Pinnable<\/strong><\/td>\n<td>The table footer displays the total number of records. If columns are grouped, the footer shows total items, as well as total items displayed, for example <em>Total Items:38 (Showing Items:9)<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14139 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns.png\" alt=\"\" width=\"336\" height=\"359\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns-140x150.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/configure-single-columns-45x48.png 45w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14252 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns.png\" alt=\"\" width=\"311\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Click-recursive-columns-48x8.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td><em>Multiple columns:<\/em><\/td>\n<td>Configure the recursive columns. Click <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/recursive-Column-icon.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7219 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/recursive-Column-icon.png\" alt=\"\" width=\"15\" height=\"16\" \/><\/a><strong>Column<\/strong>. Fill in the following properties:<\/td>\n<\/tr>\n<tr>\n<td><strong>Start Column Number<\/strong><\/td>\n<td>Type in the order number of the first column you want added to the data table. This column as well as the others after it, are added to the data table.<\/td>\n<\/tr>\n<tr>\n<td><strong>Width<\/strong><\/td>\n<td>Type in the width to apply to all of the auto-filled columns.<\/td>\n<\/tr>\n<tr>\n<td><strong>Pinnable<\/strong><\/td>\n<td>The table footer displays the total number of records. If columns are grouped, the footer shows total items, as well as total items displayed, for example <em>Total Items:38 (Showing Items:9)<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19013 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties.png\" width=\"340\" height=\"252\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Autofill-properties-48x36.png 48w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3 class=\"page-subheading\">Options for Configuring a Data Table's Data<\/h3>\n<p class=\"intro-text\">There are four separate categories of data that you can select for your data table's <em>Data<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14109 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table.png\" alt=\"\" width=\"348\" height=\"212\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Select-data-for-data-table-48x29.png 48w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Important Note: <\/strong>You can tab through the different data categories, to configure them. The one that is selected when you save the page remains the configured option. Any other configurations will be lost.<\/p>\n<p class=\"intro-text\">Here is the full reference (including the Dataset Query category, already covered in this tutorial) to the different data categories you can choose for a data table's data.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Select a Data Category<\/strong><\/td>\n<td><strong>The Configured Data Table's Data<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\">\n<p><strong>Dataset Query Columns:<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> Configure your data table's <em>Data<\/em> to use a column from a dataset query: <a title=\"Using Dataset Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Using Dataset Data<\/a><\/p>\n<p>Note: If you are using a dataset that has been enabled for paging, you will see the following additional parameters here:<\/p>\n<ul>\n<li>Sort By<\/li>\n<li>Enable Server Paging<\/li>\n<li>Page Number<\/li>\n<li>Page Size<\/li>\n<li>Total Row Count<\/li>\n<\/ul>\n<p>See also: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/connecting-your-data\/creating-a-dataset-datasource\/how-to-write-a-dataset-query\/how-to-write-a-paged-query\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\">How to Write a Paged Query<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/\">Paging Control tutorial<\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14105 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query.png\" alt=\"\" width=\"344\" height=\"325\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query-150x142.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Dataset-query-48x45.png 48w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Ad hoc Calculation Columns: <\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9575 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Ad-Hoc-Calc-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> Configure your data table's <em>Data<\/em> to use ad hoc calculations: <a title=\"Using Ad hoc Calculation Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Ad_hoc_Calculation_Data\">Using Ad hoc Calculation Data<\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14103 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc.png\" alt=\"\" width=\"348\" height=\"445\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Adhoc-Calc-38x48.png 38w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Attribute Columns:<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" width=\"21\" height=\"19\" \/> Configure your data table's <em>Data<\/em> to use attributes for one or more entities: <a title=\"Using Attribute Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Using Attribute Data<\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14104 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes.png\" alt=\"\" width=\"344\" height=\"651\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes-79x150.png 79w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attributes-25x48.png 25w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Tag Columns:<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9573 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/tag-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> Configure your data table's <em>Data<\/em> to use tags: <a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Using Tag Data<\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14107 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data.png\" alt=\"\" width=\"341\" height=\"515\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data-99x150.png 99w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tag-data-32x48.png 32w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 class=\"page-subheading\">Your Data Table in Run Time<\/h2>\n<p class=\"intro-text\">A lot of the advanced configuration can best be appreciated in Explorer's run-time mode.<\/p>\n<p class=\"left-bar\">Take a look at the <a title=\"Using data tables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-data-tables\/\">Using data tables<\/a> article to see how data tables can be used in run time.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Previous Releases<\/h2>\n<ul class=\"intro-text\">\n<li class=\"intro-text\">Dataset Table (4.4.0)<\/li>\n<li class=\"intro-text\"><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table-4-3-2\/\">Dataset Table (4.3.2)<\/span>. In this version, the data table was referred to as the previously called the <em>dataset table<\/em>.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Data Table displays data in tabular format. The page designer can configure many settings in the design, such as display columns, sorting, grouping, filtering. Users can also change the tables appearance, dynamically.<br \/>\nThis tutorial guides you through how to add a Data Table to a page, and applies to version 4.4.2 and later of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/data-table-4-4-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":14267,"parent":32078,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[113],"class_list":["post-18998","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-tables","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=18998"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18998\/revisions"}],"predecessor-version":[{"id":68834,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18998\/revisions\/68834"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/14267"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=18998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=18998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=18998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}