Reactive Spreadsheet-like Calculation In JavaScript – xcell

Category: Javascript , Recommended | February 8, 2018
Author: tomazy
Views Total: 62
Official Page: Go to website
Last Update: February 8, 2018
License: MIT

Preview:

Reactive Spreadsheet-like Calculation In JavaScript – xcell

Description:

The xcell library enables you to apply reactive, spreadsheet-like calculations to any elements such as input fields, table cells and more.

Basic usage:

Insert the UMD version of the xcell’s files into the document.

<script src="https://unpkg.com/[email protected]/dist/xcell-umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/xcell-inspect-umd.js"></script>

The basic example.

<input id="A"> + <input id="B"> = <input id="C" readonly>
const $a = xcell(1)
const $b = xcell(2)
const $c = xcell([$a, $b], (a, b) => a + b)

A.value = $a.value
B.value = $b.value
C.value = $c.value

A.addEventListener('input', e => $a.value = +e.target.value)
B.addEventListener('input', e => $b.value = +e.target.value)

$c.on('change', ({ value }) => C.value = value)

const inspector = xcellInspect([$a, $b, $c], {
  renderDOT: true,
  renderGraph: true,
  hidden: false,
})

document.body.appendChild(inspector.element)

Leave a Reply