JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
 
<div id="myDataTable"></div>

JavaScript

YUI().use(
		  'aui-datatable',
		  'aui-datatype',
		  'datatable-sort',
		  function(Y) {
		    var data = [
		      {name: 'John A. Smith'},
		      {name: 'Bob C. Uncle'},
		      {name: 'John D. Smith'},
		      {name: 'Joan E. Jones'},
		      {name: 'Bob F. Uncle'},
		      {name: 'John G. Smith'},
		      {name: 'Joan H. Jones'},
		      {name: 'Bob I. Uncle'},
		      {name: 'John J. Smith'},
		      {name: 'Joan K. Jones'}
		    ];


		    
  
		    var nestedCols = [
		      {
		        editor: new Y.TextAreaCellEditor(
		        {
		        validator: function(e){
		          	return undefined; 
		        },
                  on: {
                   save: function(e){ alert('Event Details : newVal=' + e.newVal + ' oldVal=' + e.prevVal)}
                  }
               }),
		    
		      key: 'name',
		      sortable: true
		      }
		    ];

		    var dataTable = new Y.DataTable(
		      {
		        columns: nestedCols,
		        data: data,
		        editEvent: 'dblclick',
		        plugins: [
		          {
		            cfg: {
		              highlightRange: false
		            },
		            fn: Y.Plugin.DataTableHighlight
		          }
		        ]
		      }
		    ).render('#myDataTable');

		    dataTable.get('boundingBox').unselectable();
		    
		  }
		);