Before I dive into the code, I wanted to give you a warning and something you will potentially have to manage on your own. First of all, this doesn't play exceptionally well with Responsive ability of tables in PSWriteHTML and Dashimo. If you have lots of columns, things started to look weird. It worked fine with 10 – 15 but then with 60 columns with identical data it would look differently. I've asked the creator of DataTables, and for now, there's no solution to this, but maybe sometime next year they will address this problem. So if you're into this situation, you may need to play around with some of the options that are available to you to mitigate this issue (if you get the problems I mentioned). In the code below, I'm using small data preparation, and then I'm showing both ways to create HTML in PSWriteHTML and Dashimo. Both give the same output, so it's up to you which one you prefer to use! The differences in syntax are minimal.
Import-Module PSWriteHTML -Force
# Preparing some data
$Properties = @(
'Name'
'Id'
'PriorityClass'
'FileVersion'
'HandleCount'
'WorkingSet'
'PagedMemorySize'
'PrivateMemorySize'
'VirtualMemorySize'
'TotalProcessorTime'
)
$ProcessesAll = Get-Process | Select-Object -First 30
$Processes = $ProcessesAll | Select-Object -First 30 -Property $Properties
# Preparing data End
# uses PSWriteHTML naming
New-HTML -TitleText 'Title' -UseCssLinks:$true -UseJavaScriptLinks:$true -FilePath $PSScriptRoot\Example01.html -ShowHTML {
New-HTMLPanel {
New-HTMLTable -DataTable $Processes -HideFooter -ScrollCollapse {
New-HTMLTableHeader -Names 'Name', 'ID' -Title 'Process Information' -Color Red -FontWeight lighter -Alignment left -BackGroundColor LightBlue
New-HTMLTableHeader -Names 'PagedMemorySize', 'PrivateMemorySize', 'VirtualMemorySize' -Title 'Memory' -Color White -BackGroundColor Blue
New-HTMLTableHeader -Names 'Name' -BackGroundColor Red -Color WhiteSmoke
New-HTMLTableHeader -Names 'Id' -BackGroundColor Blue -Color White
New-HTMLTableHeader -Names 'PriorityClass', 'FileVersion', 'HandleCount' -BackGroundColor Gold -Color White
New-HTMLTableHeader -BackGroundColor Green -Color White -Title 'Full Title'
New-HTMLTableCondition -Name 'HandleCount' -ComparisonType number -Operator gt 500 -BackgroundColor Gray -Color White -Row
}
}
}
# Uses Dashimo naming
Dashboard -Name 'Title' -FilePath $PSScriptRoot\Example02.html -Show {
Panel {
Table -DataTable $Processes -HideFooter -ScrollCollapse {
TableHeader -Names 'Name', 'ID' -Title 'Process Information' -Color Red -FontWeight lighter -Alignment left -BackGroundColor LightBlue
TableHeader -Names 'PagedMemorySize', 'PrivateMemorySize', 'VirtualMemorySize' -Title 'Memory' -Color White -BackGroundColor Blue
TableHeader -Names 'Name' -BackGroundColor Red -Color WhiteSmoke
TableHeader -Names 'Id' -BackGroundColor Blue -Color White
TableHeader -Names 'PriorityClass', 'FileVersion', 'HandleCount' -BackGroundColor Gold -Color White
TableHeader -BackGroundColor Green -Color White -Title 'Full Title'
TableConditionalFormatting -Name 'HandleCount' -ComparisonType number -Operator gt 500 -BackgroundColor Gray -Color White -Row
}
}
}
Looks cool right? Multi-row header, multiple colors to style things, and zero HTML code. Keep in mind I've not spent time on design of how colors match each other so while the above example looks ugly, you can style it as you want. This is a quick and dirty way to show you a new feature of command New-HTMLTableHeader. What's also important here is New-HTMLTableCondition command. The difference between those two is that New-HTMLTableHeader modifies HTML during the PowerShell Table building process. So it reads the header and manipulates all that is required to achieve results you see above. For New-HTMLTableCondition, it's a different story. It makes comparison during displaying of HTML with JavaScript. Why this matters? Well, it matters because table condition most likely has almost 0 impacts on the table generation time and it won't be visible if you disable JavaScript. On the other hand, the header does manipulation during generation so you may see some performance impact. Not something you will notice, but still worth to know.
