React error when using Icons in tables

PowerShell Universal
1

I have a dashboard running under 2.9 that displays data from a database , a function returns a data structure that is used to build the table. The function that returns the data includes icons in the data using this code
New-UDIcon -Icon check_circle -Color green -Size 2x
when I exclude these from the data my table displays with no issue , however when I include them I get a react error
Objects are not valid as a React child (found: TypeError: Cannot read property ‘scrollWidth’ of null). If you meant to render a collection of children, use an array instead.
Below is a more details including a JSON representation of the data I am using to populate the table and the code I am using to create the table.
Can anyone tell me what needs to change to get icons displaying in a table in 3.x like they do in my 2.9 page?

The data I use to populate the table looks like this , this is a JSON representation I outputted for debugging.
…
{
“PatchingHealth”: {
“listItem”: false,
“inverse”: false,
“size”: “2x”,
“rotation”: 0,
“border”: false,
“style”: null,
“pulse”: false,
“id”: “ccb773e9-7941-4e57-94e0-92a4fab60bda”,
“title”: “”,
“icon”: “ExclamationCircle”,
“type”: “icon”,
“transform”: “”,
“fixedWidth”: “False”,
“spin”: false,
“pull”: “”,
“className”: “”,
“flip”: “”,
“regular”: false,
“color”: “rgba(255, 0, 0, 1)”
},
“PatchesFailed”: 1,
“os”: {
“listItem”: false,
“inverse”: false,
“size”: “2x”,
“rotation”: 0,
“border”: false,
“style”: null,
“pulse”: false,
“id”: “963be812-e2e2-4e70-a9e0-0e462ce48894”,
“title”: “”,
“icon”: “Linux”,
“type”: “icon”,
“transform”: “”,
“fixedWidth”: “False”,
“spin”: false,
“pull”: “”,
“className”: “”,
“flip”: “”,
“regular”: false,
“color”: null
},
“PatchesMissing”: 1,
“PatchDate”: “2020-09-13T00:00:00”,
“ServerName”: “Redacted”,
“PatchingStatus”: “Patching Failed See Associated Incident”,
“PatchesScheduled”: 0,
“PatchesInstalled”: 0
}
…

The code I am running to build the table is :

New-UDPage -Name “tabledata” -Content {
# $Session:Data | ConvertTo-Json | Out-File “c:\temp\data.txt”
$Session:Now = Get-Date
$Session:LastData = ParseSQLData -BP_ID ‘[Redacted]’ -PatchMonth ‘9’ -PatchYear ‘2020’ -GetCurrentDate $Session:Now

 $Session:LastData | ConvertTo-Json | Out-File "c:\temp\data.txt"

 $Session:Columns = @(

 New-UDTableColumn -Property os -Title 'OS'

 New-UDTableColumn -Property ServerName -Title 'Server Name'

 New-UDTableColumn -Property PatchDate -Title 'Patch Date'

 New-UDTableColumn -Property PatchesMissing -Title 'Patches Missing'

 New-UDTableColumn -Property PatchesInstalled -Title 'Patches Installed'

 New-UDTableColumn -Property PatchesFailed  -Title 'Patches Failed'

 New-UDTableColumn -Property PatchesScheduled -Title 'Patches Scheduled'

 New-UDTableColumn -Property PatchingHealth -Title 'Patching Health'

 )

New-UDTable -Id 'LastPatchData' -Data $Session:LastData -Columns $Session:Columns

}

2

You’ll want to use the -OnRender parameter. Something like this:

 New-UDTableColumn -Property os -Title 'OS' -OnRender {
  $Data = $Body | ConvertFrom-Json 
  New-UDIcon -Icon $_.OS.icon
}

Here’s a complete example: https://docs.ironmansoftware.com/dashboard/components/data-display/table#table-with-custom-column-rendering

3

Thank you so much for the response, -OnRender did not seem to work but the example led me to -Render and I was able to get it working with this.

New-UDTableColumn -Property os -Title ‘OS’ -Render {
$Data = $Body | ConvertFrom-Json
New-UDIcon -Icon $Data.OS.icon
}

Thanks again for the quick response.

4

Whoops. Yeah mistype on my part. Glad it’s working!

5

Is it possible to combine a data value AND a UDicon in the same column?

6

You should be able to return multiple components from a column. You might need to wrap them in a parent component.

New-UDTableColumn -Property os -Title ‘OS’ -Render {
    New-UDElement -tag div -Content {
        New-UDIcon -Icon $EventData.OS.icon
        New-UDTypography -Text $EventData.OS.Text
    }
}
7

Hmm perhaps I am doing this wrong, but it is only showing my ServerName property as text… no icon.

New-UDTableColumn -Property ServerName -Title ServerName -Render {
        New-UDElement -tag div -Content {
            New-UDTableColumn -Property ServerName -Title ServerName
            New-UDIcon -Icon server -Size lg -Color green
        }
    }

Edit: I actually had two columns with the same property so I removed the one in favor of the code above, but now I see nothing in the column
image

8

Use New-UDTypography instead of New-UDTableColumn in the render block.

New-UDTableColumn -Property ServerName -Title ServerName -Render {
        New-UDElement -tag div -Content {
            New-UDTypography -Text $EventData.ServerName
            New-UDIcon -Icon server -Size lg -Color green
        }
    }
9

I literally just came to this realization on my own and was coming back to this thread to update my comment. As always, thank you so much for your prompt replies.

1 Like