JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var myTable = $('<div id="myTable"></div>')
$('#myApp').append(myTable);

var source = {
    localdata: [
        ["Passed", "w1"],
        ["Manual Passed", "w2"],
        ["Data Failed", "w3"],
        ["Test Script Failed", "w4"],
        ["To Be Anallyzed", "w5"],
        ["Passed", "w6"],
        ["Failed", "w7"]
    ],
    datafields: [{
        name: 'status',
        map: '0',
    }, {
        name: 'work',
        map: '1',
    }],
    datatype: "array"
};

myTable.jqxGrid({
    width: "100%",
    height: "100%",
    columnsresize: true,
    showfilterrow: true,
    sortable: true,
    filterable: true,
    source: new $.jqx.dataAdapter(source),
    columns: [{
        text: 'Status',
        datafield: 'status',
        width: 250,
        filtertype: 'checkedlist',
        filtercondition: 'STARTS_WITH',
        columngroup:'day'
    }, {
        text: 'Work',
        datafield: 'work',
        width: 180,
        columngroup:'day'
    }],
    columngroups: [{
        text: 'Status Work',
       
        align: 'center',
        name:'day'
        
    }

    ]
});

/*
var fgroup = new $.jqx.filter();
var filter1 = fgroup.createfilter('stringfilter', 'Passed', 'starts_with');
var filter2 = fgroup.createfilter('stringfilter', 'Failed', 'starts_with');
fgroup.addfilter(0, filter1); // first argument: 0=AND, 1=OR
fgroup.addfilter(1, filter2); // first argument: 0=AND, 1=OR
myTable.jqxGrid('addfilter', 'status', fgroup);
myTable.jqxGrid('applyfilters');
*/