---
schema_version: "1"
id: 6d63ccc58f5cac42bd9fc4681d46e836c9a2597029129b653ba6da7476b3ddd9
title: Show Data in a Table on a Flexcard
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_a_datatable_to_a_flexcard_29717.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_datatable_to_a_flexcard_29717.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f19e839bbcb23cfb96aa1c81112da93f59d4f7b1d0a1fd7dd39dda264ed6a35f
description: At times, a sortable table is most suited to represent your data. You can show data retrieved from a data source in a table on Flexcards. For example, show account cases as a sortable table.
products:
  - Omnistudio
release: "264"
---
# Show Data in a Table on a Flexcard

At times, a sortable table is most suited to represent your data. You can show data retrieved from a data source in a table on Flexcards. For example, show account cases as a sortable table.

1. From the App Launcher, find and select **Flexcards**.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard for editing the Flexcard.
4. Drag the data table element from the element panel to the canvas.
5. Configure the newly added table element:
    
    1. Add columns in the data table and enter information as needed in the window that appears.
    2. To let users navigate between pages using numbered links in the page, set up pagination properties by using the Page Size and Page Limit fields.
        
        If the page size is not specified, all records are displayed in a single page. If the total number of pages in the data table is less than the page limit, all pages are shown in the navigation links.
        
        For example, if you set the page limit to 3, each page displays three numbered links at the bottom of the page. The first and last pages are always shown in the navigation links. Any remaining pages are shown as ellipsis.
    3. To delete a record when a user sets a field value to false, enter a field name in the **Field Determining Row Deletion** field. If you're using the designer on a managed package, enter a field name in the **Row Delete Dependent Column** field.
        
        Make sure that delete row is enabled for the data table.
        
        For example, a table lists account cases and has a boolean record field `IsEscalated`. When `IsEscalated` is false, a user can delete the record. When the field is true, hide the trash icon to prevent users from deleting the record.
    4. Enter the remaining information as needed.
        
        ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)
        
        Note If you hide a field by using the Is Visible attribute, a user can't search the column associated with the field, even if the Is Searchable attribute is set to true.
    
    You can't add a clickable field in a data table. As a workaround, select the **User Selectable Row** attribute, which triggers a rowclick event. Then, in the Flexcard, add an event listener that uses a merge field action that contains the row data. You do this by clicking **Event Listener** in the Setup tab of the Flexcard. The merge field must be in the `{action.result.X}` format, where X is the fieldName from the data table. This action fetches data into the data table.

Review the events that users trigger when they interact with data table records. Each attribute that you set on the data table element when you create the Flexcard corresponds to an event.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:17.899761336515514%">
          <col style="width:42.004773269689736%">
          <col style="width:40.09546539379475%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d13518e144">Event</th>
            <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d13518e146">Description</th>
            <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d13518e148">Checkbox in the Data Table Properties</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Event" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e144 ">delete</td>
            <td data-label="Description" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e146 ">The user deletes a row.</td>
            <td data-label="Checkbox in the Data Table Properties" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e148 ">
              <p>Delete row </p>
              <p style="margin-bottom:0;">Checkbox in designer for a managed package: Row Delete</p>
            </td>
          </tr>
          <tr class="">
            <td data-label="Event" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e144 ">rowclick</td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e146 ">
              <p dir="ltr">The user clicks a row.</p>
              <p style="margin-bottom:0;" dir="ltr">The rowclick event contains the record of the row on which the
                user clicks.</p>
            </td>
            <td data-label="Checkbox in the Data Table Properties" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e148 ">—</td>
          </tr>
          <tr class="">
            <td data-label="Event" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e144 ">selectrow</td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e146 ">
              <p dir="ltr">The user updates a row.</p>
              <p style="margin-bottom:0;" dir="ltr">The selectrow event contains data for the currently selected
                row. It doesn’t consider previously selected rows. To collect data for
                all selectrow events, set up event handling.</p>
            </td>
            <td data-label="Checkbox in the Data Table Properties" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e148 ">
              <p>Let users select rows</p>
              <p style="margin-bottom:0;">Checkbox in designer for a managed package: User Selectable Row</p>
            </td>
          </tr>
          <tr class="">
            <td data-label="Event" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e144 ">update</td>
            <td data-label="Description" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e146 ">The user updates table data.</td>
            <td data-label="Checkbox in the Data Table Properties" class="slds-cell-wrap" style="vertical-align:top;" headers="d13518e148 ">
              <p dir="ltr">Edit cells and Edit rows</p>
              <p style="margin-bottom:0;" dir="ltr">Checkbox in designer for a managed package: Cell Level Edit and
                Row Level Edit</p>
            </td>
          </tr>
        </tbody>
      </table>