Data Table [Assets]

The Data Table [Assets] component automatically generates a clean, interactive datatable from any selected AEM Assets folder. It provides an efficient way to present documents and media to site visitors while giving authors full control over which metadata fields appear. Visitors can easily sort, filter, and search through asset information, as well as export the data for offline use. The component supports standard metadata—such as titles, descriptions, and dates—and any custom fields stored in the asset’s properties. This makes it a versatile solution for building resource libraries, document repositories, and media listings of any size.

See also guides for CSV Data Tables, Content Fragment Data Tables, and Manual Data Tables.

Configuring the Properties tab

• Asset Root Path: Specify the root path folder in the DAM where the assets are stored.
• Fetch all assets under the root path: When checked, all files within all folders will be grabbed.    
• Tags: Set optional tags to filter the list by.
• Match: Choose to match against any of the selected Tags, or if items need to have ALL of the selected tags.
• Enable Search: select if you would like users to be able to search the asset table
• Enable Filters: Select if you want users to be able to filter your table by certain parameters
• Enable Pagination: Check if you want to enable pagination of the table.
• Number of rows before pagination: Specify how many rows display in your table before pagination occurs.
• Options for Columns: Select the Column Heading based on the available parameters in the pull down. Depending on what Column you are setting up you may see any of these options:
  • Column heading: Set an asset metadata field to use for the Column heading. 
  • Column Details
    • 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.
      
    • Enable Filters: When checked, enables displayed filters for this column.
      
    • Enable Sorting: When checked, enables sorting for this column.
      
    • Choose Order for Sorting Column: Choose between Ascending or Descending sorts.
      
    • Choose this column for default sorting: When checked, this column is set as the primary sorting for the table.
      
    • Enable Link: When checked, links the column to the asset for downloading.
      
    • Open in New Window: When checked, assets will open/download in a new window.
    • Select Force Download if you want the linked asset to download instead of opening automatically in the browser.
      • The Force Download option is useful for documents such as complex PDF forms that may not open correctly in the browser. When this option is enabled, supported asset links will download directly when selected by the user.
  • Column Display:
    • Hide Column from Table: When checked, selected columns will be hidden from view in the table. Hidden columns may still have their data referenced but are not displayed.
    • Set Column Heading Values as Header Row: When checked, this option will take this specified column and use it's column data as group headings for the table.
    • Always Order by Header Row: When checked, the table will always sort by the grouped Header Row values first.
    • Place column 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.
    • Increase Column Width: When checked, allows users to increase the width of specified columns.
    • 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.

• 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 or Class to the component for CSS targeting.

Here is an example of a Data Table built by pointing to a folder of assets and arranging 3 columns to display the Title, Description, and Asset type for each item in the chart.

Please note that sorting has been enabled for both the title and Asset Type and the Description has been set to display as a Child of each row.