Data Table [Manual]

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

The following are authoring guidelines for the Manual Data Table.  See also guides for CSV Data Tables, Content Fragment 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 [Manual] component, you will need to input data for every cell manually, but first, you must configure your table by indicating how many rows of information you would like, and then establishing column headers and specifications for each.

• Configure each column:
  • Column Heading: Type the name for the Column Heading
    • Column Details:
      • Choose component for column: Select the appropriate option from the dropdown to Indicate whether the content in your column is text, an image, tags, dates, or numbers.
      • Enable Sorting: This will allow users to click on the column heading to sort the table by this column. If enabled, you will then need to choose whether you want to default by ascending or descending order.
        
      • Enable filter: If selected, this will add a filter field at the top of the table, allowing users to filter by the values in this column.
    • Column Display: 
      • Hide Column from Table: Indicate if you would like to hide this column from your table.  This can be useful if you want to use a column of info for sorting or filtering purposes, but do not need that information to display to the end-user.
      • Place Column in Child Row: Choosing this option will collapse the column into the child row of the parent row. This allows long tables to display more cleanly on a page in Desktop view, as the Mobile view will automatically child any columns to make the table fit in a readable format.
      • Set Column Heading Values as Header Row: This option will take this specified column and use it's column data as group headings for sorting.

Once columns are set up, you. will be able to choose from these settings at the bottom of the component, which applies to the full table:

• Enable Search ?: Enables a text-search field for finding matching results.
• Enable Filters ?: This option needs checked to enable visually showing the filtering options set in the Column Details for this table.
• Allow Export CSV ?: Allows an "Export to CSV" button at the top of the table for downloading the table information in an easy to read format.
• Enable Pagination ?: This option needs checked to enable functionality for creating "pages" within the table after a user-specified amount of items are listed via the "Number of rows for pagination" field.
• 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.

Once you click the Checkmark at the top right of the component, you will see the table on your page populate with the settings set. Now all that is left is filling the individual cells with data.

Based on the settings provided, the table rendered on the page will have empty cells in each column that need manually input.

Each individual table cell is now a component based on the column type: Text, Image, Tag(s), Date, and Number. These components are opened and edited the same way as any other standard component. By clicking on the individual cell, it highlights and indicates the component type at the bottom right corner of that cell. It may be opened using the Configure button and data input into each field as needed.

The display of the Manual Data Table component in the Authoring environment differs from the other data tables in that the Manual Data Table isn't sorted or paginated in the Author environment. This creates a view disconnect that whenever a new row is added, the new row is placed at the bottom of the table. When the author adds data in this new row and opens the Published view of the page, the sorting and pagination functions work and the content is in the order expected.

• When the Manual Data Table is first created, the Tag components in Tag columns may not open their Tag Picker dialog. Refreshing the page will correct this issue.