# How to add custom dx component to listview table in Constellation application

**URL:** <https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947>\
**Category:** Knowledge Share\
**Tags:** dx-api, constellation, pega-platform\
**Created:** [August 1, 2024, 2:13pm UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947 "2024-08-01T14:13:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![baipc](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/baipc/32/7689_2.png) [@baipc](https://forums.pega.com/u/baipc)\
**Post date:** [August 1, 2024, 2:13pm UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947/1 "2024-08-01T14:13:50Z")

</div>

This document explains how to add custom dx component to listview tables in Constellation application.

Note: Before taking this path, make sure to explore OOTB options.

**Steps:**

1. Create a custom dx component eq., CustomTableCell is a custom component name.

References:

Sample gallery: [https://github.com/pegasystems/constellation-ui-gallery](https://github.com/pegasystems/constellation-ui-gallery)

Builder: [https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/creating-custom-components.html](https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/creating-custom-components.html)

1. Make when rule “pxEnableC11nDev” to true.

2. Open the Rule-UI-View instances and open listview eq., TestDataList.

 ![views.jpg](https://pega1.discourse-cdn.com/pega/original/3X/b/4/b470231cd8e9aafa317115c67f611a6f7bd2891f.jpeg)

1. Mark view as Custom.

2. Define custom component metadata in a cell eq., CustomTableCell is a custom component name.

 ![View metadata.png](https://pega1.discourse-cdn.com/pega/original/2X/2/2cdc60f43b6c7d8f1f8f0a0330afbb49b0022367.png)

1. Define component name in pxDependencies eq., CustomTableCell is a custom component name.

 ![Dependencies.png](https://pega1.discourse-cdn.com/pega/original/2X/0/0a807f9482384c9e8ebc0e5c41c37ae6fae61195.png)

1. Save the rule and launch listview.

**Runtime**

 ![modal.png](https://pega1.discourse-cdn.com/pega/original/2X/1/18cda8a9ea501c21f5acf252bd9de2c818c981d7.png)

---

<div class="post-metadata">

**Author:** ![VinitK17138924](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@VinitK17138924](https://forums.pega.com/u/VinitK17138924)\
**Post date:** [September 24, 2024, 1:10pm UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947/2 "2024-09-24T13:10:00Z")

</div>

@baipc How can we create a completely custom table instead of just the cell?

---

<div class="post-metadata">

**Author:** ![priyanka\_aavula](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@priyanka\_aavula](https://forums.pega.com/u/priyanka_aavula)\
**Post date:** [May 9, 2025, 9:26am UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947/3 "2025-05-09T09:26:58Z")

</div>

@baipc

Can we add buttons and icons in the place of links?

1.We have created a custom component that gives link or icon or button as output by taking below inputs.

- for buttons - Local action, data page and button label are passed as inputs to custom component.

- for link - Local action, data page and link label are passed as inputs to custom component.

- for Icon - Local action, data page and Icon Name are passed as inputs to custom component.

2.This component is working as expected when we used it in views directly, but when we try using it as one of columns values in a table, its not working as expected. So, we have followed your article and was successfully in adding the custom component in the table but below are the issues.

-As suggested, we have modified the view from dev studio and tried accessing the same from app studio. Here, when we open view from app studio the new custom component configuration options are not seen in the view, it only shows the default configurations

-Pega is not showing the buttons and Icons in the table, irrespective of what ever code we add in custom component index.tsx file defaults as shown below, it always shows only links in the table.(we are trying to add buttons and icons too). Screenshot is attached.

3.We also could override the local actions by editing views from dev studio successfully.

Could you please let us know if we have missed anything?

 ![Index.tsx SS.jpg](https://pega1.discourse-cdn.com/pega/original/2X/8/885b07417cd2afcce35aa47944dcca0f3a6b0dd9.jpeg)

---

<div class="post-metadata">

**Author:** ![A2178](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@A2178](https://forums.pega.com/u/A2178)\
**Post date:** [August 19, 2025, 5:28pm UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947/4 "2025-08-19T17:28:40Z")

</div>

It’s easy to miss in the second screenshot b/c there’s not a red arrow, so be sure to set

```auto
"customComponent": true

```

in the metadata, otherwise the table will not render your component in the cell.

Sam

---

<div class="post-metadata">

**Author:** ![SSrinivas](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/ssrinivas/32/22334_2.png) [@SSrinivas](https://forums.pega.com/u/SSrinivas)\
**Post date:** [August 15, 2026, 3:40pm UTC](https://forums.pega.com/t/how-to-add-custom-dx-component-to-listview-table-in-constellation-application/7947/5 "2026-08-15T15:40:21Z")

</div>

@baipc

if the value attribute property does not hold value(empty) then the landing page is not loading and failing with error, we have a requirement to use custom component in landing page but the value for few rows will be blank.

 ![image](https://pega1.discourse-cdn.com/pega/original/3X/e/c/ec015f0d3d3ed6f52572315de251823761742845.png)  
Any thoughts how to handle this?