Agencies
Services
Data Table [ElasticSearch]
Overview
Used to display large and/or small amounts of data in a flexible feature rich manner to public visitors, specifically data sourced from a Elastic Search Index. 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 following are authoring guidelines for the Elastic Search Data Table.
Prerequisite: Before using this component make sure you have an existing Elastic Search Index available. Elastic search indexes are created by Web Services staff and can be automatically populated from a variety of data sources. Web Services can configure on-premise data locations such as Microsoft SQL server, File Server CSV, Excel, XML, JSON feeds and other formats to regularly send data to Elastic Search Indexes. This type of "data shipping" means you can have a flattened data-cube of your report data available in Elastic and the various AEM Elastic based driven components directly within your website, no iframe or embed required.
See also guides for Manual Data Tables, CSV Data Tables, Assets Data Tables, Content Fragment Data Tables.
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.
Configuring the Properties tab
- 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.
- Enable Search: When checked, will allow users to search for results in the data table.
- Search Placeholder: Enter text to display as placeholder text in the search field.
- Enable Export CSV: When checked, allows users to initiate a download of the currently-visible table results.
- Display Pagination: When checked, displays pagination options to users for the table.
- Number of rows before pagination for Desktop/Mobile: Respective options for Desktop and Mobile to determine how many rows in the table to display before paginating.
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
- 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
- Date: Format the data into a proper date format and sort items by date value instead of string value.
- Text: This applies to most index types.
- Search Operator: For Text. Used to pre-filter the data before it is displayed to the user, this will restrict the overall dataset available to the user on the webpage. 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: For Text. 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: When checked, opens links in a new tab instead of the same tab.
- Is Email Address: When checked, will prepend links with "mailto:" to indicate the hyperlink is an email address that will launch a new email from the end-users mail software.
- Is Phone Number: When checked, will prepend links with "tel:" to indicate the hyperlink is a phone number, which can initiate a call on mobile devices and certain desktop calling software.
- Index Field Date Format: Shows up when the Index Field Type is set to "Date". Allows 3 different Date formats:
- mm/dd/yyy = 06/10/2025
- Month dd, yyyy = June 06, 2025
- Day, Month dd, yyyy = Tuesday, June 06, 2025
- Column Display:
- Hide Column from Table: When checked, hides this specific column from the table view. This is useful if there is a column that you want to use as a filtering device on your data table, but that you don't want to display to the end user. *Note: column will be visible on CSV if end user clicks the "Export CSV" button (if enabled for table)
- Enable Filter?: When checked, enables the visible filter for this column in the table.
- Enable Sorting?: When checked, enables sorting for this column in the table.
- Choose Order for Sorting Column: Specify whether sorting should be Ascending or Descending order.
- Set this column for default sorting: When checked, this column is set as the primary sort for the table.
- Set Column Heading as Header Row: This option can only be applied to one column. If selected, the value of this cell will also appear as a header row above the search index item. Additionally, it will automatically activate the "Hide Column from Table" feature by default, but this can be disabled at any time.
- 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.
- 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.
Examples
View a live example of the Elastic Search Data Table below.
Large data table content is loading...