JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl">
<div class="filterRow">
<div class="processDisplayName filterCol"><span>processDisplayName</span> <select ng-model="processDisplayName" class="form-control"> <option value="">All</option><option ng-repeat="names in processNames track by $index">{{names}}</option></select></div>
<div class="processState filterCol"><span>processState</span> <select class="form-control" ng-model="processState"> <option value="">All</option> <option>COMPLETED</option> <option>WAITING_WORK_ITEM</option><option>IN_ERROR</option> </select></div>
</div>
<div class="filterRow">
<div class="priority filterCol"><span>priority</span> <select class="form-control" ng-model="priority"> <option value="">All</option> <option>Simple</option> <option>Urgent</option><option>Top Urgent</option> </select></div>
<div class="classification filterCol"><span>classification</span> <select class="form-control" ng-model="classification"> <option value="">All</option> <option>Unclassified</option> <option>Confidential</option><option>Classified</option> </select></div>
</div>
<div class="filterRow">
<div class="requestor filterCol"><span>Requestor</span> <select class="form-control" ng-model="requestor"> <option value="">All</option> <option ng-repeat="names in requestorNames track by $index">{{names}}</option> </select></div>
</div>
----------------
<div class="tableContent2" ng-repeat="myworklist in myWorkList.groups">
<div class="worklistGroupHeader header2 background_color1">{{myworklist.groupName}}<span class="fas fa-minus-square text_color2" onclick="toggleGroup(this)"></span></div>
<div class="worklistGroup background_color1">
<div class="worklistInstance" ng-repeat="proccess in myworklist.worklist | filter :...
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.myWorkList = {
"groups": {
"1": {
"worklist": [
{
"requestor": {
"firstname": "ΣΤΕΛΛΑ",
"lastname": "ΑΓΓΕΛΟΠΟΥΛΟΥ",
"userId": 15,
"username": "root_el"
},
"processDisplayName": "ABSENCE_TRAINING_PROCESS",
"processDescription": null,
"expirationDate": null,
"terminationDate": null,
"processState": "WAITING_WORK_ITEM",
"processName": "ABSENCE_TRAINING_PROCESS",
"processInstanceId": 15014,
"version": 1,
"processId": 20,
"creationDate": "2018-07-31",
"priority":"Simple",
"classification":"Unclassified",
"attachment":"true",
"deadline":"5 Days"
},
{
"requestor": {
"firstname": "ΔΗΜΗΤΡΗΣ",
"lastname": "ΚΟΤΣΑΛΟΣ",
"userId": 16,
"username": "sangelopoulou"
},
"processDisplayName": "ABSENCE_TRAINING_PROCESS",
"processDescription": null,
"expirationDate": null,
"terminationDate": null,
"processState": "WAITING_WORK_ITEM",
"processName": "ABSENCE_TRAINING_PROCESS",
"processInstanceId": 15039,
"version": 1,
"processId": 20,
...