Handsontable example

HTML

<div id="hot"></div>

CSS

</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>

JavaScript

var dataObject = [
  {
    id: 1,
    url: "a=1&b=2&c=3&d=4"
  },
  {
    id: 2,
    url: ""
  },
];

var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
  data: dataObject,
  columns: [
    {
      data: 'id',
      type: 'numeric',
      width: 40
    },
    {
      data: 'url',
      type: 'text'
    }
  ],
  stretchH: 'all',
  width: 805,
  autoWrapRow: true,
  height: 487,
  maxRows: 22
};
var hot = new Handsontable(hotElement, hotSettings);