Agencies
Services
Data Table [CSV]
The CSV Data Table is a component designed to display large or small amounts of data in rows and columns that is populated from an AEM DAM-saved CSV (comma-separated value) file. It has built-in search, sort and filter functionalities similar to other SOI data table components.
The following are authoring guidelines for the CSV Data Table. See also guides for Assets Data Tables, Content Fragment Data Tables, and Manual Data Tables.
Before authoring your CSV Data Table, first upload the CSV file you would like to use to build your table into the DAM.
*Note: CSV files should not exceed 1MB (megabyte) or 1,000 rows. Table performance decreases as data stored in the file increases.
Once you upload your CSV file into AEM, you can add the Data Table CSV to your page and author as follows:
Basic Settings:
- File Path: point to the CSV file that you have previously uploaded to the DAM.
- Number of rows for pagination: Configure the number of rows for pagination.
- Select Date Columns to be Filtered: Select a date column to enable use of the date range filter.
- Select Number Columns to be Filtered: Select a number column to enable use of the number range filter.
- Select Text Columns to be Filtered: Select a text column to enable use of a dropdown menu filter.
- Select Columns to be sorted Ascending Order: Select a column to be sorted in Ascending order, if needed.
- Select Columns to be sorted Descending Order: Select a column to be sorted in Descending order, if needed.
- Enable Search: When checked, enables a Search Bar for searching in the table.
- Enable Filters: When checked, enables the Filter section of the component to display enabled Filters.
- Enable CSV Export: When checked, enables an "Export to CSV" button to download table data to a comma-separated value (CSV) file.
- Enable Pagination: When checked, enables table to paginate after a certain number of items are displayed in the list. When unchecked, all items will be shown in a single list.
- Search Placeholder: Set text to display in the Search field when it is empty.
- 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.
Columns Details:
- Column Name: Dropdown that contains a list of the loaded CSV file's column headings. Select the column you want to filter the table by.
- Search Operator: Contains, Is Equal To, or Is Not Equal To comparisons for the Keyword field below. The table results displayed are based on this operator.
- Keyword: The keyword(s) or text used to match with or against the Search Operator field above.
- Link Element: When checked, allows creating links on the selected column.
- Link Field: Select a column to use as the link source.
- Open in New Tab: When checked, opens the links in a new tab instead of the same tab.
- This is an Email Address: When checked, prepends the link with "mailto:" to open links in Email applications.
- This is a Phone Number: When checked, prepends the link with "tel:" to open links in Phone/Calling applications.
Column Display:
- Select Columns from Table to Place in Child Row: Selected columns will be placed into a child row. Child row columns are displayed by clicking the "+" button next to the first column cell data. This can aid in the visual display of a table by reducing the number of visible columns that display by default.
- Select Columns to Hide from Table: Selected columns will be hidden from view in the table. Hidden columns may still have their data referenced but are not displayed.
- Select a Column to Display as Header Row: The selected column data will be used to group and header your table results. For example, if you had a table of flowers and you wanted to organize the table by flower color, then you could select the column labeled "Color" and then the table would organize all data by color and include a header row in the table.
- Always Order By Header Row: If you are displaying headers in the table, it is recommended to enable this feature to always sort by the header grouping rather than individual items. If unchecked and sorting by other columns, header rows will repeat for each item as needed in the table.
- Columns to increase in width: Up to 2 columns may be increased in width.
- Select a Column from Table to Increase in Size: Select a column to visiually give more "width" to in the table.
- Enter a number from 1 (low) - 5 (high)*: Set a value of 1-5. The higher the number the wider the column will display.
Examples
In this example, we have pointed to a CSV file of books and have enabled filtering, sorting, and searching. Pagination is set to 10 items per page.
Large data table content is loading...
| Title | Author | Published | Cost | Page Count |
|---|
Here is another example of a CSV Data Table where we didn't specify any specific columns to include, and where we hide the filtering and sorting options.
Large data table content is loading...
| Breed | Group | Activity Level | Size | Coat Type |
|---|