Content Fragment Data Table

Used to display large and/or small amounts of data in a flexible feature rich manner to public visitors, specifically data sourced from a Content Fragment repositories. The component offers various ways of filtering, searching, grouping, etc.. All features of the component are available for the author to select and enable without the need for complex coding or developer knowledge.

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. 

Use-Case: What you might have maintained in a spreadsheet and then posted as a static document, you now can put as individual content fragment objects and then present them in an organized table with advanced sorting, grouping and filtering options. Lets say you want to list a board member directory. Each content fragment could keep a board members name, email, phone number and board title. Then you can display that information easily and effectivly throughout the site on multiple pages, yet maintain it in a singular location. You could even seperate out listings of executive members from member-at-large if you like through filtering.

Prerequisite: Before using this component make sure you have an content fragment model pre-defined and one or more instances of that content fragment created. Content Fragment Models are created by the EAS Web Services group, they define the properties of the object, such as title, description, latitude, longitude, hours of operation, phone number, email address, etc.. The model also specifies which fields are required versus optional and what the data types for each field are such as number, text, hyperlink, etc..

Related Components:

Content Fragment List, Content Fragment Display, Content Fragment Hero Image, Content Fragment Models

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.
 

Configuring the Properties tab

• 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. 
• Fetch all Content Fragments under the root path: When checked, 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.
• Match: Tags set to display items will match to Any of the tags selected by default, or, users may 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. 
• Enable Search: allows users to search the data table, when checked.
• Search Placeholder: When set, the text here will be placed in the Search box when it is empty to let users know what to Search.
• Enable Export CSV: When enabled, allows users to download the current table data into a CSV spreadsheet file using an "Export to CSV" button.
• Enable Filters: When checked, enables the Filter section at the top of the table.
• Enable Pagination: When enabled, the table will only display the set number of rows based on the "Number of rows before pagination" value as a single "page." Users can switch through pages for additional results.
• Number of rows before pagination: Only active while Enable Pagination is checked. This field sets the number of visible rows for a single paginated page.
• Error/No Results Message: add a user-specified RTE text message that displays to the user when the component has a configuration error or no results to display.
• ID & Class: Set an ID and/or Class to the component for CSS targeting.
   

Configuring the Columns tab

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.
  • Enable Filters: When checked, enables displayed Filters for this column.
  • Enable Sorting: When checked, enables sorting for this column.
  • Choose Order for Sorting Column: Displays when Enable Sorting is checked. Allows user to set the sorting for this column to either Ascending or Descending sort.
  • 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: When checked, opens links in a new tab instead of the same tab. 
    • This is an Email Address: When checked, links will be prepended with "mailto:" so links open in email applications when clicked.
    • This is a Phone Number: When checked, links will be prepended with "tel:" so links open in phone/calling applications when clicked.
• 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.
  • Always Order by Header Row: Displays when Set Column Heading as a Header Row is checked. Forces the table to have the Primary table sort be the headered row values.
  • 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.