JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.8/populating_datagrid/demo/style.css">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/resources/style/demo.css">
<body class="claro">
    <div id="gridDiv"></div>
    <button id="addRow" data-dojo-type="dijit.form.Button">Thêm dòng</button>
</body>

JavaScript

require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/aspect', 'dojo/domReady!'],

function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, aspect) {
    /*set up data store*/
    var data = {
        identifier: "id",
        items: [{
            id : 1,
            col2 : "AA",
            col3 : "BB",
            col4 : "CC"
         }]
    };

    var store = new ItemFileWriteStore({
        data: data
    });

    /*set up layout*/
    var layout = [
        [{
            'name': 'Column 1',singleClickEdit:'true', editable:'true',
                'field': 'id',
                'width': '100px'
        }, {
            'name': 'Column 2',singleClickEdit:'true', editable:'true',
                'field': 'col2',
                'width': '100px'
        }, {
            'name': 'Column 3',singleClickEdit:'true', editable:'true',
                'field': 'col3',
                'width': '200px'
        }, {
            'name': 'Column 4',formatter: updateDetails,
                'field': 'col4',
                'width': '150px'
        }]
    ];

    /*create a new grid*/
    var grid = new EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        sortInfo: -1,
        
    });

    
    /*append the new grid to the div*/
    grid.placeAt("gridDiv");

    /*Call startup() to render the grid*/
    grid.startup();

    aspect.after(grid, 'renderRow', grid.sort);
    
    var id = 2;

    var button = new Button({
        onClick: function () {
            console.log(arguments);
            store.newItem({
                id: id,
                col2: "col2-" + id,
                col3: "col3-" + id,
                col4: "col4-" + id
            });
            id++;
        }
    }, "addRow");
});

   var updateDetails = function(value, rowIndex) {
       	var col2 = this.grid.getItem(rowIndex).col2;
     //  alert("col2 updated value : " + col2);
   ...