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. Once you upload your CSV file into AEM, you can add the Data Table CSV to your page and author as needed.
*Note: Adobe recommends that CSV files not exceed 1MB (megabyte) or 1,000 rows. Though there is no hard-limit, table performance decreases as data stored in the file increases.
Configuring the Basic tab
- File Path: Set the path to the CSV file that is uploaded to the DAM.
- Number of rows for pagination: Configure the number of rows to display before pagination occurs.
- Select Date Columns to be Filtered: Select columns from the CSV file to be recognized as Date columns. Shows Date Filter options for selected columns.
- Select Number Columns to be Filtered: Select columns from the CSV file to be recognized as Number columns. Shows Number Filter options for the selected columns.
- Select Text Columns to be Filtered: Select columns from the CSV file to be recognized as Text columns. Shows Text Filter options for the selected columns.
- Select Columns to be sorted: Select columns from the CSV file to allow clickable header sorting for Ascending & Descending sort of the column.
- Select Columns to be sorted Ascending Order: Select columns from the CSV file to be sorted in Ascending order, if needed.
- Select Columns to be sorted Descending Order: Select columns from the CSV file 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.
Configuring the Columns Details tab
- Column Name: Dropdown that contains a list of the loaded CSV file's column headings. Select the column you want to link or filter the table by.
- Search Operator: Set to the operator needed for filtering. Choose from "Contains", "Is Equal To", or "Is Not Equal To" the keyword provided.
- 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 from the CSV file 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.
Configuring the Column Display tab
- Select Columns from Table to Place 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.
- 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)*: Enter a number from 1-5 to increase the width of a column for better visual display. 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 |
|---|