I was experimenting “Filter HTML Table rows using PUG” and got a PING for the same requirement! It’s easy using CDN and JS Script (I used it only for demo purpose.) For sure, I will walk you through the steps in bootstrap consumptions later in my blog post. I say “NO” for CDN because of reliability!  issues.

Requirement/Outcome is illustrated in the below shown GIF

Interesting right? 🙂 PUG file is here…..

doctype html
head
    meta(charset='utf-8')
    title Filter
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
    // jQuery (necessary for Bootstrap's JavaScript plugins)
table#table_format.table.table-bordered.table-striped.table-hover.table-list-search
    thead
        tr
            th #
            th ProcessName
            th Id
            th 
                select#filterText(style='display:inline-block', onchange='filterText()')
                    option(disabled='', selected='') Select
                    option(value='true') True
                    option(value='false') False 
                    option(value='all') All
    tbody#myTable
            each process in results
                tr.content
                    td=process.ProcessName
                    td=process.Id 
                    td=process.Handles 
                    td=process.Handles > 600
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
script.
    function filterText() {
    var rex = new RegExp($('#filterText').val());
    if (rex == "/all/") { clearFilter() } else {
    $('.content').hide();
    $('.content').filter(function () {
    return rex.test($(this).text());
    }).show();
    }
    }
    function clearFilter() {
    $('.filterText').val('');
    $('.content').show();
    }

Tip: td=process.Handles > 600 // This results in boolean!

Here I am selecting first 10 process running in local host! Yes, please bare with me I need to fuse PowerShell 🙂 So, PS snippet goes like shown below!

Get-Process | 
Select-Object ProcessName , Id , Handles -First 10 | 
ConvertTo-Json -Compress

Added a ROUTE in our server.js

app.get("/FilterTable", function (request, response) {
    ps.addCommand("./scripts/ProcessInformation.ps1")
    ps.invoke().then(output => {
        var ProcInfo = JSON.parse(output)
        response.render('FilterTableDemo', {
            results: ProcInfo 
        })
    })
});

Just hook it up and Enjoy PowerShell!

Disclaimer: I don’t know the person to credit for this JS / CDN!