---
schema_version: "1"
id: 79902498efc30dfbbdd5bd8646c23f04c3a2f30a12f4f6753051eaf9223e08e7
title: Flexcards Datatable Properties (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_datatable_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_datatable_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b112854f57deb2609c30826bdd86fd305f87f1c8209659674d8ae57e77415f83
description: For the managed package runtime, datatable element properties are configurable in the Property Panel when you select a Datatable element in the Flexcard Designer. With the Datatable element, display a tabular structure of the data fetched from a data source.
products:
  - Omnistudio
release: "264"
---
# Flexcards Datatable Properties (Managed Package)

For the managed package runtime, datatable element properties are configurable in the Property Panel when you select a Datatable element in the Flexcard Designer. With the Datatable element, display a tabular structure of the data fetched from a data source.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

  
| Property | Description | Reference |
| --- | --- | --- |
| Column | Update the data fields to populate the table and set options for columns, such as Type and Selectability. | n/a |
| Conditions | Add a condition that must be met for the element to display. | [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.") |
| Element Name | The name of the element as seen on the canvas. Used to distinguish one element from another as you build your Flexcard in the designer. Is used only within the designer. | [Flexcard Naming Conventions (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_naming_conventions.htm&release=264.0.0&type=5 "For the managed package runtime, follow requirements when naming Flexcards and Flexcard elements to prevent errors when working with the Flexcard Designer and importing Flexcards as datapacks. For example, you may run into issues when importing a Flexcard with the same name as one that already exists in your org.") |
| Records | Specify the record data that populates the table. Defaults to {records}. | n/a |

## Attributes

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note The **Accessibility Support** property is supported in Winter '22 to display the **Datatable Name** property. Beginning Spring '22, **Datatable Name** property is visible in the Properties panel by default.

 
| Property | Description |
| --- | --- |
| Accessibility Support | Displays the **Datatable Name** property where you can add an aria-label for accessibility users. |
| Cell Level Edit | Enable support for cell-level inline-editing. Select which columns are editable from the **Column** property. |
| Datatable Name | Adds an aria-label for accessibility users. The text isn’t visible on screen and only visible to assistive technologies. |
| Draggable | Enable the ability to rearrange rows by dragging them up or down. |
| Extra Class | Enter a class appended to the container of the element. Select from a class defined in the **Add Custom CSS** feature of the Flexcard Designer or any style sheet available to the Flexcard. |
| Fire Event On Delete Confirm | Enable to fire a delete custom event when a row is deleted. |
| Hide Table Header | Enable to hide the table header. |
| Is Searchable | Enable the ability to search all column values. Limit which columns are searchable from the **Column** Property. |
| Is Sortable | Enable support for sorting all columns. Limit which columns are sortable from the **Column** Property. |
| Page Limit | Specify the number of page navigation links to add to pagination. The **Page Size** property must be enabled. |
| Page Size | Enable pagination by specifying how many records to display on each page. If using **Group By**, the Page Size is determined by the number of groups instead of the number of rows. |
| Row Delete Dependent Column | Enable the ability to delete a row based on a data field value returning as false. The field must have a boolean (true or false) value and **Row Delete** must be enabled. |
| Row Delete | Enable the ability to delete a row from the Flexcard. The record isn’t deleted in the database. Triggers the `delete` event. |
| Row Level Edit | Enable support for row-level inline-editing. |
| Show Confirm Modal Before Row Delete | Enable to display a confirmation window before a row gets deleted. |
| User Selectable Column | Allow users to select which columns are visible. Select specific columns from the **Column** property. |
| User Selectable Row | Make row selectable by adding a checkbox at the beginning of each row. Triggers the `selectrow` event. |

## Group Attributes

 
| Property | Description |
| --- | --- |
| Active Groups | Enable to expand all groups. |
| Group By | Group table rows by a data field. |
| Group Order | Sort groups in ascending or descending order. |
| Group Wrapper Class | Add a class to the wrapper surrounding each group name. |
| Hide Extra Column | Enable to remove the space below and above the group name. |
| Sort Across Groups | Sorts both the groups and the rows within each group when a column head is clicked. By default, sorting happens within each group when a column head is clicked. View functionality in Preview. |

## Column Properties

These properties are visible in the **Add DataTable Columns** window when you click the **Column** property.

 
| Property | Description |
| --- | --- |
| Field Label | Update the name of the field column. By default, the field label is the **Field Name**. |
| Field Name | Select the field column to display. |
| Is Sortable | Select which fields are sortable. Enable **Is Sortable** under **Attributes** in the Properties panel. |
| Is Searchable | Select which fields are searchable from the search form. Enable **Is Searchable** under **Attributes** in the Properties panel. |
| Type | Select the type of data the field column displays. For example, if an Account field name is AnnualRevenue, select Currency. |
| Is Editable | Select which field column a user can edit. Enable **Cell Level Edit** under **Attributes** in the Properties panel. |
| Is User Selectable | Select which field columns a user can hide or show. Enable **User Selectable Column** under **Attributes** in the Properties panel. |
| Is Visible | Select which field columns are hidden or visible by default. Use with **Is User Selectable** to enable users to display hidden field columns. |

## Datatable Events

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d254955e603">Event Name</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d254955e606">Event Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Event Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e603 ">update</td>

            <td data-label="Event Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e606 ">Fires when table data changes.</td>

          </tr>
          <tr class="">
            <td data-label="Event Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e603 ">selectrow</td>

            <td data-label="Event Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e606 ">
              <p>Fires when a row is updated. Enable <strong class="uicontrol">User Selectable
                  Row</strong>.</p>
              <p style="margin-bottom:0;">The selectrow event contains data for the current row
                only, not all previously selected rows. To collect data for all selectrow
                events requires <a href="https://developer.salesforce.com/docs/platform/lwc/guide/events-handling" target="_blank">event handling</a>.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Event Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e603 ">rowclick</td>

            <td data-label="Event Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e606 ">
              <p>Fires when a row is clicked.</p>
              <p style="margin-bottom:0;">The rowclick event contains the record of
                the row on which the user clicks.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Event Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e603 ">delete</td>

            <td data-label="Event Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d254955e606 ">Fires when a row is deleted. Enable <strong class="uicontrol">Row
                Delete</strong>.</td>

          </tr>
        </tbody>
      </table>