JSFiddle - React, Tailwind, and code Playground

Invoke the setContent method of the jqxDropDownList. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
Type into a filter textbox
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

var data = generatedata(500);
 var source =
            {
            datatype: "json",
                datafields: [
                    { name: 'participantId' },
                    { name: 'idParticipantTest' }
                ],
                localdata: [
                    {"participantId":"253","idParticipantTest":"31"},
                    {"participantId":"244","idParticipantTest":"30"},
                    {"participantId":"234","idParticipantTest":"29"}
                ]
            };
var dataAdapter = new $.jqx.dataAdapter(source);

 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: dataAdapter,
     sortable: true,
     filterable: true,
     showfilterrow: true,
     columns: [
         {"text":"Id participant test", "columngroup":"participant", "columntype":"textbox", "filtertype":"textbox", "filtercondition":"CONTAINS", "datafield":"idParticipantTest", "editable":0,"width":170},
         {"text":"Id participant", "columngroup":"participant", "columntype":"textbox", "filtertype":"textbox", "filtercondition":"CONTAINS", "datafield":"participantId", "editable":0,"width":170}
     ]  
 });
 $('#jqxgrid').on('filter', function () {

 });