# Adding image row to a table in Ignition Perspective

**URL:** <https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 25, 2024, 11:14am UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440 "2024-04-25T11:14:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 25, 2024, 11:14am UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/1 "2024-04-25T11:14:41Z")

</div>

I would like to add images to the first row of a table. One image per column.  
I trying to add a Custom Method Script to the table like this:

```python
def configureCell(self, self, value, textValue, selected, rowIndex, colIndex, colName, rowView, colView):
   RetVal = {}
    
    # Default text handling
    if value == 0:
        RetVal['text'] = None

    # Customizations for the first row to display images
    if rowIndex == 0:
        RetVal['text'] = None # Clears any text in the first row
        RetVal['background'] = '244,244,244' # Sets a uniform background color for the first row

        # Maps column indices to specific image paths
        imagePaths = {
            2: '/system/images/Connet-logo-2.png',
            3: '/system/images/Connet-logo-3.png',
            4: '/system/images/Connet-logo-4.png',
 
            5: '/system/images/Connet-logo-5.png'
        }

```

but doesn´t seem to work

🖥

any ideas on how to archieve this?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 25, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/2 "2024-04-25T11:34:41Z")

</div>

`configureCell` is for Vision's Power Table. It doesn't work in Perspective.

The Table component isn't the right tool for what you are trying to do. By definition, all the cells of a column will be the same type so you can't have a picture on one row and text on another. You _could_ by using `render : view` for each cell and having the view switch between pictures and text but it seems like a mess.

Show what you want your finished layout to look like. There's probably a better way.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 25, 2024, 11:41am UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/3 "2024-04-25T11:41:58Z")

</div>

Something like:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b522070939758967860dce86d81a529a6b743c33.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 25, 2024, 12:21pm UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/4 "2024-04-25T12:21:55Z")

</div>

Add them as background images in the table headers.

 ![Images in table header](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/5213bbf775b3c7d376d1df5dff710d907d2ad931.png)

> **Table JSON**
>
> ```python
> [
> {
> "type": "ia.display.table",
> "version": 0,
> "props": {
> "data": [
> {
> "city": {
> "value": "Folsom",
> "editable": true,
> "style": {
> "backgroundColor": "#F7901D",
> "classes": "some-class"
> },
> "align": "center",
> "justify": "left"
> },
> "country": "United States",
> "population": 77271
> },
> {
> "city": "Helsinki",
> "country": "Finland",
> "population": 635591
> },
> {
> "city": "Jakarta",
> "country": "Indonesia",
> "population": 10187595
> },
> {
> "city": "Madrid",
> "country": "Spain",
> "population": 3233527
> },
> {
> "city": "Prague",
> "country": "Czech Republic",
> "population": 1241664
> },
> {
> "city": "San Diego",
> "country": "United States",
> "population": 1406630
> },
> {
> "city": "San Francisco",
> "country": "United States",
> "population": 884363
> },
> {
> "city": "Shanghai",
> "country": "China",
> "population": 24153000
> },
> {
> "city": "Tokyo",
> "country": "Japan",
> "population": 13617000
> },
> {
> "city": "Washington, DC",
> "country": "United States",
> "population": 658893
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Delhi",
> "country": "India",
> "population": 11034555
> },
> {
> "city": "Dhaka",
> "country": "Bangladesh",
> "population": 14399000
> },
> {
> "city": "Lagos",
> "country": "Nigeria",
> "population": 16060303
> },
> {
> "city": "Karachi",
> "country": "Pakistan",
> "population": 14910352
> },
> {
> "city": "Istanbul",
> "country": "Turkey",
> "population": 14025000
> },
> {
> "city": "Cairo",
> "country": "Egypt",
> "population": 10230350
> },
> {
> "city": "Mexico City",
> "country": "Mexico",
> "population": 8974724
> },
> {
> "city": "London",
> "country": "United Kingdom",
> "population": 8825001
> },
> {
> "city": "New York City",
> "country": "United States",
> "population": 8622698
> },
> {
> "city": "Tehran",
> "country": "Iran",
> "population": 8154051
> },
> {
> "city": "Bogota",
> "country": "Colombia",
> "population": 7878783
> },
> {
> "city": "Rio de Janeiro",
> "country": "Brazil",
> "population": 6429923
> },
> {
> "city": "Riyadh",
> "country": "Saudi Arabia",
> "population": 5676621
> },
> {
> "city": "Singapore",
> "country": "Singapore",
> "population": 5535000
> },
> {
> "city": "Saint Petersburg",
> "country": "Russia",
> "population": 5191690
> },
> {
> "city": "Sydney",
> "country": "Australia",
> "population": 208374
> },
> {
> "city": "Abidjan",
> "country": "Ivory Coast",
> "population": 4765000
> },
> {
> "city": "Dar es Salaam",
> "country": "Tanzania",
> "population": 4364541
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Los Angeles",
> "country": "United States",
> "population": 3884307
> },
> {
> "city": "Berlin",
> "country": "Germany",
> "population": 3517424
> },
> {
> "city": "Jeddah",
> "country": "Saudi Arabia",
> "population": 3456259
> },
> {
> "city": "Kabul",
> "country": "Afghanistan",
> "population": 3414100
> },
> {
> "city": "Mashhad",
> "country": "Iran",
> "population": 3001184
> },
> {
> "city": "Milan",
> "country": "Italy",
> "population": 1359905
> },
> {
> "city": "Kiev",
> "country": "Ukraine",
> "population": 2908703
> },
> {
> "city": "Rome",
> "country": "Italy",
> "population": 2877215
> },
> {
> "city": "Chicago",
> "country": "United States",
> "population": 2695598
> },
> {
> "city": "Osaka",
> "country": "Japan",
> "population": 2691742
> },
> {
> "city": "Bandung",
> "country": "Indonesia",
> "population": 2575478
> },
> {
> "city": "Managua",
> "country": "Nicaragua",
> "population": 2560789
> },
> {
> "city": "Paris",
> "country": "France",
> "population": 2229621
> },
> {
> "city": "Shiraz",
> "country": "Iran",
> "population": 1869001
> },
> {
> "city": "Manila",
> "country": "Philippines",
> "population": 1780148
> },
> {
> "city": "Montreal",
> "country": "Canada",
> "population": 1649519
> },
> {
> "city": "Guadalajara",
> "country": "Mexico",
> "population": 1495189
> },
> {
> "city": "Dallas",
> "country": "United States",
> "population": 1317929
> },
> {
> "city": "Yerevan",
> "country": "Armenia",
> "population": 1060138
> },
> {
> "city": "Tunis",
> "country": "Tunisia",
> "population": 1056247
> }
> ],
> "enableHeaderGroups": true,
> "columns": [
> {
> "field": "city",
> "visible": true,
> "editable": false,
> "render": "auto",
> "justify": "left",
> "align": "center",
> "resizable": true,
> "sortable": true,
> "sort": "none",
> "filter": {
> "enabled": false,
> "visible": "on-hover",
> "string": {
> "condition": "",
> "value": ""
> },
> "number": {
> "condition": "",
> "value": ""
> },
> "boolean": {
> "condition": ""
> },
> "date": {
> "condition": "",
> "value": ""
> }
> },
> "viewPath": "",
> "viewParams": {},
> "boolean": "checkbox",
> "number": "value",
> "progressBar": {
> "max": 100,
> "min": 0,
> "bar": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "track": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "value": {
> "enabled": true,
> "format": "0,0.##",
> "justify": "center",
> "style": {
> "classes": ""
> }
> }
> },
> "toggleSwitch": {
> "color": {
> "selected": "",
> "unselected": ""
> }
> },
> "nullFormat": {
> "includeNullStrings": false,
> "strict": false,
> "nullFormatValue": ""
> },
> "numberFormat": "0,0.##",
> "dateFormat": "MM/DD/YYYY",
> "width": "",
> "strictWidth": false,
> "style": {
> "classes": ""
> },
> "header": {
> "title": "",
> "justify": "left",
> "align": "top",
> "style": {
> "classes": "",
> "backgroundImage": "url(\"/system/images/Builtin/icons/48/logic_and.png\")",
> "height": "60px",
> "backgroundRepeat": "no-repeat",
> "backgroundPosition": "bottom"
> }
> },
> "footer": {
> "title": "",
> "justify": "left",
> "align": "center",
> "style": {
> "classes": ""
> }
> }
> },
> {
> "field": "country",
> "visible": true,
> "editable": false,
> "render": "auto",
> "justify": "auto",
> "align": "center",
> "resizable": true,
> "sortable": true,
> "sort": "none",
> "filter": {
> "enabled": false,
> "visible": "on-hover",
> "string": {
> "condition": "",
> "value": ""
> },
> "number": {
> "condition": "",
> "value": ""
> },
> "boolean": {
> "condition": ""
> },
> "date": {
> "condition": "",
> "value": ""
> }
> },
> "viewPath": "",
> "viewParams": {},
> "boolean": "checkbox",
> "number": "value",
> "progressBar": {
> "max": 100,
> "min": 0,
> "bar": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "track": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "value": {
> "enabled": true,
> "format": "0,0.##",
> "justify": "center",
> "style": {
> "classes": ""
> }
> }
> },
> "toggleSwitch": {
> "color": {
> "selected": "",
> "unselected": ""
> }
> },
> "nullFormat": {
> "includeNullStrings": false,
> "strict": false,
> "nullFormatValue": ""
> },
> "numberFormat": "0,0.##",
> "dateFormat": "MM/DD/YYYY",
> "width": "",
> "strictWidth": false,
> "style": {
> "classes": ""
> },
> "header": {
> "title": "",
> "justify": "left",
> "align": "top",
> "style": {
> "classes": "",
> "backgroundRepeat": "no-repeat",
> "backgroundImage": "url(\"/system/images/Builtin/icons/48/oszillograph.png\")",
> "height": "60px",
> "backgroundPosition": "bottom"
> }
> },
> "footer": {
> "title": "",
> "justify": "left",
> "align": "center",
> "style": {
> "classes": ""
> }
> }
> },
> {
> "field": "population",
> "visible": true,
> "editable": false,
> "render": "auto",
> "justify": "auto",
> "align": "center",
> "resizable": true,
> "sortable": true,
> "sort": "none",
> "filter": {
> "enabled": false,
> "visible": "on-hover",
> "string": {
> "condition": "",
> "value": ""
> },
> "number": {
> "condition": "",
> "value": ""
> },
> "boolean": {
> "condition": ""
> },
> "date": {
> "condition": "",
> "value": ""
> }
> },
> "viewPath": "",
> "viewParams": {},
> "boolean": "checkbox",
> "number": "value",
> "progressBar": {
> "max": 100,
> "min": 0,
> "bar": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "track": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "value": {
> "enabled": true,
> "format": "0,0.##",
> "justify": "center",
> "style": {
> "classes": ""
> }
> }
> },
> "toggleSwitch": {
> "color": {
> "selected": "",
> "unselected": ""
> }
> },
> "nullFormat": {
> "includeNullStrings": false,
> "strict": false,
> "nullFormatValue": ""
> },
> "numberFormat": "0,0.##",
> "dateFormat": "MM/DD/YYYY",
> "width": "",
> "strictWidth": false,
> "style": {
> "classes": ""
> },
> "header": {
> "title": "",
> "justify": "left",
> "align": "top",
> "style": {
> "classes": "",
> "backgroundRepeat": "no-repeat",
> "backgroundImage": "url(\"/system/images/Builtin/icons/48/wrench.png\")",
> "height": "60px",
> "backgroundPosition": "bottom"
> }
> },
> "footer": {
> "title": "",
> "justify": "left",
> "align": "center",
> "style": {
> "classes": ""
> }
> }
> }
> ]
> },
> "meta": {
> "name": "Table_0"
> },
> "position": {
> "basis": "299px"
> },
> "custom": {}
> }
> ]
> 
> ```

Tips:

- Create dedicated images for the headers. Make them all the same height.
- `column.n.header.align : top`
- `column.n.header.style.backgroundRepeat : no-repeat`
- `column.n.header.style.backgroundImage : url("/system/images/Builtin/icons/48/logic_and.png")`
- `column.n.header.style.height : 60px` ← Set this to image + text height.
- `column.n.header.style.backgroundPosition : bottom`

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 25, 2024, 2:21pm UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/5 "2024-04-25T14:21:04Z")

</div>

I´m trying this and I getting an error message because some values on my selection.data.0 are null

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/204f33ace6d02c1ca1cd7aeb558435f5f89a0c0f.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/04edcd42fc3198e128ec331adb8ab6c0d2b58677.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f87dfb3639b3052da5741fe215c4004c62f1e9c8.png)

not sure if is related

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 25, 2024, 2:28pm UTC](https://forum.inductiveautomation.com/t/adding-image-row-to-a-table-in-ignition-perspective/89440/6 "2024-04-25T14:28:07Z")

</div>

This is not related to the headers.  
Start a new question. Try to post a chart configuration and chart data to reproduce the error.