title: How to convert html <table> to Handsontable which table has html input fields also
body: <p>I want to show a dynamic table which has records coming from a custom search.</p>
  
  <p>Now I want to make the table row as an inline editable row.</p>
  
  <p>I also need pagination with the table since I have 30 to 40 table columns which I need to display on the same table (scroll for columns). </p>
  
  <p>I used Handsontable to achieve this as seen below, however, the image is not coming as I have entered in the table cell.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset='utf-8'&gt;
    &lt;title&gt;Scroll - Handsontable&lt;/title&gt;
  
    &lt;script data-jsfiddle="common" src="handsontable.full.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;link data-jsfiddle="common" rel="stylesheet" media="screen" href="handsontable.full.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div id="example1" style="width: 700px; height: 400px; overflow: auto"&gt;
         &lt;table id="example" class="row-border hover order-column" cellspacing="0" style="Display: none;" &gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Action&lt;/th&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Address&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr&gt;
              &lt;td&gt;&lt;img src="edit.jpg" height="20" width="20"/&gt;&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;test&lt;/td&gt;
              &lt;td&gt;test&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;img src="edit.jpg" height="20" width="20"/&gt;&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;test2&lt;/td&gt;
              &lt;td&gt;test2&lt;/td&gt;
              &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;img src="edit.jpg" height="20" width="20"/&gt;&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;test3&lt;/td&gt;
              &lt;td&gt;test3&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
        &lt;script data-jsfiddle="example1"&gt;
          var data=$('#example tr').map(function(tr){
          return [$(this).children().map(function(td){return $(this).text()}).get()]
          }).get()
  
          var
            example = document.getElementById('example1'),
            maximize = document.querySelector('.maximize'),
            maxed = false,
            resizeTimeout,
            availableWidth,
            availableHeight,
            hot1;
  
          hot1 = new Handsontable(example,{
            data: data,
  //          colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
            rowHeaders: false,
            colHeaders: false,
            fixedColumnsLeft: 2,
            fixedRowsTop: 1,
            minSpareRows: 1,
            contextMenu: true
          });
  
          function calculateSize() {
            var offset;
  
            if (maxed) {
              offset = Handsontable.Dom.offset(example);
              availableWidth = Handsontable.Dom.innerWidth(document.body) - offset.left + window.scrollX;
              availableHeight = Handsontable.Dom.innerHeight(document.body) - offset.top + window.scrollY;
  
              example.style.width = availableWidth + 'px';
              example.style.height = availableHeight + 'px';
            }
          }
        &lt;/script&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>