JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<div id="example3grid" class="dataTable"></div>

<script>
  $("#example3grid").handsontable({
    rows: 7,
    cols: 4,
    rowHeaders: false, //turn off 1, 2, 3, ...
    colHeaders: ["Car", "Year", "Chassis color", "Bumper color"]
    });

$("#example3grid").handsontable("loadData", data); </script>

JavaScript

var obj = jQuery.parseJSON('[{"attrs":[["_cn6ca","2008"],["kia","10"],["nissan","11"],["toyota","12"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000000","lastmod":1345053592},{"attrs":[["_cn6ca","2010"],["kia","30"],["nissan","15"],["toyota","12"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000006","lastmod":1345053592},{"attrs":[["_cn6ca","2009"],["kia","20"],["nissan","11"],["toyota","14"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000005","lastmod":1345053592},{"attrs":[["_cn6ca","2008"],["kia","10"],["nissan","11"],["toyota","12"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000004","lastmod":1345053592},{"attrs":[["kia","Kia"],["nissan","Nissan"],["toyota","Toyota"],["honda","Honda"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000003","lastmod":1345053592},{"attrs":[["_cn6ca","2010"],["kia","30"],["nissan","15"],["toyota","12"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000002","lastmod":1345053592},{"attrs":[["_cn6ca","2009"],["kia","20"],["nissan","11"],["toyota","14"],["honda","13"]],"box":"new_rows","created":1345053592,"id":"502be3981800bfe50e000001","lastmod":1345053592}]');

var data = [];
var i = 0;
var columns = [];
for each (item in obj) {
  var row = [];
  for each ([key, val] in item.attrs) {
    if(i == 0) { 
        columns.push(key);
    }    
    row.push(val);
  }
  data.push(row);
  i++;
}