Content Fragment Data Table

Used to show large or small amounts of data, Data Table components can be built using Manual, CSV, Asset, or Content Fragment configurations.  

The following are authoring guidelines for the Content Fragment Data Table.  See also guides for Manual Data Tables,  CSV Data Tables, and Assets Data Tables.

The Data Table component is designed to organize information in a clean and structured format in rows and columns. It has built-in search, sort, and filter functionalities. 

To use the Data Table [Content Fragment] component, you will first need to set up the content fragments whose data you want to place in your table.  (Learn more about content fragments)

Once you have your content fragments authored, you can quickly build a data table based on information from these fragments by adding the "Data Table Content Fragments" component to your page and setting up its properties and columns.

Properties

• Model: Select the content fragment model you will be using for your data table.  
• Parent Path: Select the parent path where the content fragments you would like to use are stored. 
  • Selecting "Fetch all content fragments under the root path" will pull all content fragments in subfolders as well as those directly under the selected parent path. 
• Tags: If you would like to filter the items by tags, select the correct tag here.
  • Decide if you want to display items that match Any of the tags selected, or if you want to display only those items that match All of the tags selected.     
• Dynamic Page Link: If the content fragments belong to a dynamic page template, specify that page here. 
• Checking "Enable Search" will allow users to search the data table
• Search Placeholder
• Indicate whether you want to "Enable Export CSV" which will allow end-users to initiate a download.
• Indicate whether you want to "Enable Filters" 
• Inicate whether you want to "Enable Pagination"
  • If you enable pagination, you must then indicate how many rows will display before pagination takes effect.
     

Columns

Add columns for each column of data you want to include in your data table. Once added, you will set up the following settings.

• Column Headers: Select which value from. your content fragment to display in this column. Headings will use the Title from your Content Fragment Models, something to keep in mind as you are setting up content fragment models. 
  
  
• Column Details:
  
  • Column Type: Indicate whether the information in this column is text, image, asset, tag, date, or path.
  • Search Operator: If filtering by keyword, indicate if you want to search if the column "Contains," "Is Equal To," or "Is Not Equal To" the keyword provided.
  • Display Results (for column type Date/Time only): 
    • Only from Future Date(s) - Displays results after current Date. 
    • Only from Past Date(s) - Displays results before current Date. 
    • After (NOW) - Displays results after current Date/Time 
    • Before (NOW) - Displays results before current Date/Time 
    • By Date Range - Specify a specific date range to display.
  • Keyword: Keyword for the Search Operator above.
  • Indicate if you want to Enable Filters for the end-user.
  • Indicate if you want to Enable Sorting for the end-user. 
  • Link Element: To link elements, your content fragment must first be set up to include the URLs you want to link to.  Once set up, if you want the fields in this column to link, check this box and then include these additional settings:
    • Link Field: Indicate which Field in your Content Fragment has the correct URL for linking the value in this column. 
    • Open in New Tab: Check if you want to do so. 
    • Indicate if the hyperlink is an email address that will launch a new email from the end-users mail software.
    • Indicate if the hyperlink is a phone number, which can initiate a call on mobile devices and certain desktop calling software. 
• Column Display:
  • Hide Column from Table: This is useful if there is a column that you want to use as a filtering device on you data table, but that you don't want to display to the end user. 
  • Place Column in Child Row: This will collapse indicated columns to they need to be expanded to display.  This can aid in the visual display of a table on the page by reducing the number of columns that display by default.
  • Set Column Heading as a Header Row:  This can only be selected for one column. If selected, the value of this cell will also display as a Header Row above the content fragment item.
  • Increase Column Width: There may be times when you want to increase the width of a column for better visual display. For such columns, use this setting to increase the width by a value of 1-5.  The higher the number the wider the column will display, but the Title of each column will also used to determine each column's width.

Once you hit SAVE you will see the table on your page with the selected columns displayed. 

• When resizing Containers, ensure to use the blue handle on the right side of the component. When adjusting the positioning of a container on it's current row, then use the left side blue dot/handle when resizing the component.
• Left-hand Navigation pages get 9 default columns for a container. If the user puts another fullsize container within that container, and the parent container hasn't had it's width adjusted (IE: it is freshly-inserted), you can resize the child container to 12 columns. Users sometimes run into issues where 1 page has a nested container on one side but not another, causing alignment issues with child components.