JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

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

<div id="divInput">
  <input type="text" id="inputBox"/>
</div>

CSS

#inputBox {
    border: 1px solid #cbcbcb;
    background-color: #FFFEBB;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-left: 9px;
}

JavaScript

YUI().use("datatable", "node",
    function(Y) {
    var MyModelList, MyModel, 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"}
    ];
        
    function configureInlineEdit() {
        var divInputNode, inputBoxNode,
          colClassNamePrefix = table.getClassName('col') + '-',
          colClassNameRegex = new RegExp(colClassNamePrefix + '(.*)'),
          colClassNameSelectorPrefix = 'td.' + colClassNamePrefix;

        function parseStyle(node, type) {
          return +(node.getComputedStyle(type).replace(/px/, ''));
        }

        divInputNode = Y.one('#divInput');
        inputBoxNode = divInputNode.one('input');
        divInputNode.hide();

        table.isEditableCell = function (td) {
          var column, columnName;
          if (td.getDOMNode().tagName === 'TD') {
            columnName = this.getColumnNameByCell(td);
            if (columnName) {
              column = this.getColumn(columnName);
              return column && column.editable;
            }
          }
        };
        table.editCell = function (td) {
          var value = td.getHTML(),
            xy = td.getXY(),
            w = parseStyle(td, 'width'),
            h = parseStyle(td, 'height'),
            pl = parseStyle(td, 'paddingLeft'),
            pr = parseStyle(td, 'paddingRight'),
            pt = parseStyle(td, 'paddingTop'),
            pb = parseStyle(td, 'paddingBottom'),
            ipl;

          divInputNode.show();
          inputBoxNode.set('value', value);

          ipl = parseStyle(inputBoxNode, 'paddingLeft');

         ...