JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>

<table id="list4"></table>
<button name="test" value="Save all" onclick="postAllGridData()" >save</button>

<script type="text/javascript">
        function postAllGridData() {
        // TODO : JSON request to server + reload grid
            alert('code here');
    }
</script>

JavaScript

jQuery("#list4").jqGrid({
    caption: "Week 40 (16-12 t/m 22-22)",
    datatype: "local",
    height: 250,
    colNames: ['Id', 'Date', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    colModel: [
        { name: 'id', editable : false,index: 'id', width: 60, sorttype: "int" },
        { name: 'Name', editable: false, index: 'invdate', width: 90, sorttype: "date" },
        { name: 'Monday', editable: true, index: 'Monday', width: 80, sorttype: "float" },
        { name: 'Tuesday', editable: true, index: 'amount', width: 80, align: "right", sorttype: "float" },
        { name: 'Wednesday', editable: true, index: 'tax', width: 80, align: "right", sorttype: "float" },
        { name: 'Thursday', editable: true, index: 'total', width: 80, align: "right", sorttype: "float" },
        { name: 'Friday', editable: true, index: 'note', width: 80, sorttype: "float" }
    ],
    editurl: 'clientArray',
    multiselect: true
});

var mydata = [
    { id: "1", Name: "karel", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
    { id: "2", Name: "peter", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
    { id: "3", Name: "pietje", Monday: "test3", Friday: "note3", Tuesday: "400.00", Wednesday: "30.00", Thursday: "430.00" },
    { id: "4", Name: "krekel", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
    { id: "5", Name: "Hans", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
    { id: "6", Name: "Ahmet", Monday: "test3", Friday: "note3", Tuesday: "400.00", Wednesday: "30.00", Thursday: "430.00" },
    { id: "7", Name: "ielse", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
    { id: "8", Name: "Janneke", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
    { id: "9", Name: "Maaike",...