- \n
- Title bar with customisable table title and ability to export data to .csv<\/li>\n
- Scrolling, table height, and column width options<\/li>\n
- Table footer showing number of rows<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\n Data display<\/td>\n \n - \n
- Display tags, ad hoc calculations, attribute values, or columns from a relational dataset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\n Columns & user interactivity<\/td>\n \n - \n
- Repeating columns<\/li>\n
- Customisable column titles, date\/time formats, and link columns with variable mapping<\/li>\n
- Specify which columns can be pinned<\/li>\n
- Configure conditional columns<\/li>\n
- Column aggregation (sum, average, minimum, maximum, count)<\/li>\n
- Provide a menu to show\/hide columns<\/li>\n
- Server-side sorting<\/li>\n
- Allow users to group, sort, and filter on columns<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\n Rows<\/td>\n \n - \n
- Specify single or multi select rows for publishing data to a variable<\/li>\n
- Use a Paging Control<\/a> for page-enabled datasets<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
The following image shows a Data Table being configured.
\nFor a complete reference on all the options available, see Data Table Options<\/a><\/strong>.<\/p>\n![\"screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/datatable415.png\")
<\/a><\/p>\nRelated: Using a Data Table<\/a>, Styling a Data Table<\/a>, Data Selector<\/a><\/p>\n
\nQuick Start Using Autofill<\/h2>\n
The fastest way to quickly configure a Data Table is to use the Autofill option. This section explains how to set up a very basic data table, using Tag data.<\/p>\n
1. Open a page in Explorer Studio, and drag a Data Table onto the page.<\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/newdatatable.png\")
<\/a><\/p>\n2. Add tag data to the table, using the Data Selector for Tags<\/a>.\u00a0<\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-random.png\")
<\/a><\/p>\nIn this example, we've used the RandomCalc <\/i>tag, and have left the data collection parameters (Sample Method, Sample Interval, Start Time and End Time) using the page defaults.\u00a0<\/p>\n
3. Under Columns, click Autofill<\/strong>. This automatically adds all columns to the data table, starting from column 1.<\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-autofill.png\")
<\/a><\/p>\nThat's all - you now have a data table with data.<\/p>\n
Click the Preview
![\"preview\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\")
<\/a> button on the Studio toolbar to see what your page will look like in display mode.<\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-preview.png\")
<\/a><\/p>\nRelated<\/strong>: Using Tag Data<\/a><\/p>\n
\nTutorials<\/span><\/h2>\n
If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n
These tutorials explain various options for configuring a Data Table. For the first four tutorials, each follow from the previous one:<\/p>\n
- \n
- Tutorial 1: Specifying Columns<\/strong>. Add a data table with a specified column and Autofill columns.<\/li>\n
- Tutorial 2: Selecting a Row<\/strong>. Update the table to select a row when a user selects a value from another control.<\/li>\n
- Tutorial 3. Conditional Columns<\/strong>. Update the table to add a condition on a numeric column.<\/li>\n
- Tutorial 4. Hyperlink Column<\/strong>. Use the Legacy table to add a column containing hyperlinks.<\/li>\n<\/ul>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/data-table.png\")
<\/a><\/p>\nThe final tutorial is independent from the others:<\/p>\n
- \n
- Tutorial 5: Using a Tag's Digital State<\/strong>. Use a calculation with a digital state set in the data table.<\/li>\n<\/ul>\n
Note<\/strong>: This configuration uses the\u00a0Sample Data\u00a0<\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n
Tutorial 1. Specifying Columns<\/span><\/h3>\n
In this tutorial, we'll display selected columns of a dataset in the table.<\/p>\n
Step 1. Prepare a Studio Page<\/strong><\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/newpage2.png\")
<\/a><\/p>\nBefore you start, click the\u00a0New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n
- \n
- For this exercise, we'll keep the 4 grid cells.<\/li>\n
- Assign a column spacing of 10.<\/li>\n
- Assign the first row a height of 50.<\/li>\n
- Assign a row spacing of 10.<\/li>\n<\/ul>\n
Related:\u00a0Grid Layout tutorial<\/a><\/p>\n
Step 2. Add the Data Table<\/strong><\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/datatableadd.png\")
<\/a><\/p>\nDrag a Data Table component onto the top right grid, as shown. The Data Table is in the Table
![\"Dataset](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\")
<\/a> group.<\/p>\nStep 3. Configure the Data Table<\/strong><\/p>\n
![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-data.png\")
<\/a><\/p>\nClick the Data Table component and configure it as follows:<\/p>\n
Related:\u00a0Data Selector<\/a><\/p>\n
Configuring the Data to display<\/strong>:\u00a0<\/p>\n
- \n
- Open the\u00a0Data <\/strong>Data Selector by clicking on the field. Click the Dataset\u00a0\u00a0tab, and fill in the fields as follows:<\/li>\n<\/ul>\n
- Open the\u00a0Data <\/strong>Data Selector by clicking on the field. Click the Dataset\u00a0
- Tutorial 2: Selecting a Row<\/strong>. Update the table to select a row when a user selects a value from another control.<\/li>\n
- Tutorial 1: Specifying Columns<\/strong>. Add a data table with a specified column and Autofill columns.<\/li>\n
- Display tags, ad hoc calculations, attribute values, or columns from a relational dataset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
![\"Variable](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\")
\u00a0(Variable)<\/td>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-addcolumn.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-autofill10.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-preview-1.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/04\/dt-options.png\")
<\/a><\/p>\n![\"Data](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/08\/datatable-tut2a.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/08\/selectedrow.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/08\/default.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/08\/datalabel.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2024\/08\/dt-column.png\")
<\/a><\/p>\n