JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

<div id="dt"></div>

<div id="msg"></div>

JavaScript

YUI().use("datatable",
    function(Y) {
    var MyModelList, MyModel, model0, table, data =[
       {dnum:100, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:101, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:102, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:103, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:104, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:105, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:106, dint:7, dtxt:"Test 7 string", dname:"Lara"}
    ];
        
    MyModelList = Y.Base.create('myModelList', Y.ModelList, [], {
      sync: function (action, options, cb) {
        if (action === 'read') {
            cb(null, data);
        } else {
            cb('Unsupported sync action: ' + action);
        }
      }
    });
    MyModel = Y.Base.create('myModel', Y.Model, [], {
      idAttribute: 'dnum'
    });

    Y.one('body').addClass("yui3-skin-sam");               
    table = new Y.DataTable({
        columns:[ 'dnum', 'dint', 'dtxt', 'dname' ],
        data: new MyModelList(),
        recordType: MyModel        
    }).render('#dt');
    table.data.load(); 
    model0 = table.data.item(0);
    Y.one('#msg').set('innerHTML', ['model0.isNew() = ', model0.isNew(), '<br/>',
                                    'model0.isModified() = ', model0.isModified(), '<br/>',
                                    'JSON.stringify(model0.lastChange) = ', JSON.stringify(model0.lastChange), '<br/>',
                                    'model0.toJSON().dnum = ', model0.toJSON().dnum, '<br/>',
                                    'model0.get("dnum") = ', model0.get("dnum"), '<br/>',
                                    'model0.get("id") = ', model0.get("id")].join(''));
});