Handsontable 6.2.2

Data sources

by moregorenine

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">

<div id="example"></div>

JavaScript

const nestedObjects = [
    {id: 1, name: {first: "Ted", last: "Right"}, address: ""},
    {id: 2, address: ""}, // HOT will create missing properties on demand
    {id: 3, name: {first: "Joan", last: "Well"}, address: ""}
  ];
const container = document.getElementById('example');

const hot = new Handsontable(container, {
  data: nestedObjects,
  colHeaders: true,
  columns: [
    {data: 'id'},
    {data: 'name.first'},
    {data: 'name.last'},
    {data: 'address'}
  ],
  minSpareRows: 1
});

nestedObjects[0].name.first = 'moregorenine'
hot.render();