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.
      • Tag NameSpace: For Tag columns, this lets users determine the Root Path allowed for Tags.
    • 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: When checked, this will force the selected column into a child row. Child rows are indicated by a "+" icon before the first Column's data in each cell. By clicking on the "+" icon, child rows are expanded into view below the current row. This can aid in the visual display of a table on the page by reducing the number of columns that display by default creating a cleaner visual presentation.
      • Set Column Heading Values as Header Row: When checked, this option will take this specified column and use it's column data as group headings for the table.
      • Always Order by Header Row: When checked, the table will always sort by the grouped Header Row values first.

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: Error/No Results Message: Enter the message that will display when the component has a configuration error or when no results are available. This field supports Rich Text Editor (RTE) functionality.

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.

• 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.