Create a Data Table page

Step one is basic but critical: creating a page introduction component for your page.  In the folder in which you'll be creating your Data Table component, create a new General Content component, assigning it the appropriate title and body content that you wish to appear before your Data Table.  This step is crucial in that it establishes the opening heading and contextual content surrounding your Data Table.  Without this, your page will be without an opening heading, which will result in an accessibility error.  Dropping in a General Content component and presented with the Page Introduction component template will ensure your page starts out with an <h1> heading and the necessary contextual content to help define your Data Table.

1. In the 020 section, navigate to the folder where you want the components for the Data Table page to reside.
2. Create a new component and complete the following fields:
   1. Name: enter a name for the component here
   2. Schema: select General Content
   3. Title: enter the headline for the Data Table page here. 
   4. Content: enter the introductory text that will go at the top of the page. This is a rich-text field, so you can add other elements like images, links, etc.
3. Save and Close the component.

Prepare and upload the Data Table source file

If you are not linking to an external data source, your Data Table will require a separate source data file, that contains your raw data. This step will walk you through the process of creating, preparing, and uploading your source file into Tridion.

Instructions for preparing your source file

The source file can be formatted as tab delimited (.txt), comma separated values (.csv), JSON, or XML, and either be an external data source or a component link within Tridion to a component data.

These instructions focus on generating CSV and TSV files for use in Tridion. If you want to build a Data Table using JSON or XML and need help doing so, please submit a support ticket and we will assist you.

CSV files

Tip: If your data contains commas and they are not properly "escaped", this will affect the way your data displays in the Data Table. The Data Table reads each comma in your data as an instruction to move the data to a new column, and therefore will need a little extra treatment.  Any columns of data that contain commas must be encapsulated in quotation marks.  Fortunately for you, if you are exporting your spreadsheet as a CSV file, Microsoft Word will do that work for you.  An encapsulated column of data will look something like this:
"This column, has a comma in it"

The easiest way to create a CSV file is in Microsoft Excel. Here are the steps for doing so.

1. Generate a spreadsheet that contains the data you wish to display in your Data Table, with data separated into columns. 
2. It is imperative that your CSV and TSV files have a header row. Provide a unique name for each column of data in the header row.  
   
3. If your data contains line breaks within a single cell, you will need to insert HTML break tags where the line should be. For example, an address in a spreadsheet should be formatted like this:
   
   The reason for this approach is because line breaks in Excel are not rendered as line breaks or carriage returns in the Data Table.  Additionally, if your column is not contained within quotation marks and contains a line break, that line break will be interpreted as the start of a new row of data, and therefore will cause the Data Table to render incorrectly or altogether break.
4. Using Excel's Save As feature, save your file in a comma-separated value (.csv) format.

TSV files

TSV files is one alternative to .csv files and doesn't necessarily present any additional benefits over CSV data files, and they can be relatively difficult to maintain.  But one advantage is that you do not need a spreadsheet application to maintain your data, and can be modified or maintained using Microsoft Notepad. Here are the steps for doing so:

1. Create a file in Microsoft Notepad. Type in the data, and hit the "Tab" button between each piece of data that should be in a new column. Hit Enter to start a new row of data.
   (You can also create the file in Excel and save it as a tab-delimited file, but doing so will put quote marks around any data that contains commas. To remove those quotes, you will have to save the file as tab delimited in Excel, open the file in Notepad, and remove all the quote marks from your file.)
2. If your data has a header row, you will need to delete the header row.
3. Save the file as a .txt file.

Including URLs in your data

If you would like to include hyperlinks in your data, we've introduced the ability to include hyperlinks using Markdown syntax (no HTML knowledge required!).  If you would like a column of hyperlinks, ensure that your hyperlink column is in the following format:
[Displayed Text](https://mn.gov/) 

This will render out as Displayed Text in the Data Table.

Uploading the file

Regardless of which source file type you selected, the process for uploading your file is the same. Please do the following:

1. In the 020 section, navigate to the folder where the components for the Data Table page will reside.
2. Create a new multimedia component and complete the following fields:
   1. Name: enter a name for the file here
   2. Schema: select CSV or TSV data file (you may receive a pop-up asking you to reload the schema for the page, please click OK to proceed)
   3. Click the Load from Disk button
   4. Navigate to where your source file is saved and select it
   5. After the file has completed uploading, Save and Close the component

1. In the 050 section, navigate to (or create) the structure group where the Data Table page will reside.
2. Create a new page.
3. Fill in the Name, File Name, Page Display Name, Dublin Core Title, and Dublin Core Description fields.
4. For the Page Template field, uncheck "Inherit from Parent." Then, in the drop-down menu for the field, select Data Table.
5. Click the Design tab.
6. Click the Add button:
   1. Navigate to the General Content component you created in step 1, select it, apply the Page Introduction component template, and insert it into the page.
   2. Navigate to the Data Table configuration component you created in step 3, apply the Data Table component template, and insert it into the page.
7. Close the Insert Component Presentation pop-up window.
8. Save and Close your Data Table page, and then Publish to Staging to test your work.  If you are creating a brand new page, we recommend republishing your navigation as well.