Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/components/numbro/dist/languages.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#example1 {
  font: 12px sans-serif;
}

JavaScript

const myData = [{
    product: "Apple iPhone Xs 256GB Gold",
    discount_available: false,
    price: 999,
    discount: 0,
		discountedPrice: '=C1-(C1*(D1/100))'
  },
  {
    product: "Apple iPhone 6s 64GB Pink",
    discount_available: false,
    price: 660,
    discount: 10,
		discountedPrice: '=C2-(C2*(D2/100))'
  },
  {
    product: "Apple iPhone 6s 64GB Black",
    discount_available: false,
    price: 660,
    discount: 0,
		discountedPrice: '=C3-(C3*(D3/100))'
  },
  {
    product: "Apple iPhone 5s 16GB Black",
    discount_available: true,
    price: 104,
    discount: 15,
		discountedPrice: '=C4-(C4*(D4/100))'
  },
  {
    product: "Apple iPhone 5s 16GB White",
    discount_available: true,
    price: 104,
    discount: 20,
		discountedPrice: '=C5-(C5*(D5/100))'
  },
  {
    product: "Apple iPhone 6 64GB White",
    discount_available: true,
    price: 209,
    discount: 10,
		discountedPrice: '=C6-(C6*(D6/100))'
  },
  {
    product: "Apple iPhone X 256GB Black",
    discount_available: false,
    price: 1200,
    discount: 0,
		discountedPrice: '=C7-(C7*(D7/100))'
  },
  {
    product: "Apple iPhone 7 128GB Gold",
    discount_available: true,
    price: 360,
    discount: 10,
		discountedPrice: '=C8-(C8*(D8/100))'
  },
  {
    product: "Apple iPhone SE 64GB Pink",
    discount_available: true,
    price: 169,
    discount: 15,
		discountedPrice: '=C9-(C9*(D9/100))'
  }
];

const container = document.getElementById('example1');
const hot = new Handsontable(container, {
  data: myData,
  colHeaders: true,
	rowHeaders: true,
	formulas: {
  	engine: HyperFormula
  },
  licenseKey: 'non-commercial-and-evaluation',
  columnSorting: true,
  columns: [{
      data: 'product',
      type: 'dropdown',
      source: ["Apple iPhone Xs 256GB Gold", "Apple iPhone 6s 64GB Pink", "Apple iPhone 6s 64GB Black", "Apple iPhone 5s 16GB Black", "Apple iPhone 5s 16GB White", "Apple iPhone 6 64GB White", "Apple iPhone X 256GB Black", "Apple iPhone 7 128GB Gold", "Apple...