---
schema_version: "1"
id: 298100fd04c02007c1ee859f583dee6923e9811e95e6839377b350d6c90ac00e
title: DataTableCell Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_datatablecell_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datatablecell_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 958418da6e3de23607c1fd96bcfac25ba6a860809223d4a646e8cc048e72c5d8
description: For the managed package runtime, this page contains a DataTableCell LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# DataTableCell Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a DataTableCell LWC ReadMe for each Vlocity release.

![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).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _DataTableCell Lightning Web Component_ is the base element inside a _DataTable Lightning Web Component_ forming individual cells.

## Available dataTableCell Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d230745e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d230745e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d230745e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d230745e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d230745e92">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">columnData</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">JSON</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Contains metadata of what you pass inside columns json.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">cellData</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">JSON</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Specifiies column cell data. For example, if this column field name is "email", this variable will contain related data to that field name</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">iconUrl</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Defines the base url used for the edit field for a custom icon.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Specifes the theme of the component.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">isCustomUi</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">
              <p style="margin-bottom:0;">true, false (Default:false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Set to true to implement a custom UI.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e68 ">
              <p style="margin-bottom:0;">rowData</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e80 ">
              <p style="margin-bottom:0;">JSON</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d230745e92 ">
              <p style="margin-bottom:0;">Contains complete row data from one single record. Can show more data.</p>
            </td>

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

## Example of baseState

```
<c-data-table
  extraclass="slds-table_bordered"
  theme="{theme}"
  icon-url="{iconUrl}"
  draggable="true"
  pagesize="5"
  row-level-edit="true"
  row-delete="true"
  columns="{columns}"
  records="{tableData}"
  onupdate="{tableUpdateHandler}"
  ondelete="{tableDeleteHandler}"
  onrowclick="{tableOnRowClickHandler}"
>
  <c-data-table-cell
    data-field-name="age"
    class="dataTableCell"
  ></c-data-table-cell>
  <c-data-table-cell
    data-field-name="balance"
    class="dataTableCell"
  ></c-data-table-cell>
</c-data-table>
```