JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>

CSS

.jsgrid-table tbody > tr:last-child td {
    font-weight: bold;
    background:red;
}

/*.jsgrid-table tbody > tr:first-child {
    font-weight: 100;
    background: yellow;
}*/

JavaScript

var clients = [{
  "CompanyAmount": [{
    "SubCompanyAmount": 5,
    "SubCompanyName": "SubCompany A"
  }, {
    "SubCompanyAmount": 10,
    "SubCompanyName": "SubCompany B"
  }, {
    "SubCompanyAmount": 15,
    "SubCompanyName": "SubCompany C"
  }],
  "CompanyName": "Company A"
},
{
  "CompanyAmount": [{
    "SubCompanyAmount": 5,
    "SubCompanyName": "SubCompany A"
  }, {
    "SubCompanyAmount": 10,
    "SubCompanyName": "SubCompany B"
  }, {
    "SubCompanyAmount": 15,
    "SubCompanyName": "SubCompany C"
  }],
  "CompanyName": "Company A"
}];

var fieldsGenerated = [];

CreateFields();

function CreateFields() {
  //This data comes from my rest service
  var fieldCompanyName = {};

  fieldCompanyName.name = "CompanyName";
  fieldCompanyName.title = "CompanyName";
  fieldCompanyName.type = "text";
  fieldCompanyName.align = "center";
  fieldCompanyName.readOnly = "true";

  fieldsGenerated.push(fieldCompanyName);


  var i = 0;

  for (i = 0; i < 3; i++) {
    var fieldAmount = {};

    fieldAmount.name = "CompanyAmount";
    fieldAmount.title = "SubCompanyName"; // comes from service too in original
    fieldAmount.type = "number";
    fieldAmount.align = "center";
    fieldAmount.readOnly = "true";
    fieldAmount.itemTemplate = new Function("value", "return value[" + i + "].SubCompanyAmount")

    fieldsGenerated.push(fieldAmount);
  }

  ShowGrid();
}

function ShowGrid() {
  $("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",

    data: clients,

    fields: fieldsGenerated
  });
}