# Displaying Salesforce CMS Files in a Data Table

## Overview

This tutorial guides you through using the [Avonni **Data Table**](/experience-cloud/tutorials/components/data-table.md) component to display a list of files from a **Salesforce Content Management System (CMS) Collection**. You will learn how to configure the table and add a "Download" button for each file, providing a seamless experience for users, especially within an Experience Cloud site.

**What You'll Learn:**

* How to connect the Avonni Data Table to a Salesforce CMS Collection.
* How to configure columns to display content details like Title and Created Date.
* How to add a custom action column with a "Download" button.
* How to use the **Download CMS** interaction to make files downloadable for users.

**Prerequisites:**

* You must have an active **Salesforce CMS Collection** with one or more published content items (e.g., PDFs, images).
* You will need the **18-character ID** of this CMS Collection.

***

## Guided Steps

{% stepper %}
{% step %}

### Add the Data Table Component

First, let's set up the Data Table that will display our list of CMS files.

1. From the **Component Library** (left panel), find the **Avonni Data Table** component and drag it onto the canvas.

<figure><img src="/files/kJsZnKytegXOdkRlS96W" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configure the Data Source

Next, we need to connect the Data Table to your specific Salesforce CMS Collection.

1. With the Data Table selected, find the **Data Source** property in the Properties Panel.
2. Select **CMS Collection** from the list of data source types.
3. In the **Collection ID** field that appears, enter the **18-character ID** of your Salesforce CMS Collection or Content Key.

The Data Table is now connected and aware of the content items within your collection.

<figure><img src="/files/u61IPZmwEDoYoDJrBfEW" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add Columns to Display Content Information

Now, let's define which details about the files will be visible in the table.

1. In the Data Table's properties, navigate to the **Columns** section.
2. Click **"Add Column"** to create a new column.
3. **Source Field:** Select a field from the CMS content data (e.g., `Title`).
4. **Column Label:** Give it a user-friendly label (e.g., "Document Title").
5. Repeat this process to add other relevant columns, such as `CreatedDate` or `LastModifiedDate`.

<figure><img src="/files/dIvfxW6ce36z4pcG89SP" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add and Configure the Download Action

This is the most essential step for making the files accessible to users. Since we can't link directly to a file's name, we will create a dedicated action button.

1. **Add an Action Column:** In the **Columns** section of the Data Table properties, click **"Add Column"** one more time. In the column's settings, set its **Type** to **Button**.
2. **Configure the Button Item:**
   * Within the Button column's properties, add a new button item.
   * Give it a **Label** like "Download" or "View File".
   * Set an **Icon Name** (e.g., `utility:download`) for a better visual cue.
3. **Create the "Download CMS" Interaction:**
   * Select the "Download" action item you just configured.
   * Go to its **Interactions** section and add an **On Click** interaction.
   * For the **Type**, select **Download CMS**.
   * This specific interaction is designed to securely generate and initiate a download for the CMS file associated with that particular row in the table. No other properties are needed for this interaction.

<figure><img src="/files/QWAwEXnrXJjh68omRLwq" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Save and Deploy

Now that your Avonni Data Table is fully configured directly on the Experience Cloud page, the final step is to make it live for your site visitors. In Experience Builder, your configuration changes are typically saved as you work; however, you must **publish** the site for them to become visible to your audience.
{% endstep %}
{% endstepper %}

## Why Use a Dedicated "Download CMS" Interaction?

When content is managed via Salesforce CMS and displayed in an Experience Cloud site, the files don't have a standard "record detail page" that a simple link can navigate to. The file's name in the table is just text. The **Download CMS** interaction acts as a secure bridge, correctly identifying the file version associated with the row and initiating a download for the user. This ensures a reliable and seamless user experience.

## **Result**

You now have a dynamic, user-friendly table listing your Salesforce CMS content. When a user clicks the "Download" button on any row, the corresponding file will be downloaded directly to their device.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/tutorials/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.