JSGrid Basic

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

<textarea id="comment"></textarea>
<button type="submit">Add Comments</button>

CSS

.jsgrid-cell { 
    overflow: hidden; 
}

#comment{
  width: 300px;
  height:100px;
}

JavaScript

var data = [];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
 				paging: false,
        autoload: true,
 
        fields: [
            { name: "Date", type: "textarea", width: 150 },
            { name: "User", type: "textarea", width: 150},
            { name: "Comment", type: "textarea", width: 150}
        ]
    });
    
$('button').click(function(){
	var comment = $('#comment').val().trim();
  if(comment.length > 0){
  	data.push({
    	Date: new Date(),
      User: 'ABC',
      Comment: comment
    });
    
    $("#jsGrid").jsGrid({
    	 controller: {
        	loadData: function() {
          	return data;
          }
        }
    });
    
    $('#comment').val('');
  }
});