Skip to main content

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.

Authoring

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. 
  • Configure the number of rows for pagination.
  • Select date columns to be filtered, if any. Once configured, your users will be able to use the date range filter.
  • Select the Number columns to be filtered, if any. Once configured, your users will be able to use a number range filter.
  • Select the Text columns to be filtered, if any. Once configured, your users will be able to use a dropdown menu to narrow their search.
  • Select columns to be sorted in Ascending Order.
  • Select columns to be sorted in Descending Order.
  • Enable Search, Filter, CSV Export, and Pagination as needed, all optional.
  • If Search is enabled, please indicate the Search Placeholder Text.

Column Display Settings:

  • Select Columns from Table to Place 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.

    EXAMPLE: In the first chart below, we have set the column called "Page Count" to display as a child row.  You will notice that this row can only be viewed by hitting the + icon located on each row.
  • Select Columns to Hide from Table: Your CSV may contain useful data that you want to keep or reference, but that you do not want to display to the end user. Indicate those columns here to hide them from your table.
  • Select a Column to Display as Header Row: Your table can include header rows. 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.
    • Select "Always Order By Header Row." If you are displaying header rows, it is recommended that you select this option. Without this option, if users sort by a field other than the one use for the header row, the table can seem confusing as the header rows will repeat in different vertical locations on the table.
  • Columns to increase width: Use this setting to increase the width of up to 2 columns by a value of 1-5.  The higher the number the wider the column will display.

Columns Filter Settings: Column filters allow the table to display based on the filtered selection as specified by the Author. This aims to make CSV files as re-usable as possible by allowing Authors to display only wanted data from the files instead of the entire table.

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

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.

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. 

Breed Group Activity Level Size Coat Type