Data Table [Elastic Search]

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

The following are authoring guidelines for the Elastic Search Data Table.  See also guides for Manual Data Tables,  CSV Data Tables, Assets Data Tables, Content Fragment 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 [Elastic Search] component, you will first need to set up an elastic search index. Please contact the DoIT WCM team for more information.

Once you have your Elastic Search index set up, you can quickly build a data table based on information from the Elastic Search Index Properties by adding the "Elastic Search Data Table" component to your page and setting up its properties and columns.

Properties

• Elastic Search Index Name: Enter the name of the elastic search index created by DoIT.  
• Search Mode: Select whether this is for a specific or dynamic search. 
  • Selecting "Dynamic Search" requires a key name from the search index.
• Error/No Results Message: Enter a message to display if there are errors or no results are found.
• Checking "Enable Search" will allow users to search the data table
• Search Placeholder: Enter text to display as placeholder text in the search field.
• Indicate whether you want to "Enable Export CSV" which will allow end-users to initiate a download of the currently visible results.
• Indicate whether you want to "Display 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.

• Index Field Name: Enter a field name from your elastic search index to display in this column. 
  
• Column Details:
  • Field Display Name Label: Enter a user friendly name for the index field to display to the user
  • Index Field Type: Select either "Text" or "Date" depending on the elastic
  • 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.
  • Keyword: Keyword for the Search Operator above.
  • Link Element: To link elements, your elastic search index must first be set up to include a field with 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 the elastic search index 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:
  • Indicate if you want to Enable Filters for the end-user.
  • Indicate if you want to Enable Sorting for the end-user. 
  • 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. 

View a live example of the Elastic Search Data Table on the ILCC site.