JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

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

JavaScript

YUI().use("datatable", "node", 'datatable-scroll',
    function(Y) {
    var table, data =[
       {dnum:100, dint:1, dtxt:"Test 1 string", dnum2:100, dint2:1, dtxt2:"Test 1 string", dname:"George"},
       {dnum:101, dint:2, dtxt:"Test 2 string", dnum2:101, dint2:2, dtxt2:"Test 2 string", dname:"Paul"},
       {dnum:102, dint:3, dtxt:"Test 3 string", dnum2:102, dint2:3, dtxt2:"Test 3 string", dname:"Chase"},
       {dnum:103, dint:4, dtxt:"Test 4 string", dnum2:103, dint2:4, dtxt2:"Test 4 string", dname:"Marge"},
       {dnum:104, dint:5, dtxt:"Test 5 string", dnum2:104, dint2:5, dtxt2:"Test 5 string", dname:"Ben"},
       {dnum:105, dint:6, dtxt:"Test 6 string", dnum2:105, dint2:6, dtxt2:"Test 6 string", dname:"Skyler"},
       {dnum:106, dint:7, dtxt:"Test 7 string", dnum2:106, dint2:7, dtxt2:"Test 7 string", dname:"Lara"},
       {dnum:107, dint:1, dtxt:"Test 1 string", dnum2:107, dint2:1, dtxt2:"Test 1 string", dname:"George"},
       {dnum:108, dint:2, dtxt:"Test 2 string", dnum2:108, dint2:2, dtxt2:"Test 2 string", dname:"Paul"},
       {dnum:109, dint:3, dtxt:"Test 3 string", dnum2:109, dint2:3, dtxt2:"Test 3 string", dname:"Chase"},
       {dnum:110, dint:4, dtxt:"Test 4 string", dnum2:110, dint2:4, dtxt2:"Test 4 string", dname:"Marge"},
       {dnum:111, dint:5, dtxt:"Test 5 string", dnum2:111, dint2:5, dtxt2:"Test 5 string", dname:"Ben"},
       {dnum:112, dint:6, dtxt:"Test 6 string", dnum2:112, dint2:6, dtxt2:"Test 6 string", dname:"Skyler"},
       {dnum:113, dint:7, dtxt:"Test 7 string", dnum2:113, dint2:7, dtxt2:"Test 7 string", dname:"Lara"}
    ];
        
    Y.one('body').addClass("yui3-skin-sam");               
    table = new Y.DataTable({
        columns:[ 'dnum', 'dnum2', 
                  {key: 'dint', editable: true}, 
                  {key: 'dtxt', editable: true},
                  {key: 'dint2', editable: true}, 
                  {key: 'dtxt2', editable: true},'dnum2', 
                  {key: 'dint', editable: true}, 
           ...