JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div style="position:absolute; left:   8px; top: 8px;" id="artikelGrid"></div>
<div style="position:absolute; left: 350px; top: 8px;" id="artikelSelektGrid"></div>

JavaScript

$(document).ready(function () {

    var testData = [{
        Name: "Activity 1",
        Aktive: 0
    }, {
        Name: "Activity 2",
        Aktive: 0
    }, {
        Name: "Activity 3",
        Aktive: 0
    }, {
        Name: "Activity 4",
        Aktive: 0
    }, {
        Name: "Activity 5",
        Aktive: 0
    }, {
        Name: "Activity 6",
        Aktive: 0
    }, {
        Name: "Activity 7",
        Aktive: 0
    }, {
        Name: "Activity 8",
        Aktive: 0
    }, {
        Name: "Activity 9",
        Aktive: 0
    }, {
        Name: "Activity 10",
        Aktive: 0
    }];

    var source = {
        datatype: "json",
        datafields: [{
            name: 'Active'
        }, {
            name: 'Name'
        }],
        localData: testData

    };

    var dataAdapter = new $.jqx.dataAdapter(source);


    $('#artikelGrid').jqxGrid({
        width: 300,
        source: dataAdapter,
        columnsHeight: 28,
        selectedrowindex: 0,
        selectionMode: 'singlerow',
        columns: [{
            text: 'Artikel',
            datafield: 'Name',
            width: 300
        }]
    });

    $('#artikelGrid').bind('rowselect', function (beiEvent) {

        var artHauptIndex = beiEvent.args;
        $('#artikelSelektGrid').jqxGrid('clearselection');
        $('#artikelSelektGrid').jqxGrid('selectrow', artHauptIndex.rowindex);
    });

    $('#artikelSelektGrid').jqxGrid({
        width: 350,
        source: dataAdapter,
        selectedrowindex: 0,
        selectionmode: 'checkbox',
        columns: [{
            text: '',
            dataField: 'Active',
            hidden: true
        }, {
            text: 'Ge\u00E4nderten Artikel updaten in ...',
            dataField: 'Name',
            align: 'center'
        }]
    });

    var checked = false;

    $('#artikelSelektGrid').on('rowunselect', function (event) {
        var args = event.args;
        var rowBoundIndex = args.rowindex;
        var rowData = args.row;
      ...