Interactive Sorting of PowerShell ConvertTo-Html Results

PowerShell provides a command (ConvertTo-HTML) to create an HTML report from data generated or obtained within a script. But the output is a fairly primitive HTML table. While the command does provide the ability to include a style sheet, adding any interactivity is not part of the command. I didn’t find much info on the web about working with the output. So I’ll demonstrate how to add sorting to your table using some JavaScript.

So let’s start with the PowerShell script. The first part of the script is just generating random data into an array of objects called $ReportData so we have something to work with. The last few lines are what matter:

$ReportHeader ="<div class='header'><h1>PowerShell Report Formatting</h1></div>"
$ReportFooter = "<script src=tsorter.min.js></script><script src=demo.js></script>"
# Create an HTML report
$ReportData | Select-Object "Id","Data" | ConvertTo-Html -CSSUri demo.css -Title "Formattting From PowerShell" -PreContent "$($ReportHeader)" -PostContent "$($ReportFooter)" | Out-File -Encoding utf8 "demo.html"

The ConvertTo-HTML command allows you to add content above and below the table using the -PreContent and -PostContent flags. The -PostContent flag contains references to some JavaScript files, local to the HTML output in this case. The could just as easily pull the files down from a CDN or web server. The first reference is a library used for sorting HTML tables from Terrill Dent. The second reference is a custom script I wrote. Let’s examine what the script is doing:

window.onload = () => {
    // Find the table
    const dataTable = document.querySelector('table')

    // Give it an ID so it's easier to work with
    dataTable.id = 'demo-table'

    // Move the first row into a THEAD element that PowerShell
    // doesn't add but is necessary for sorting
    const headerRow = dataTable.querySelector('tr:nth-child(1)')
    const thead = document.createElement('thead')
    thead.appendChild(headerRow)
    dataTable.prepend(thead)

    // Mark the first column as numeric so it sorts correctly
    const numberRow = document.querySelector('#demo-table tr:nth-child(1)').querySelector(':nth-child(1)')
    numberRow.setAttribute('data-tsorter', 'numeric')

    // http://www.terrill.ca/sorting/
    // Make it sortable
    const sorter = tsorter.create('demo-table')
}

The script finds the table, adds an id attribute, and then creates a THEAD element that PowerShell neglects to add. The row of TH is moved to the THEAD. Now the table will scroll with locked headers and support sorting. Lastly, we mark the first column as numeric so it sorts as a number then attach the tsorter library to the table. Clicking the headers now sorts each column nicely.

If you haven’t worked with ConvertTo-Html much, here’s a couple links to get started:

• https://www.vembu.com/blog/how-to-create-html-reports-in-powershell/
• https://adamtheautomator.com/powershell-convertto-html/

You can find the code for this sample on Github.