Add filter option to a custom table on a custom widget

[DPrasna]

Hello All,

I have created a custom widget on Portal inside which I have created a custom table.

(refer image below)

<table class="table table-striped">
<tr>
<!--<th>User Name</th>-->
<th class="text-nowrap" ng-click="sortBy('name')">User Name &#9660;
<span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
</th>
<th>Active</th>
<th>Locked out</th>
<th ng-show="data.environment.indexOf('Development')>-1">Development</th>
<th ng-show="data.environment.indexOf('Production')>-1">Production</th>
<!--<th>ASIP</th> -->
<th class="actions"></th>
</tr>
<tbody>
<tr ng-repeat="user in c.Userdata | filter:{'username':c.searchtext,'active':c.active} | orderBy:propertyName:reverse ">
<td>{{user.username}}</td>
<td>{{user.active}}</td>
<td>{{user.lockedout}}</td> 
</tr>
</tbody>
</table> 

And it will look like below. I need help with the following request. How to bring in or customise and add a filter option here.(Orange highlight)

Help much appreciated on this.

TIA

@Allen Andreas @gregmorrison @Ankur Bawiskar @priyasunku @Community Alums 

[Ahmmed Ali]

Hello @DPrasna 

Have a look at below post. It shows how to add condition builder in portal. you can replicate same in your custom widget and bind it with your table.

https://www.servicenow.com/community/developer-articles/replicate-conditions-field-type-for-service-...

Thank you,

Ali